Как запустить код в visual studio code: Как запустить проект на c++ в visual studio code? — Хабр Q&A

Содержание

Как запустить код select в VScode?

Я хочу запустить код выбора python в VScode. До сих пор мне приходилось копировать код и вставлять его в terminal ниже, чтобы запустить. Система mac OS.
Итак, есть ли какой-нибудь способ запустить код непосредственно после того, как я его выбрал? Например, как ярлыки.
Спасибо.

visual-studio-code

Поделиться

Источник

yanachen

15 августа 2016 в 08:50

5 ответов

не удается запустить первый проект golang в vscode
Я новичок в golang. я не могу запустить свой файл go в VSCODE, мой код прост package main import fmt func main() { fmt.Println(test) } когда я запускаю go запустить main.go в моем terminal каждая вещь работает нормально, но когда я сохранить его в моей vscode я получаю слишком много ошибок, все…
VSCode: как запустить активную строку, не выделяя ее?
В JupyterLab вы можете запускать код разными способами . И я часто использую опцию для запуска активной строки (где находится указатель мыши) с помощью Run > Run Selected text or current line in console с сочетанием клавиш. После этого указатель переходит на следующую строку, и вы можете…

Я заметил, что для команды «Run Selected Text in Active Terminal» Нет привязок клавиш по умолчанию, но вы можете их создать.

Нажмите Ctrl+K+S, чтобы открыть файл — > настройки — > сочетания клавиш .
Найдите workbench.action.terminal.runSelectedText в связках клавиш.
Нажмите на значок слева, чтобы открыть windnow с этим сообщением «Press desired key combination…» и сделать свой выбор.

Я нажал Ctrl+Alt+R-так как эта комбинация еще не использовалась.
Нажмите клавишу Enter, чтобы сохранить привязку ключей.

Проверено на VSCode 1.30.2 на Windows 10 Pro.

Поделиться

Piotr

30 января 2019 в 11:49

Поделиться

Don

16 августа 2016 в 11:16

@Don
Привет, команда

workbench. action.terminal.runSelectedText

Только отправьте текст на terminal, не запуская его.
Можно ли заставить его отправлять кодовые тексты и запускать их немедленно без дополнительного «enter»?

Поделиться

regnolol

13 мая 2019 в 08:57

Как скомпилировать и запустить код C# в VSCode (Linux Ubuntu)?
Я действительно изо всех сил пытаюсь скомпилировать и запустить простой код C# Hello World!. Ввод dotnet new в terminal ничего не делает, а ввод dotnet new console просто создает файл .csproj, папку obj и файл .cs (код Hello World!), который я все еще не могу запустить. Я уже скачал SDK для linux…
Как запустить код python3 в VSCode? /bin/sh: 1: python: не найден
Я пытаюсь запустить файл python в VSCode с помощью python3. Я знаю, что могу исправить это, просто настроив запуск с помощью интегрированного terminal, как сказано в учебнике microsoft vscode по python. Однако я бы хотел, чтобы программа печатала на вкладке вывод , а не занимала окно terminal….

Теперь он поддерживается ярлыком по умолчанию «shift» + «enter».

выберите нужный фрагмент кода
нажмите «shift» + «enter»

Поделиться

BinhuiLiu

09 марта 2020 в 02:39

Некоторые языковые расширения уже имеют существующую привязку клавиш.

На Windows для расширения PowerShell в настоящее время используется F8 для запуска выделенного текста.

Поделиться

Luke

18 марта 2020 в 17:04

Как построить и запустить код C++ в Visual Studio Code?

Вы можете настроить несколько задач в Visual Studio Code, одна из которых позволит вам построить свой исполняемый файл, а другая-запустить его.

При желании вы также можете заглянуть в Visual Studio Code «Run Mode» (см. здесь ). если вы используете «режим запуска», вы должны быть в состоянии настроить Visual Studio Code для сборки вашего исполняемого файла, а затем запустить его.

Я не очень хорошо знаком с «режимом запуска», поэтому подробно расскажу, как определить несколько задач для достижения аналогичного результата.

Отказ от ответственности: Visual Studio Code не поддерживает задачи, использующие различные команды shell (см. здесь ).

— Вот именно. В своем текущем состоянии Visual Studio Code не имеет поддержки «native» для определения задач, использующих различные команды shell.

Отказ от ответственности: панель вывода задач Visual Studio Code не позволит вам передавать входные данные в вашу программу в интерактивном режиме.

Если ваша программа полагается на пользовательский ввод (например, из stdin), вам, вероятно, лучше не использовать Visual Studio Code для запуска исполняемого файла .

В принципе, нам нужно будет определить две задачи, одна из которых будет задачей сборки, а другая-нашей задачей запуска.

Поскольку Visual Studio Code не имеет большой поддержки для определения нескольких задач, каждая из которых использует разные команды shell, нам нужно будет изменить наше свойство tasks. json ‘ s "command" на cmd (или sh, если на Linux/macOS). нам также нужно будет установить свойство "args" на [/C] ( [-c] , если на Linux/macOS).

Причина, по которой мы делаем это, заключается в том, что мы хотим, чтобы каждая из задач, которые мы собираемся определить, была передана в качестве аргументов новому экземпляру shell.

Следующий шаг — определить наши задачи сборки и запуска. Когда мы это сделаем, нам нужно будет убедиться, что мы помещаем команду, которую мы хотим выполнить, в качестве аргумента задачи. Например:

{
    "taskName": "build",
    "args": ["gcc", "-Wall", "${relativeFile}", "-o", "${relativeFile}.exe", "-pedantic"]
}

Наконец, то, что мы сделаем, это добавим свойство "isBuildCommand" в нашу задачу сборки (и убедитесь, что это true ), а также добавим свойство "isTestCommand" в нашу задачу запуска (и, опять же, убедитесь, что это true ).

После всего этого наш файл tasks.json может выглядеть примерно так:

{
    "version": "0.1.0",
    "command": "cmd",
    "args": ["/C"],
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": ["gcc", "-Wall", "${relativeFile}", "-o", "${relativeFile}.exe", "-pedantic"],
            "isBuildCommand": true
        },
        {
            "taskName": "run",
            "args": ["${relativeFile}.exe"],
            "isTestCommand": true
        }
    ]
}

Примечание: Если размещение каждого аргумента задачи в их собственной строке в массиве args не работает, вы также можете попробовать поместить все аргументы в одну строку в массиве args . Пример:

["gcc -Wall ${relativeFile} -o ${relativeFile}.exe -pedantic"]

Примечание: Если вы хотите иметь возможность вызывать свои задачи с помощью сочетаний клавиш, в вашем распоряжении есть команды редактора "workbench. action.tasks.build" и "workbench.action.tasks.test" .

Если вам нужен пример привязки ключей к этим командам, вот пример того, как они отображаются в моем файле keybindings.json:

[
    {
        "key": "f6",
        "command": "workbench.action.tasks.build"
    },
    {
        "key": "f7",
        "command": "workbench.action.tasks.test"
    }
}

Правка: вам, вероятно, нужно только определить сочетание клавиш для тестовой задачи, так как задача сборки, вероятно, уже имеет одно определенное сочетание клавиш. Проверьте это здесь , прежде чем тратить время на определение другого сочетания клавиш.

Как написать и запустить HTML на компьютере? — Блог HTML Academy

Чтобы стать профессиональным разработчиком, нужно уметь пользоваться инструментами. В этом выпуске разберёмся, как и в чём написать и запустить HTML-код на своём компьютере.

Шаг 1. Качаем текстовый редактор

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на https://code.visualstudio.com/ и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если OS X или Linux — нажмите Other platforms.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:

Add workspace folder — открывает меню выбора папки.
Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Сайт начинающего верстальщика</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <nav>
        На главную
      </nav>
    </header>
    <main>
      <article>
        День первый. Как я забыл покормить кота

        Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить.

        Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.
      </article>
      <aside>
        Здесь могла быть ваша реклама.
      </aside>
    </main>
    <footer>
      Подвал сайта
    </footer>
  </body>
</html>

style. css

Скопируем код со стилями из файла https://htmlacademy.ru/assets/courses/299/outlines.css — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали

Установили и настроили редактор кода.
Создали рабочую папку и добавили туда файлы нашего проекта.
Научились редактировать и сохранять файлы с кодом.
Установили расширение, чтобы сразу видеть результат вёрстки.

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.

Не знаете, какой код написать?

Знакомство с HTML и CSS на интерактивных курсах — бесплатно.

Регистрация

Нажатие на кнопку — согласие на обработку персональных данных

Внеклассное чтение:

Запустите JavaScript в коде Visual Studio

Это решение предназначено для запуска текущего открытого файла в узле и отображения вывода в VSCode.

У меня был тот же вопрос, и я нашел недавно представленный tasksполезным для этого конкретного случая использования. Это немного хлопотно, но вот что я сделал:

Создайте .vscodeкаталог в корневом каталоге вашего проекта и создайте в нем tasks.jsonфайл. Добавьте это определение задачи в файл:

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

Тогда вы можете:
press F1 > type `run task` > enter > select `runFile` > enter
выполнить свою задачу, но я обнаружил, что проще добавить привязку настраиваемого ключа для открытия списков задач.

Чтобы добавить привязку клавиш, в меню пользовательского интерфейса VSCode выберите «Код»> «Предпочтения»> «Сочетания клавиш». Добавьте это к сочетаниям клавиш:

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.runTask"
}

Конечно, вы можете выбрать любую комбинацию клавиш.

ОБНОВИТЬ:

Предполагая , что вы работаете в код JavaScript , чтобы проверить это, вы могли бы отметить свою задачу в качестве тестовой задачи, установив его isTestCommandсвойство , чтобы trueзатем можно привязать ключ к workbench.action.tasks.testкоманде для вызова одностороннего действия.

Другими словами, ваш tasks.jsonфайл теперь будет содержать:

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "isTestCommand": true,
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

. .. и ваш keybindings.jsonфайл теперь будет содержать:

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.test"
}

подробный гайд по настройке и установке плагинов

Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами: Windows, Linux и macOS. VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.

Несмотря на столь высокую популярность программы, ее функционал до сих пор остается не таким очевидным, из-за чего многие пользователи предпочитают продукт конкурента, нежели VS Code. Чтобы решить все проблемы, возникающие при работе с Visual Studio Code, рекомендую ознакомиться с подробным гайдом по настройке этого редактора кода. В нем я покажу, что VS Code – это мощный инструмент, которым может пользоваться каждый.

Установка Visual Studio Code

С установкой среды не должно возникнуть никаких проблем, но давайте все же проведем небольшой ликбез. Выполним несколько действий:

Переходим на официальный сайт и загружаем установочный файл.

Следующим шагом запускаем установочник и ставим редактор кода на компьютер. В блоке «Выберите дополнительные задачи» рекомендую отметить два пункта, позволяющие запускать файлы через выпадающее меню – так вы сможете быстро открыть код в VS Code.

На этом установка завершена. Теперь мы можем использовать редактор кода по назначению. Обычно с этим не должно возникнуть никаких проблем, однако на слабых машинах запуск утилиты часто прерывается. Вылечить такой недуг можно с помощью добавления нового значения к пути ярлыка. Для этого откроем его свойства через правый клик мыши и в графе «Объект» пропишем —disable-gpu.

Готово! Теперь программа должна работать на любом компьютере.

Интерфейс Visual Studio Code

При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые. Весь интерфейс на английском языке (всего в несколько кликов он переводится на русский, но об этом чуть позже). Давайте пока разберемся с интерфейсом: откроем для примера файл с кодом, посмотрим, как его идентифицирует программа без предварительных настроек, и разберем каждый блок утилиты.

Запустить файл с кодом мы можем через правый клик мыши -> Открыть с помощью Code. Файл можно открыть и в программе: для этого в верхнем правом углу выбираем «File» и жмем «Open File…». После этого переходим в нужную директорию и выбираем файл.

В результате перед нами отобразится окно с кодом из файла. Давайте визуально разделим интерфейс на блоки и рассмотрим каждый из них более детально.

Первое, что бросается в глаза, – это блок кода, для которого отведено больше всего места. Название функций и прочее подсвечено разными цветами. Здесь же указан путь до файла, а чуть выше расположены вкладки-файлы, по которым можно перемещаться. С помощью них мы можем добавлять не просто один файл с кодом, а целый проект.

Следующий блок – левая панель управления, включающая в себя 5 основных вкладок: «Проводник», «Поиск», «Система управления версиями», «Запуск кода» и «Расширения». Первая предоставляет пользователю возможность просматривать содержимое проекта и быстро перемещаться внутри него.

Вторая вкладка – поиск. Используется для нахождения слов в документе. Он также может быть запущен с помощью комбинации клавиш «CTRL+SHIFT+F». Алгоритм использования довольно прост – вводим название в поиск и смотрим результат.

Система управления версиями – предназначена для взаимодействия с git.

Запустить и проверить работоспособность кода мы можем в следующей вкладке:

Еще одна важная вкладка, с помощью которой из Visual Studio Code можно сделать функциональную утилиту, это «Расширения». В ней находятся установочники для всех популярных инструментов, используемых разработчиками.

Следующий блок – нижний статус-бар. В нем отображается общая информация о состоянии программы. Обратите внимание, что VS Code автоматически определяет язык программирования и информирует нас об этом.

И еще один раздел – правая панель, включающая в себя небольшой дисплей, который отображает код в уменьшенном варианте, а также позволяет удобно скроллить внутри него. Здесь же мы можем разделить окно кода на несколько столбцов, а также закрыть все файлы одним кликом – для этого используются две верхние кнопки.

Как видите, если пройтись по интерфейсу программы, то она уже не кажется такой сложной. Чтобы сделать все еще проще, давайте проведем русификацию всех элементов интерфейса. О том, как это сделать, поговорим далее.

Русификация Visual Studio Code

Чтобы провести русификацию программы, открываем вкладку с расширениями и прописываем запрос vscode-language-pack-ru. В результате будет отображен новый элемент с кнопкой «Install» – кликаем по ней и ожидаем завершения установки.

Перезагружаем программу и смотрим, что язык интерфейса был изменен на русский:

Если вы захотите вернуть англоязычный интерфейс, для этого потребуется открыть раздел с плагинами и удалить установленный пакет с русским языком.

Внешний вид

Мы можем полностью изменить цветовую схему утилиты. Чтобы это сделать, воспользуемся комбинацией клавиш «CTRL+SHIFT+P» и введем запрос «theme». В отобразившемся списке выберем «Параметры: Цветовая тема».

В результате отобразится список возможных тем – для примера возьмем солнечную тему.

После применения темы интерфейс примет следующий вид:

Обратите внимание, что это не весь список тем – вы можете установить и другие. Для этого пролистайте в самый низ списка и выберите «Установить дополнительные цветовые темы…». После этого в левой части отобразится дополнительный блок с доступными цветовыми решениями.

Вот так мы можем изменить внешний вид программы. Теперь давайте перейдем к техническим моментам и рассмотрим работу наиболее важных плагинов.

Смотрите также: Лучшие плагины и темы для VS Code

Управление проектами

По умолчанию Visual Studio Code поддерживает работу с несколькими проектами, однако перемещаться между ними не очень удобно. Для удобства обычно используют плагин под названием Project Manager. С его помощью открывается возможность перемещения между рабочими областями всего в один клик. Установка проходит через магазин расширений, о котором мы говорили ранее. После того как менеджер проектов будет установлен, в левой панели управления появится новая вкладка для работы с плагином.

Теперь работа с проектами не должна вызывать никаких трудностей.

Автоформатирование кода

Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.

Рассмотрим, как форматируется код, написанный на JavaScript:

Возьмем для примера функцию, отступы в которой выстроены случайным образом.

Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».

Смотрим на код и видим, что он преобразился и принял аккуратный вид.

Аналогичным образом мы можем отформатировать код, написанный на других языках программирования. Для этого достаточно установить нужное расширение.

Автодополнение

В популярных программах, подобных Visual Studio, встроена функция автодополнения, помогающая завершить код. Например, вы пишите строчку кода, а среда подсказывает, как ее завершить. С помощью этой опции можно не только вспомнить нужную функцию, но и быстро написать код.

По умолчанию функция автодополнения в Visual Studio Code доступна только для некоторых языков. Для прочих языков программирования существуют дополнительные пакеты с окончанием «intellisense».

Посмотреть, какие пакеты доступны, вы можете в магазине плагинов.

Рекомендую установить PHP Intellisense, CSS Intellisense и Path Intellisense.

Управление Vim

Vim – это свободный текстовый редактор, работающий на основе vi. По умолчанию он установлен на каждой операционной системе семейства Unix. Кроме того, он доступен и в Visual Studio Code. Для работы с ним потребуется установить расширение с аналогичным названием:

Теперь мы можем перемещаться по файлу клавишами h, j, k, l, использовать Esc и сохранять файл командой :w.

Отладка кода

Для того чтобы запустить код в VS Code, нам нужно воспользоваться одним из расширений. Например, для JavaScript подойдет Debugger for Chrome. Узнать, какое расширение необходимо для конкретного языка, можно через «Выполнить» -> «Установить дополнительные отладчики…».

В результате в левой части окна будет отображен список доступных плагинов – найдите в нем подходящий для вас и следуйте инструкции.

После того как нужный плагин будет установлен, можно запускать отладку кода. Для этого достаточно открыть пункт «Выполнить» и нажать на кнопку «Запустить отладку». Также это можно сделать с помощью клавиши «F5».

С помощью плагинов мы можем отладить код, написанный на любом языке программирования.

Заключение

Сегодня мы разобрали функционал инструмента Visual Studio Code. Данная среда хороша не только для профессионалов, но и для новичков, изучающих основы программирования. Одно из преимуществ программы – это минимальное требование к железу: запустить программу можно практически на любом компьютере.

Надеюсь, что работа в VS Code больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!

Visual Studio Code: мощное руководство пользователя

Эта статья написана для начинающих пользователей, которые могут впервые использовать Visual Studio Code. VS Code, как известно, считается «легковесным» редактором кода. По сравнению с редакторами с полной интегрированной средой разработки (IDE), которые занимают гигабайты дискового пространства, VS Code использует менее 200 МБ при установке.

Несмотря на термин «легкий», Visual Studio Code предлагает огромное количество функций, которые продолжают расти и улучшаться с каждым новым обновлением. В этом руководстве мы рассмотрим наиболее популярные функции. У каждого программиста есть свой собственный набор инструментов, который они обновляют всякий раз, когда обнаруживаются новые рабочие процессы. Если вы хотите изучить каждый инструмент и функцию VS Code, ознакомьтесь с их официальной документацией. Кроме того, вы можете отслеживать обновления для новых и улучшенных функций.

Предпосылки

Чтобы следовать этому руководству, вы должны владеть хотя бы одним языком программирования и фреймворком. Вы также должны быть знакомы с системой контроля версией git. Вам также необходимо иметь учетную запись на платформе удаленного хранилища, такой как GitHub. Я рекомендую вам настроить SSH Keys для подключения к вашему удаленному репозиторию.

Мы будем использовать минимальный проект Next.js для демонстрации возможностей VS Code. Если вы новичок в этом, не беспокойтесь, так как фреймворк и используемый язык не являются предметом данного руководства. Преподаваемые здесь навыки можно перенести на любой язык и фреймворк, с которыми вы работаете.

Немного истории

Если вы новичок в программировании, я рекомендую вам начать с простого текстового редактора, такого как Windows NotePad. Это самый простой текстовый редактор, который не предлагает никакой помощи. Основным преимуществом его использования является то, что он заставляет вас запоминать синтаксис языка и делать свои собственные отступы. Как только вы освоитесь с написанием кода, следующим логическим шагом будет обновление до более качественного текстового редактора, такого как NotePad++ . Он предлагает немного важной помощи при кодировании с такими функциями, как раскраска синтаксиса, автоматическое отступление и базовое автозаполнение. При обучении программированию важно не перегружаться информацией и помощью.

Как только вы привыкли к лучшему опыту написания кода, пришло время обновиться. Не так давно это были полностью интегрированные среды разработки:

Visual Studio IDE
NetBeans
Eclipse
IntelliJ IDEA

Эти платформы обеспечивают полный рабочий процесс разработки, от написания кода до тестирования и развертывания. Они содержат множество полезных функций, таких как анализ кода и выделение ошибок. Они также содержат гораздо больше функций, которые многие разработчики не использовали, хотя они были необходимы для некоторых команд. В результате эти платформы заняли много места на диске и не запустились. Многие разработчики предпочитали использовать передовые текстовые редакторы, такие как emacs и vim, для написания своего кода.

Вскоре появился новый набор независимых от платформы редакторов кода. Они были легкими и обеспечивали множество функций, которые были в основном эксклюзивными для IDE. Я перечислил их ниже в порядке их выпуска:

Sublime Text: июль 2013
Atom.io: июнь 2015
Visual Studio Code: апрель 2016

Разработчики Mac имели доступ к TextMate, который был выпущен в октябре 2004 года. Система фрагментов кода, используемая всеми вышеперечисленными редакторами, была основана на TextMate. Воспользовавшись всеми из них, я почувствовал, что появившийся после этого редактор значительно улучшил текущий. Согласно опросу разработчиков, проведенному Stack OverFlow в 2019 году, Visual Studio Code является самой популярной средой разработки кода с 50,7% использования. Visual Studio IDE занимает второе место, а NotePad++ — третье.

Достаточно истории и статистики на данный момент. Давайте углубимся в то, как использовать функции кода Visual Studio.

Настройка и обновления

Установщик пакета кода Visual Studio занимает менее 100 МБ и потребляет менее 200 МБ при полной установке. Когда вы посещаете страницу загрузки, ваша ОС будет автоматически обнаружена, и будет выделена правильная ссылка для загрузки.

Обновление VS Code очень просто. Он отображает уведомление при каждом выпуске обновления. Пользователям Windows необходимо щелкнуть уведомление, чтобы загрузить и установить последнюю версию. Процесс загрузки происходит в фоновом режиме, пока вы работаете. Когда он будет готов к установке, появится запрос на перезагрузку. Нажав на это, вы установите обновление и перезапустите VS Code.

Для дистрибутивов на основе Ubuntu, нажав на уведомление об обновлении, вы просто откроете веб-сайт, на котором вы сможете загрузить последнюю версию установщика. Гораздо проще — просто выполните sudo apt update && sudo apt upgrade -y. Это обновит все установленные пакеты Linux, включая Visual Studio Code. Причина этого заключается в том, что VS Code добавил репо в реестр репозитория при первоначальной установке. Вы можете найти информацию о репо по этому пути: /etc/apt/sources.list.d/vscode.list.

Пользовательский интерфейс

Давайте сначала познакомимся с пользовательским интерфейсом:

Пользовательский интерфейс Visual Studio Code разделен на пять основных областей, которые вы можете легко настроить.

Activity Bar: позволяет переключаться между представлениями: проводник, поиск, контроль версий, отладка и расширения.
Side Bar: содержит активный вид.
Editor: здесь вы можете редактировать файлы и просматривать файлы уценки. Вы можете расположить несколько открытых файлов рядом.
Panel: отображает различные панели: встроенный терминал, панели вывода для отладочной информации, ошибок и предупреждений.
Status: отображает информацию о текущем открытом проекте и файле. Также содержит кнопки для выполнения действий по управлению версиями, а также для включения / отключения функций расширения.

Также есть верхняя строка меню, где вы можете получить доступ к системе меню редактора. Для пользователей Linux встроенным терминалом по умолчанию, вероятно, будет оболочка Bash. Для пользователей Windows это PowerShell. К счастью, внутри выпадающего списка терминала находится селектор оболочки, который позволит вам выбрать другую оболочку. Если установлено, вы можете выбрать любой из следующих:

Command Prompt
PowerShell
PowerShell Core
Git Bash
WSL Bash

Работа с проектами

В отличие от полноценных IDE, Visual Studio Code не обеспечивает создание проектов и не предлагает шаблоны проектов традиционным способом. Он просто работает с папками. На моей машине для разработки Linux я использую следующий шаблон папок для хранения и управления своими проектами:

/home/{username}/Projects/{company-name}/{repo-provider}/{project-name}

Папка Projects, что я имею в виду, как в рабочей области. Как внештатный автор и разработчик, я разделяю проекты на основе того, в какой компании я работаю, и какой репо я использую. Для личных проектов я храню их под своим вымышленным «названием компании». Для проектов, с которыми я экспериментирую в учебных целях и которые я не собираюсь долго хранить, я просто буду использовать имя, например play или tuts в качестве замены {repo-provider}.

Если вы хотите создать новый проект и открыть его в VS Code, вы можете использовать следующие шаги. Откройте терминал и выполните следующие команды:

$ mkdir vscode-demo
$ cd vscode-demo
# Launch Visual Studio Code
$ code .

Вы также можете сделать это в проводнике. При доступе к контекстному меню мыши вы сможете открыть любую папку в VS Code.

Если вы хотите создать новый проект, связанный с удаленным репо, проще создать его на сайте — например, GitHub или BitBucket.

Обратите внимание на все поля, которые были заполнены и выбраны. Далее перейдите в терминал и выполните следующее:

# Navigate to workspace/company/repo folder
$ cd Projects/sitepoint/github/

# Clone the project to your machine
$ git clone [email protected]:{insert-username-here}/vscode-nextjs-demo.git

# Open project in VS Code
$ cd vscode-nextjs-demo
$ code .

Как только редактор будет запущен, вы можете запустить встроенный терминал с помощью сочетания клавиш Ctrl+~ (тильда). Используйте следующие команды для генерации package.json и установки пакетов:

# Generate `package.json` file with default settings
$ npm init -y

# Install package dependencies
$ npm install next react react-dom

Затем откройте package.json и замените раздел scripts следующим:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Окно кода Visual Studio должно выглядеть следующим образом:

Прежде чем мы рассмотрим следующий раздел, я хотел бы упомянуть, что VS Code также поддерживает концепцию многокорневых рабочих пространств. Если вы работаете со связанными проектами — front-end, back-end, docs и т.д. — вы можете управлять ими в одном рабочем пространстве в одном редакторе. Это облегчит синхронизацию вашего исходного кода и документации.

Контроль версий с помощью Git

Visual Studio Code поставляется со встроенным менеджером контроля версий Git. Он предоставляет пользовательский интерфейс, где вы можете комментировать, фиксировать, создавать новые ветви и переключаться на существующие. Давайте передадим изменения, которые мы только что сделали в нашем проекте. На панели действий откройте панель управления источником и найдите кнопку «Stage All Changes plus», как показано ниже.

Нажмите здесь. Затем введите сообщение фиксации «Installed next.js dependencies», а затем нажмите кнопку Commit в верхней части. Имеет значок галочки. Это передаст новые изменения. Если вы посмотрите на статус, расположенный внизу, вы увидите различные значки статуса в левом углу. 0 ↓ означает, что из удаленного репозитория нечего вытаскивать. 1 ↑ означает, что у вас есть один коммит, который вам нужно отправить на удаленное репо. При нажатии на него отобразится подсказка о действии. Нажмите OK для pull и push. Это должно синхронизировать ваше локальное репо с удаленным репо.

Чтобы создать новую ветку или переключиться на существующую ветку, просто нажмите на название ветки master в строке состояния в левом нижнем углу. Это выведет филиальную панель для вас, чтобы принять меры.

Проверьте следующие расширения для еще лучшего опыта работы с Git:

Git Lens
Git History

Поддержка другого типа SCM, такого как SVN, может быть добавлена путем установки соответствующего расширения SCM с рынка.

Создание и запуск кода

На панели действий вернитесь к панели обозревателя и с помощью кнопки «New Folder» создайте папку pages в корне проекта. Выберите эту папку и используйте кнопку New File, чтобы создать файл pages/index.js. Скопируйте следующий код:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage;

На панели Explorer вы должны увидеть раздел «NPM Scripts» . Разверните это и наведите курсор мыши dev. Кнопку run (значок воспроизведение) появится рядом с ним. Нажмите на него, и он запустит сервер Dev.js внутри встроенного терминала.

Это должно занять несколько секунд. Используйте Ctrl + Click на URL http://localhost:3000, чтобы открыть его в браузере. Страница должна успешно открыться с сообщением «Welcome to Next.js!». В следующем разделе мы рассмотрим, как мы можем изменить настройки Visual Studio Code.

Настройки пользователя и рабочей области

Чтобы получить доступ к настройкам параметров VS Code, используйте сочетание клавиш Ctrl+,. Вы также можете получить к нему доступ через команду меню следующим образом:

В Windows / Linux — File > Preferences > Settings
В macOS — Code > Preferences > Settings

По умолчанию должен появиться графический интерфейс редактора настроек. Это помогает пользователям легко вносить изменения в настройки, поскольку доступны тысячи редактируемых настроек. Редактор настроек предоставляет пользователю понятные имена и описания, что делает каждый параметр. Кроме того, связанные параметры были сгруппированы вместе, и есть панель поиска для поиска определенного параметра.

При изменении настроек с помощью редактора обратите внимание на активную область сверху. Обратите внимание, что не все настройки можно настроить через графический интерфейс. Для этого вам нужно отредактировать файл напрямую settings.json. Прокручивая редактор настроек, вы увидите ярлык, который приведет вас к этому файлу.

Параметры кода Visual Studio подразделяются на две разные области:

Настройки пользователя: настройки хранятся под учетной записью пользователя. Они будут действовать на все проекты, над которыми вы работаете.
Рабочая область: настройки хранятся в папке проекта или рабочей области. Они будут применяться только в этом конкретном проекте.

В зависимости от вашей платформы вы можете найти пользовательские настройки VS Code в следующих местах:

Windows: %APPDATA%\Code\User\settings.json
macOS: $HOME/Library/Application Support/Code/User/settings.json
Linux: $HOME/.config/Code/User/settings.json

Для Workspace просто создайте папку .vscode в корне вашего проекта. Затем создайте файл settings.json внутри этой папки. Если вы работаете с панелью редактора настроек, она сделает это автоматически, когда вы измените настройки в области рабочего пространства. Вот подмножество глобальных настроек, с которыми я предпочитаю работать:

{
  "editor.minimap.enabled": false,
  "window.openFoldersInNewWindow": "on",
  "diffEditor.ignoreTrimWhitespace": false,
  "files.trimTrailingWhitespace": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "workbench.editor.enablePreview": false,
  "workbench.list.openMode": "doubleClick",
  "window.openFilesInNewWindow": "default",
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettierVS Code",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "explorer.confirmDelete": false
}

Я склонен работать с несколькими проектами одновременно, поэтому настройка window.openFoldersInNewWindow позволяет открывать новые папки проектов, не закрывая (не заменяя) активную. Для editor.defaultFormatter, я поставил Prettier, который является расширением. Далее давайте посмотрим на языковые ассоциации.

Ассоциация языков

Я делаю много проектов с использованием React. В последнее время большинство сред React генерируют компоненты .jsx, а не используют расширение .js. В результате форматирование и раскраска синтаксиса становится проблемой, когда вы начинаете писать код JSX. Чтобы это исправить, вам нужно связать .js файлы с JavaScriptReact. Вы можете легко сделать это, изменив языковой режим с помощью Ctrl + Shift + P в командной строке. Вы также можете обновить settings.json, добавив эту конфигурацию:

{
  "files.associations": {
    "*.js": "javascriptreact"
  }
}

В следующий раз, когда вы откроете файл JS, он будет рассматриваться как файл React JSX. Я указал это в своих глобальных настройках, так как я часто работаю с проектами React. К сожалению, это нарушает встроенную функцию под названием Emmet. Это популярный плагин, который помогает разработчикам автоматически заполнять HTML и CSS код очень интуитивно понятным способом. Вы можете исправить эту проблему, добавив следующую конфигурацию в settings.json:

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

В следующий раз, когда у вас возникнут проблемы с активацией Emmet для определенного расширения файла или языка, проверьте, можно ли решить эту проблему, добавив языковую ассоциацию в emmet.includeLanguages. Для получения дополнительной информации ознакомьтесь с официальной документацией для VS Code Emmet .

Горячие клавиши

До сих пор мы рассмотрели два сочетания клавиш:

Ctrl + ,: Открыть настройки
Ctrl + Shift + P: Открыть командную строку

Command Palette обеспечивает доступ ко всем функциям Visual Studio Code, включая сочетание клавиш для общих операций. Если вы устанавливаете расширение, любые действия, инициируемые вручную, будут перечислены здесь. Однако для таких расширений, как Prettier и Beautify, они будут использовать одну и ту же команду Format. Visual Studio Code также имеет свой собственный встроенный модуль форматирования. Чтобы указать, какой плагин должен выполнять действие, вам нужно перейти в редактор настроек и изменить конфигурацию стандартного форматера. Вот пример того, как я установил это в моем случае:

{
  "editor.defaultFormatter": "esbenp.prettierVS Code"
}

Вы также можете указать другой форматер для конкретного языкового режима. Вот еще несколько сочетаний клавиш, которые необходимо запомнить:

Ctrl + P позволит вам перейти к любому файлу или символу, набрав его имя
Ctrl + Tab проведет вас по последнему набору открытых файлов
Ctrl + Shift + O позволит вам перейти к определенному символу в файле
Ctrl + G позволит вам перейти к определенной строке в файле

Вот мои любимые команды, которые я часто использую при написании кода:

Ctrl + D: нажмите несколько раз, чтобы выбрать одинаковые ключевые слова. Когда вы начинаете печатать, он переименовывает все выбранные ключевые слова
Ctrl + Shift + Up/Down: Добавить курсор выше или ниже, чтобы редактировать несколько строк одновременно
Alt + Shift + Click: Добавить курсор в нескольких местах для одновременного редактирования в разных разделах кода
Ctrl + J: Добавить 2 или более строк в одну.
Ctrl + F: Поиск ключевого слова в текущем файле
Ctrl + H: Поиск и замена в текущем файле
Ctrl + Shift + F: Поиск по всем файлам

Если вы зайдете в меню параметров, вы найдете горячие клавиши для большинства команд. Лично я никогда не привык к некоторым сочетаниям клавиш по умолчанию, которые поставляются с Visual Studio Code из-за использования таких редакторов, как Atom, в течение длительного времени. Решением, которое я нашел, было просто установить Atom Keymap. Это позволяет мне использовать сочетание клавиш Ctrl + \ для переключения боковой панели. Если вы хотите отредактировать привязки клавиатуры самостоятельно, просто перейдите в меню File > Preferences > Keyboard Shortcuts. (Code > Preferences > Keyboard Shortcuts в macOS).

Возможности редактора кода

В этом разделе мы быстро рассмотрим различные удобные для разработчика функции, которые предоставляет Visual Studio Code, чтобы помочь вам писать более быстрый и более понятный код.

Intellisense

Это популярная функция, также известная как «автозавершение кода» или автозаполнение. VS Code «из коробки» предоставляет Intellisense для:

JavaScript, TypeScript
HTML
CSS, SCSS и Less

При вводе кода появится всплывающее окно со списком возможных вариантов. Чем больше вы печатаете, тем короче список. Вы можете нажать Enter или, Tab когда нужное ключевое слово будет выделено, для автозаполнения кода. Нажатие Esc удалит всплывающее окно. Вставка . в конце ключевого слова или нажатие Ctrl + Space приведет к появлению всплывающего окна IntelliSense.

Если вы работаете с языком, который не поддерживается сразу после установки, вы можете установить языковое расширение из marketplace, чтобы активировать IntelliSense для нужного языка программирования.

Снипеты

Ввод повторяющегося кода, такого как операторы if, циклы for и объявление компонентов, может быть немного утомительным. Вы можете копировать и вставлять код, чтобы работать быстрее. К счастью, Visual Studio Code предлагает функцию Snippets, которая называется просто шаблонами кода. Например, вместо ввода console.log просто введите log, и IntelliSense предложит вам вставить фрагмент.

Есть много фрагментов, к которым вы можете получить доступ, если вы запомнили сокращение или ключевое слово, которое вызывает вставку фрагмента. Поскольку вы новичок в этом, вы можете получить доступ к списку всех фрагментов, доступных через Command Palette > Insert Snippets:

Прокрутите вверх и вниз, чтобы просмотреть весь список. Обратите внимание, что большинство фрагментов имеют табуляции, которые позволяют заменять соответствующие разделы кода при их вставке. Вы можете найти больше расширений фрагментов в marketplace. Вы также можете создать свой собственный.

Форматирование

Часто при наборе или вставке кода из разных источников мы склонны смешивать стили кодирования. Например:

отступ с пробелом против табов
точка с запятой
двойные кавычки или одинарные кавычки

Форматирование важно, так как делает код читаемым. Однако это может занять много времени, когда вы сталкиваетесь с большими разделами неформатированного кода. К счастью, Visual Studio Code может выполнить форматирование для вас с помощью одной команды. Вы можете выполнить команду форматирования через палитру команд. Visual Studio Code поддерживает форматирование для следующих языков из коробки:

JavaScript
TypeScript
JSON
HTML

Вы можете настроить форматирование кода Visual Studio, изменив следующие параметры на true или false:

editor.formatOnType: отформатировать строку после ввода
editor.formatOnSave: отформатировать файл при сохранении
editor.formatOnPaste: форматировать вставленный контент

Однако встроенные средства форматирования могут не соответствовать вашему стилю кодирования. Если вы работаете с такими фреймворками, как React, Vue или Angular, вы обнаружите, что встроенные средства форматирования имеют тенденцию портить ваш код. Вы можете исправить это, отключив форматирование для определенного языка:

"html.format.enable": false

Тем не менее, лучшее решение — установить расширение для форматирования. Мой любимый — Prettier, поскольку он поддерживает огромное количество языков, включая:

Flow · JSX · JSON
CSS · SCSS · Less
Vue · Angular
GraphQL · Markdown · YAML

После установки вам нужно установить его как форматировщик по умолчанию:

{
  "editor.defaultFormatter": "esbenp.prettierVS Code",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettierVS Code"
  }
}

Также рекомендуется установить пакет prettier локально как зависимость dev:

npm install prettier -D --save-exact

Параметры форматирования по умолчанию, которые применяет Prettier, могут работать для вас. Если нет, вы можете выполнить настройку, создав файл конфигурации .prettierrc в корне вашего проекта или в вашем домашнем каталоге. Вы можете разместить свои собственные правила форматирования здесь. Вот пример:

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

Linting

Lint или ЛИНТЕР является инструментом, который анализирует код и проверяет на наличие синтаксических ошибок, проблем стилизации, вызовы на необъявленных переменных, использование устаревших функций, неправильного охвата и многие другие вопросы. Visual Studio Code не поставляется вместе с Linter. Тем не менее, это облегчает настройку для используемого вами языка программирования. Например, если вы работаете над новым проектом Python, вы получите приглашение установить его для вас. Вы также можете открыть панель команд (Ctrl+ Shift+ P) и выбрать команду Python: Select Linter.

Для JavaScript вам нужно установить расширение, такое как ESLint, которое является самым популярным. Это расширение требует, чтобы вы установили ESLint как dev-зависимость. Вам также может понадобиться один или несколько плагинов ESLint, которые помогут вам подобрать стиль и структуру кодирования, которые вы используете.

После того, как вы настроите инструмент linting, VS Code будет автоматически проверять ваш код каждый раз, когда вы сохраняете файл. Вам также следует обновить ваши сценарии package.json, чтобы включить команду для запуска инструмента lint.

Отладка

Если вы используете операторы print для отладки, вы должны прекратить это делать, поскольку есть лучший способ отладки вашего кода. С VS Code вы можете устанавливать точки останова и проверять переменные во время работы вашего кода.

Каким образом в Visual Studio Code запускать код из глобального каталога. | by Emil Garipov

Наверное многие сталкивались с тем, что при запуске кода, в терминале Visual Studio Code нужно прописывать весь путь до директории, где находится код. Иначе он просто не запуститься и выдаст ошибку:

Рис 1. Ошибка при запуске кода из глобальной директории

К примеру, я хочу запустить файл

access_template.py

Он находится в директории 05_basic_examples

Рис 2. Путь к файлу

Для этого в терминале Visual Studio Code я перехожу в директорию, в которой находится код. И только потом запускаю скрипт.

Рис 3.Путь к папке

Здесь возникают две сложности.

Во-первых, что если таких директорий много? Получается для того, чтобы запустить скрипт надо каждый раз переходить в нужную директорию, что не совсем удобно.

Рис 4. Количество директорий

Во-вторых, в самом териминале это выглядит не очень удобно. Слишком длинная строка не очень читабельна, по крайней мере для меня.

Рис 5. Не удобно

Есть ли возможность исправить данное положение? Да, такой способ есть. Пояснение, как это сделать я взял из следующей статьи:

Настройка файла settings.json

Для этого надо будет прописать по одной строке в конфигурационных файлах settings.json, который находится в папке vscode вашего рабочего пространства Visual Studio Code. Мое рабочее пространство называется PyNEng:

Рис 6. Workspace

Файл settings.json выглядит:

{"python.pythonPath": ".pyneng\\Scripts\\python.exe",
"terminal.integrated.env.windows": 
{
"PYTHONPATH": "${env:PYTHONPATH};${workspaceFolder}/pyneng-online-9-may-aug-2020",
}
}

В файле видны две настройки, это python.pythonPath — путь к исполняему файлу Python. Так как исполняемый код может находиться в любом каталоге вашей системы, нужно указать путь откуда именно будет этот код запускаться. Так как я использую виртуальное окружение .pyneng, то я указал, чтобы исполняемый код Python запускался из директории виртуального окружения:

"python.pythonPath": ".pyneng\\Scripts\\python.exe"

Вторая настройка это как у нас будет запускаться терминал. Visual Studio Code использует встроенный терминал операционной системы для запуска исполняемого кода Python. И по-умолчанию Python запускает код, непосредственно из папки, в которой этот код прописан. Но как я и писал выше это не особо удобно.

Для того, чтобы Python запускал код из глобального каталога и каталого более высокого уровня, т.е. не заходить постоянно в каждую папку и оттуда запускать код, нам нужно настроить Python на поиск модулей в каталоге глобального уровня. Для этого мы изменяем путь поиска кода по умолчанию. В моем случае глобальный каталог, в котором находятся папки и подпапки с кодом это “pyneng-online-9-may-aug-2020”

"terminal.integrated.env.windows": 
{
"PYTHONPATH": "${env:PYTHONPATH};${workspaceFolder}/pyneng-online-9-may-aug-2020",
}

Настройка конфигурационного файла виртуального окружения

После того, как мы прописали нужные нам строки в файле setting.json, нам нужно еще добавь строку в конфигурационный файл pyvenv.cfg виртуального окружения .pyneng

Рис 7. Путь к файлу pyvenv.cfg

Сам файл выглядит так:

home = C:\Users\emilg\AppData\Local\Programs\Python\Python38-32include-system-site-packages = falseversion = 3.8.5PYTHONPATH=./pyneng-online-9-may-aug-2020

Три верхние строки будут идти у вас по умолчанию, а 4-ю строку вам нужно будет прописать вручную:

PYTHONPATH=./pyneng-online-9-may-aug-2020

В этой строке также указывается путь глобального каталога откуда у вас будет запускаться код.

После того, как вы пропишете нужные строки, вам уже не нужно будет каждый раз заходить в папку и запускать оттуда код. Вы сможете это делать из глобальго каталога.

Для того, чтобы изменения применились вам нужно будет закрыть и заново открыть Visual Studio Code

Теперь, находясь в глобально каталоге в терминале мы можем запустить любой код из папок нижнего уровня:

Подписывайтесь на канал — https://t.me/automate_net.

Запуск кода Visual Studio на macOS

Установка

Загрузите код Visual Studio для macOS.
Откройте список загрузок браузера и найдите загруженный архив.
Выберите значок «увеличительное стекло», чтобы открыть архив в Finder.
Перетащите Visual Studio Code.app в папку Applications , сделав его доступным на панели запуска macOS.
Добавьте код VS в свою док-станцию, щелкнув правой кнопкой мыши значок, чтобы вызвать контекстное меню, и выбрав Options , Keep in Dock .

Запуск из командной строки

Вы также можете запустить VS Code из терминала, набрав «код» после добавления его в путь:

Запустить VS Code.
Откройте палитру команд (Cmd + Shift + P) и введите команду оболочки, чтобы найти команду оболочки : установить команду кода в команде PATH .

Перезапустите терминал, чтобы новое значение $ PATH вступило в силу. Вы сможете ввести код.’в любой папке, чтобы начать редактирование файлов в этой папке.

Примечание: Если у вас все еще есть старый псевдоним code в вашем .bash_profile (или эквивалентном) из ранней версии VS Code, удалите его и замените, выполнив команду оболочки : установить команду ‘code’ в Команда PATH .

Альтернативные инструкции по эксплуатации

Вместо того, чтобы запускать приведенную выше команду, вы можете вручную добавить VS Code в свой путь,
для этого выполните следующие команды:

  cat << EOF >> ~ /.bash_profile
# Добавить код Visual Studio (код)
экспорт PATH = "\ $ PATH: / Applications / Visual Studio Code.app/Contents/Resources/app/bin"
EOF

Запустите новый терминал, чтобы принять изменения .bash_profile .

Примечание : Начальная косая черта \ требуется для предотвращения расширения $ PATH во время конкатенации. Удалите начальную косую черту, если вы хотите запустить команду экспорта непосредственно в терминале.

Примечание : Поскольку zsh стала оболочкой по умолчанию в macOS Catalina, выполните следующие команды, чтобы добавить VS Code в свой путь:

  cat << EOF >> ~ /.zprofile
# Добавить код Visual Studio (код)
экспорт PATH = "\ $ PATH: / Applications / Visual Studio Code.app/Contents/Resources/app/bin"
EOF

Поддержка сенсорной панели

Из коробки VS Code добавляет действия для навигации по истории редактора, а также полную панель инструментов отладки для управления отладчиком на сенсорной панели:

Защита конфиденциальности Mojave

После обновления до версии macOS Mojave вы можете увидеть диалоговые окна с сообщением «Visual Studio Code хочет получить доступ к вашему {календарю / контактам / фотографиям}.»Это связано с новыми средствами защиты конфиденциальности в Mojave и не относится к VS Code. Те же диалоги могут отображаться и при запуске других приложений. Диалог отображается один раз для каждого типа личных данных, и можно выбрать Не разрешайте , поскольку VS Code не требует доступа к этим папкам. Вы можете прочитать более подробное объяснение в этом сообщении блога.

Обновления

VS Code поставляет ежемесячные выпуски и поддерживает автоматическое обновление, когда появляется новый выпуск.Если вам будет предложено VS Code, примите последнее обновление, и оно будет установлено (вам не нужно будет ничего делать, чтобы получить последние версии).

Примечание. Вы можете отключить автоматическое обновление, если предпочитаете обновлять VS Code по своему собственному расписанию.

Вы можете настроить VS Code с помощью параметров, цветовых тем и пользовательских сочетаний клавиш, доступных в группе меню Code > Preferences .

Вы можете увидеть упоминание о File > Preferences в документации, которая является расположением группы меню Preferences в Windows и Linux.В macOS группа меню Preferences находится под кодом Code , а не File .

Следующие шаги

После установки VS Code эти темы помогут вам узнать больше о VS Code:

Общие вопросы

Почему я вижу «Visual Studio Code запрашивает доступ к вашему календарю».

Если вы используете версию macOS Mojave, вы можете увидеть диалоговые окна с сообщением «Visual Studio Code хочет получить доступ к вашему {календарю / контактам / фотографиям}.»Это связано с новыми средствами защиты конфиденциальности в Mojave, о которых говорилось выше. Можно выбрать Не разрешать , поскольку VS Code не требует доступа к этим папкам.

Код

VS не обновляет

Если VS Code не обновляется после перезапуска, возможно, он помещен в карантин в macOS. Для решения этой проблемы выполните действия, описанные в этой проблеме.

Работает ли VS Code на компьютерах Mac M1?

Да, VS Code поддерживает сборки macOS ARM64, которые могут работать на компьютерах Mac с чипом Apple M1.Вы можете установить универсальную сборку, которая включает сборки Intel и Apple Silicon, или одну из сборок для конкретной платформы.

31.03.2021

Учебное пособие по началу работы для Python в Visual Studio Code

В этом руководстве вы используете Python 3 для создания простейшего приложения Python «Hello World» в Visual Studio Code. Используя расширение Python, вы превращаете VS Code в отличную легкую среду разработки Python (которая может оказаться продуктивной альтернативой PyCharm).

Это руководство знакомит вас с VS Code как средой Python, в первую очередь, как редактировать, запускать и отлаживать код с помощью следующих задач:

Написать, запустить и отладить приложение Python «Hello World»
Узнайте, как устанавливать пакеты, создавая виртуальные среды Python
Напишите простой скрипт Python для построения фигур в VS Code

Это руководство не предназначено для изучения самого Python. Когда вы познакомитесь с основами VS Code, вы сможете следовать любому из руководств по программированию на Python.org в контексте VS Code для знакомства с языком.

Если у вас есть какие-либо проблемы, не стесняйтесь сообщать о проблеме для этого руководства в репозиторий документации VS Code.

Предварительные требования

Для успешного завершения этого руководства вам необходимо сначала настроить среду разработки Python. В частности, для этого урока требуется:

VS Код
Расширение VS Code Python
Python 3

Установите код Visual Studio и расширение Python

Установите VS Code, если вы еще этого не сделали.
Затем установите расширение Python для VS Code из Visual Studio Marketplace. Для получения дополнительных сведений об установке расширений см. Extension Marketplace. Расширение Python называется Python и опубликовано Microsoft.

Установить интерпретатор Python

Вместе с расширением Python вам необходимо установить интерпретатор Python. Какой интерпретатор вы используете, зависит от ваших конкретных потребностей, но некоторые рекомендации приведены ниже.

Окна

Установите Python с python.org. Обычно вы можете использовать кнопку Download Python , которая появляется первой на странице, чтобы загрузить последнюю версию.

Примечание : Если у вас нет прав администратора, дополнительным вариантом установки Python в Windows является использование Microsoft Store. Microsoft Store предоставляет установки Python 3.7, Python 3.8 и Python 3.9. Имейте в виду, что при использовании этого метода у вас могут возникнуть проблемы с совместимостью с некоторыми пакетами.

Для получения дополнительной информации об использовании Python в Windows см. Использование Python в Windows на Python.org

macOS

Системная установка Python на macOS не поддерживается. Вместо этого рекомендуется установка через Homebrew. Чтобы установить Python с помощью Homebrew в macOS, используйте brew install python3 в командной строке терминала.

Примечание В macOS убедитесь, что расположение установки VS Code включено в переменную среды PATH.См. Эти инструкции по установке для получения дополнительной информации.

Linux

Встроенная установка Python 3 в Linux работает хорошо, но для установки других пакетов Python необходимо установить pip с помощью get-pip.py.

Другие опции

Наука о данных : Если ваша основная цель использования Python — Наука о данных, вы можете подумать о загрузке с Anaconda. Anaconda предоставляет не только интерпретатор Python, но и множество полезных библиотек и инструментов для анализа данных.
Подсистема Windows для Linux : Если вы работаете в Windows и вам нужна среда Linux для работы с Python, вам подойдет подсистема Windows для Linux (WSL). Если вы выберете этот вариант, вы также захотите установить расширение Remote — WSL. Для получения дополнительной информации об использовании WSL с VS Code см. Раздел «Удаленная разработка VS Code» или попробуйте учебник «Работа в WSL», который проведет вас через настройку WSL, установку Python и создание приложения Hello World, работающего в WSL.

Проверьте установку Python

Чтобы убедиться, что вы успешно установили Python на свой компьютер, выполните одну из следующих команд (в зависимости от вашей операционной системы):

Если установка прошла успешно, в окне вывода должна отображаться версия Python, которую вы установили.

Примечание Вы можете использовать команду py -0 в интегрированном терминале VS Code для просмотра версий python, установленных на вашем компьютере.Интерпретатор по умолчанию обозначен звездочкой (*).

Запустить VS Code в папке проекта (рабочей области)

Используя командную строку или терминал, создайте пустую папку с именем «hello», перейдите в нее и откройте VS Code ( код ) в этой папке (. ), введя следующие команды:

  mkdir привет
cd привет
код.

Примечание : Если вы используете дистрибутив Anaconda, обязательно используйте командную строку Anaconda.

При запуске VS Code в папке эта папка становится вашим «рабочим пространством». VS Code хранит настройки, специфичные для этой рабочей области, в .vscode / settings.json , которые отделены от пользовательских настроек, которые хранятся глобально.

Кроме того, вы можете запустить VS Code через пользовательский интерфейс операционной системы, а затем использовать File> Open Folder , чтобы открыть папку проекта.

Выберите интерпретатор Python

Python — это интерпретируемый язык, и для запуска кода Python и получения Python IntelliSense вы должны указать VS Code, какой интерпретатор использовать.

В VS Code выберите интерпретатор Python 3, открыв палитру команд (⇧⌘P (Windows, Linux Ctrl + Shift + P)), начните вводить Python: выберите команду Interpreter для поиска, затем выберите команда. Вы также можете использовать опцию Выбрать среду Python в строке состояния, если она доступна (она может уже отображать выбранный интерпретатор):

Команда представляет список доступных интерпретаторов, которые VS Code может найти автоматически, включая виртуальные среды.Если вы не видите нужный интерпретатор, см. Настройка сред Python.

Примечание : При использовании дистрибутива Anaconda правильный интерпретатор должен иметь суффикс ('base': conda) , например Python 3.7.3 64-bit ('base': conda) .

Выбор интерпретатора устанавливает значение python.pythonPath в настройках вашей рабочей области на путь интерпретатора. Чтобы увидеть настройки, выберите Файл > Настройки > Настройки ( Код > Настройки > Настройки в macOS), затем выберите вкладку Настройки рабочего пространства .

Примечание : если вы выбираете интерпретатор без открытой папки рабочей области, VS Code вместо этого устанавливает python.pythonPath в ваших пользовательских настройках, что устанавливает интерпретатор по умолчанию для VS Code в целом. Пользовательская настройка гарантирует, что у вас всегда будет интерпретатор по умолчанию для проектов Python. Настройки рабочего пространства позволяют вам переопределить пользовательские настройки.

Создайте файл исходного кода Python Hello World

На панели инструментов проводника нажмите кнопку New File в папке hello :

Назовите файл hello.py , и он автоматически откроется в редакторе:

Используя расширение файла .py , вы указываете VS Code интерпретировать этот файл как программу Python, чтобы он оценивал содержимое с расширением Python и выбранным интерпретатором.

Примечание : Панель инструментов проводника также позволяет создавать папки в рабочем пространстве для лучшей организации кода. Вы можете использовать кнопку Новая папка , чтобы быстро создать папку.

Теперь, когда у вас есть файл кода в рабочей области, введите следующий исходный код в hello.py :

  msg = "Hello World"
печать (сообщение)

Когда вы начнете вводить , напечатайте , обратите внимание, как IntelliSense представляет параметры автозаполнения.

IntelliSense и автозаполнение работают для стандартных модулей Python, а также для других пакетов, которые вы установили в среду выбранного интерпретатора Python.Он также предоставляет дополнения для методов, доступных для типов объектов. Например, поскольку переменная msg содержит строку, IntelliSense предоставляет строковые методы при вводе msg. :

Не стесняйтесь поэкспериментировать с IntelliSense еще немного, но затем отмените свои изменения, чтобы у вас была только переменная msg и вызов print , и сохраните файл (⌘S (Windows, Linux Ctrl + S)).

Для получения полной информации о редактировании, форматировании и рефакторинге см. Редактирование кода.Расширение Python также полностью поддерживает Linting.

Запустите Hello World

hello.py запустить с Python просто. Просто нажмите кнопку «Запустить файл Python в терминале » в правом верхнем углу редактора.

Кнопка открывает панель терминала, на которой автоматически активируется ваш интерпретатор Python, затем запускается python3 hello.py (macOS / Linux) или python hello.py (Windows):

Есть три других способа запустить код Python в VS Code:

Щелкните правой кнопкой мыши в любом месте окна редактора и выберите Запустить файл Python в терминале (который сохраняет файл автоматически):
Выберите одну или несколько строк, затем нажмите Shift + Enter или щелкните правой кнопкой мыши и выберите Run Selection / Line в Python Terminal .Эта команда удобна для тестирования только части файла.
В палитре команд (⇧⌘P (Windows, Linux Ctrl + Shift + P)) выберите команду Python: Start REPL , чтобы открыть терминал REPL для текущего выбранного интерпретатора Python. Затем в REPL вы можете вводить и запускать строки кода по одной за раз.

Настроить и запустить отладчик

Давайте теперь попробуем отладить нашу простую программу Hello World.

Сначала установите точку останова в строке 2 файла hello.py , поместив курсор на вызов print и нажав F9. Либо просто щелкните в левом поле редактора рядом с номерами строк. Когда вы устанавливаете точку останова, в желобе появляется красный кружок.

Затем, чтобы инициализировать отладчик, нажмите F5. Поскольку вы впервые отлаживаете этот файл, из палитры команд откроется меню конфигурации, позволяющее выбрать тип конфигурации отладки, которую вы хотите использовать для открытого файла.

Примечание : VS Code использует файлы JSON для всех своих различных конфигураций; launch.json — стандартное имя файла, содержащего конфигурации отладки.

Эти различные конфигурации полностью объяснены в разделе «Конфигурации отладки»; а пока просто выберите Python File , это конфигурация, которая запускает текущий файл, показанный в редакторе, с использованием текущего выбранного интерпретатора Python.

Отладчик остановится на первой строке точки останова файла.Текущая строка обозначается желтой стрелкой в левом поле. Если вы изучите окно Local переменных на этом этапе, вы увидите, что теперь определенная переменная msg отображается на панели Local .

Вверху появляется панель инструментов отладки со следующими командами слева направо: продолжить (F5), перейти (F10), перейти в (F11), выйти (⇧F11 (Windows, Linux Shift + F11)), перезапустить (⇧⌘F5 (Windows, Linux Ctrl + Shift + F5)) и стоп (⇧F5 (Windows, Linux Shift + F5)).

Строка состояния также меняет цвет (оранжевый во многих темах), чтобы указать, что вы находитесь в режиме отладки. Консоль отладки Python также автоматически появляется в нижней правой панели, чтобы показать выполняемые команды вместе с выводом программы.

Чтобы продолжить выполнение программы, выберите команду «Продолжить» на панели инструментов отладки (F5). Отладчик доводит программу до конца.

Совет Отладочную информацию также можно увидеть, наведя курсор на код, например переменные.В случае msg при наведении курсора на переменную отобразится строка Hello world в поле над переменной.

Вы также можете работать с переменными в консоли отладки (если вы ее не видите, выберите Debug Console в правом нижнем углу VS Code или выберите ее в меню … .) Затем попробуйте ввести следующие строки, одну за другой, в приглашении > в нижней части консоли:

  сообщение
сообщениекапитализировать ()
msg.split ()

Снова выберите синюю кнопку Продолжить на панели инструментов (или нажмите F5), чтобы запустить программу до завершения. «Hello World» появляется в консоли Python Debug Console , если вы снова переключаетесь на нее, а VS Code выходит из режима отладки после завершения программы.

Если вы перезапустите отладчик, отладчик снова остановится на первой точке останова.

Чтобы остановить выполнение программы до ее завершения, используйте кнопку остановки с красным квадратом на панели инструментов отладки (⇧F5 (Windows, Linux Shift + F5)) или используйте команду меню Выполнить> Остановить отладку .

Подробные сведения см. В разделе «Конфигурации отладки», который включает примечания о том, как использовать определенный интерпретатор Python для отладки.

Совет: используйте точки записи вместо операторов печати. : Разработчики часто засоряют исходный код операторами print , чтобы быстро проверить переменные, не проходя через каждую строку кода в отладчике. В VS Code вместо этого можно использовать Logpoints . Точка журнала похожа на точку останова, за исключением того, что она записывает сообщение в консоль и не останавливает программу.Дополнительные сведения см. В разделе «Точки журнала» в основной статье об отладке VS Code.

Установить и использовать пакеты

Давайте теперь рассмотрим более интересный пример. В Python с помощью пакетов можно получить любое количество полезных библиотек кода, обычно из PyPI. В этом примере вы используете пакеты matplotlib и numpy для создания графического графика, как это обычно делается в науке о данных. (Обратите внимание, что matplotlib не может отображать графики при работе в подсистеме Windows для Linux, поскольку в нем отсутствует необходимая поддержка пользовательского интерфейса.)

Вернитесь в представление Explorer (самый верхний значок слева, который показывает файлы), создайте новый файл с именем standardplot.py и вставьте следующий исходный код:

  import matplotlib.pyplot as plt
импортировать numpy как np

x = np.linspace (0, 20, 100) # Создать список равномерно распределенных чисел в диапазоне
plt.plot (x, np.sin (x)) # Постройте синус каждой точки x
plt.show () # Отобразить график

Совет : Если вы введете приведенный выше код вручную, вы можете обнаружить, что при автозаполнении имена после меняются на ключевые слова , когда вы нажимаете Enter в конце строки.Чтобы этого избежать, введите пробел и нажмите Enter.

Затем попробуйте запустить файл в отладчике, используя конфигурацию «Python: текущий файл», как описано в последнем разделе.

Если вы не используете дистрибутив Anaconda или ранее не установили пакет matplotlib , вы должны увидеть сообщение «ModuleNotFoundError: Нет модуля с именем ‘matplotlib’» . Такое сообщение означает, что требуемый пакет недоступен в вашей системе.

Чтобы установить пакет matplotlib (который также устанавливает numpy в качестве зависимости), остановите отладчик и используйте палитру команд для запуска Terminal: Create New Integrated Terminal (⌃⇧` (Windows, Linux Ctrl + Shift + ` )).Эта команда открывает командную строку для выбранного интерпретатора.

Лучшая практика разработчиков Python — избегать установки пакетов в глобальную среду интерпретатора. Вместо этого вы используете специфичную для проекта виртуальную среду , которая содержит копию глобального интерпретатора. После активации этой среды все устанавливаемые вами пакеты будут изолированы от других сред. Такая изоляция снижает многие сложности, которые могут возникнуть из-за конфликтующих версий пакетов.Чтобы создать виртуальную среду и установить необходимые пакеты, введите следующие команды, соответствующие вашей операционной системе:

Примечание : Для получения дополнительной информации о виртуальных средах см. Среды.

Создать и активировать виртуальную среду
Примечание : Когда вы создаете новую виртуальную среду, VS Code должен предложить вам установить ее по умолчанию для папки вашей рабочей области.Если этот параметр выбран, среда будет автоматически активирована при открытии нового терминала.
для Windows
```
  py -3 -m venv .venv
.venv \ scripts \ активировать  
```
Если команда активации генерирует сообщение «Activate.ps1 не имеет цифровой подписи. Вы не можете запустить этот сценарий на
текущая система. «, то вам необходимо временно изменить политику выполнения PowerShell, чтобы разрешить скриптам
запустить (см. О политиках выполнения в документации PowerShell):
```
  Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process  
```
для macOS / Linux
```
  python3 -m venv.Venv
источник .venv / bin / активировать  
```
Выберите новую среду с помощью команды Python: выберите интерпретатор из палитры команд .

Установить пакеты

  # Не используйте с дистрибутивами Anaconda, потому что они уже включают matplotlib.

# macOS
python3 -m pip install matplotlib

# Windows (может потребоваться повышение прав)
python -m pip установить matplotlib

# Linux (Debian)
apt-get установить python3-tk
python3 -m pip install matplotlib

Перезапустите программу сейчас (с отладчиком или без него), и через несколько секунд появится окно графика с выводом:
Когда вы закончите, введите deactivate в окне терминала, чтобы деактивировать виртуальную среду.

Дополнительные примеры создания и активации виртуальной среды и установки пакетов см. В учебнике Django и руководстве по Flask.

Следующие шаги

Вы можете настроить VS Code для использования любой установленной среды Python, включая виртуальную среду и среду conda. Вы также можете использовать отдельную среду для отладки. Для получения полной информации см. Среды.

Чтобы узнать больше о языке Python, следуйте любому из руководств по программированию, перечисленных на python.org в контексте VS Code.

Чтобы научиться создавать веб-приложения с помощью фреймворков Django и Flask, см. Следующие руководства:

В Visual Studio есть еще много чего для изучения с Python. Код:

18.07.2019

Запуск кода Visual Studio в Windows

Установка

Загрузите установщик Visual Studio Code для Windows.
После загрузки запустите установщик (VSCodeUserSetup- {версия}.EXE). Это займет всего минуту.
По умолчанию VS Code устанавливается в папку C: \ users \ {username} \ AppData \ Local \ Programs \ Microsoft VS Code .

Кроме того, вы также можете загрузить Zip-архив, распаковать его и запустить код оттуда.

Примечание. Для VS Code требуется .NET Framework 4.5.2 или выше. Если вы используете Windows 7, убедитесь, что у вас установлена как минимум .NET Framework 4.5.2. Вы можете проверить свою версию.NET Framework с помощью этой команды, reg запросит "HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ NET Framework Setup \ NDP \ v4 \ full" / v версии из командной строки.

Совет. Программа установки добавит код Visual Studio в ваш % PATH% , поэтому с консоли вы можете ввести «код». чтобы открыть VS Code в этой папке. Вам потребуется перезапустить консоль после установки, чтобы изменения в переменной окружения % PATH% вступили в силу.

Настройка пользователя и системы

VS Code предоставляет настройки как на уровне пользователя, так и на системном уровне Windows. Для установки пользовательской настройки не требуются права администратора, поскольку она будет находиться в папке локальных данных приложения пользователя (LOCALAPPDATA). Пользовательская настройка также обеспечивает более плавное обновление в фоновом режиме.

Для установки системы требуется повышение прав администратора, установка будет помещена в папку Program Files.

Полный список доступных вариантов установки см. На странице «Загрузка кода Visual Studio».

32-битные версии

Если вам нужно запустить 32-битную версию VS Code, доступны как 32-битный установщик, так и Zip-архив.

Обновления

VS Code поставляет ежемесячные выпуски и поддерживает автоматическое обновление, когда появляется новый выпуск. Если вам будет предложено VS Code, примите самое последнее обновление, и оно будет установлено (вам не нужно будет ничего делать, чтобы получить последние версии).

Примечание. Вы можете отключить автоматическое обновление, если предпочитаете обновлять VS Code по своему собственному расписанию.

Подсистема Windows для Linux

Windows — популярная операционная система, которая может стать отличной кроссплатформенной средой разработки. В этом разделе описываются кроссплатформенные функции, такие как подсистема Windows для Linux (WSL) и новый терминал Windows.

Последняя сборка Windows

Убедитесь, что вы используете последнюю сборку Windows 10. Проверьте настройки > Центр обновления Windows , чтобы узнать, обновлены ли вы.

Windows как машина разработчика

С помощью WSL вы можете устанавливать и запускать дистрибутивы Linux в Windows.Это позволяет вам разрабатывать и тестировать исходный код в Linux, при этом работая локально на вашем компьютере с Windows.

В сочетании с расширением Remote — WSL вы получаете полную поддержку редактирования и отладки кода VS во время работы в контексте WSL.

См. Документацию «Разработка в WSL», чтобы узнать больше, или попробуйте вводное руководство «Работа в WSL».

Новый терминал Windows

Доступный в Microsoft Store терминал Windows (предварительная версия) позволяет легко открывать терминалы PowerShell, командной строки и WSL в оболочке с несколькими вкладками.

Следующие шаги

После установки VS Code эти темы помогут вам узнать больше о VS Code:

Общие вопросы

Какие аргументы командной строки поддерживаются программой установки Windows?

VS Code использует Inno Setup для создания своего установочного пакета
для Windows. Таким образом, все переключатели командной строки Inno Setup доступны для использования.

Кроме того, вы можете запретить программе установки запускать код VS после завершения с помощью / mergetasks =! Runcode .

Прокрутка медленная и неровная

На некоторых устройствах прокрутка редактора не плавная, а тормозит, что создает неприятные ощущения. Если вы заметили эту проблему, обязательно установите обновление Windows 10 за октябрь 2018 г., в котором эта проблема исправлена.

У меня проблемы с установщиком

Попробуйте использовать zip-файл вместо установщика. Чтобы использовать это, разархивируйте VS Code в папку AppData \ Local \ Programs .

Примечание: Когда VS Code устанавливается через Zip-файл, вам нужно будет вручную обновлять его для каждого выпуска.

Иконки отсутствуют

Я установил Visual Studio Code на свой компьютер с Windows 7 или 8. Почему некоторые значки не отображаются в рабочей среде и редакторе?

VS Code использует значки SVG, и мы обнаружили случаи, когда расширение файла .SVG связано с чем-то, кроме image / svg + xml . Мы рассматриваем варианты, чтобы исправить это, но пока вот обходной путь:

Использование командной строки:

Откройте командную строку администратора.
Тип REG ADD HKCR \ .svg / f / v "Тип содержимого" / t REG_SZ / d image / svg + xml .

Использование редактора реестра (regedit):

Запустить regedit .
Откройте ключ HKEY_CLASSES_ROOT .
Найдите ключ .svg .
Установите для Content Type Data значение image / svg + xml .
Выход regedit .

31.03.2021

Код Visual Studio

— Flutter

Документы
Развитие
Инструменты
VS Код

Установка и настройка

Следуйте инструкциям по настройке редактора, чтобы
установить расширения Dart и Flutter
(также называемые плагинами).

Обновление расширения

Обновления расширений поставляются регулярно.
По умолчанию VS Code автоматически обновляет расширения, когда
доступны обновления.

Для установки обновлений вручную:

Нажмите кнопку «Расширения» на боковой панели.
Если отображается расширение Flutter с доступным обновлением,
нажмите кнопку обновления, а затем кнопку перезагрузки.
Перезапустить код VS.

Создание проектов

Есть несколько способов создать новый проект.

Создание нового проекта

Чтобы создать новый проект Flutter из Flutter
шаблон начального приложения:

Открыть палитру команд
( Ctrl + Shift + P ( Cmd + Shift + P в macOS)).
Выберите команду Flutter: New Application Project и нажмите Введите .
Введите желаемое имя проекта .
Выберите местоположение проекта .

Открытие проекта из существующего исходного кода

Чтобы открыть существующий проект Flutter:

Щелкните Файл> Открыть в главном окне IDE.
Перейдите в каталог, в котором хранится ваш существующий
Файлы исходного кода Flutter.
Щелкните Открыть .

Редактирование кода и просмотр проблем

Расширение Flutter выполняет анализ кода, который
позволяет:

Подсветка синтаксиса
Завершение кода на основе анализа расширенного типа
Переход к объявлениям типов
( Перейти к определению или F12 ),
и поиск использования шрифтов
( Найти все ссылки или Shift + F12 )
Просмотр всех текущих проблем с исходным кодом
(Вид > Проблемы или Ctrl + Shift + M
( Cmd + Shift + M на macOS))
Все проблемы анализа отображаются на панели «Проблемы»:

Запуск и отладка

Примечание:
Вы можете отлаживать свое приложение двумя способами.

Использование DevTools, набора отладки и профилирования
инструменты, которые запускаются в браузере. DevTools заменяет предыдущий
инструмент профилирования на основе браузера, Observatory, и включает
функциональность, ранее доступная только для Android Studio
и IntelliJ, например инспектор Flutter.
Используя встроенные функции отладки VS Code,
например, установка точек останова.

В приведенных ниже инструкциях описаны функции, доступные в VS Code.
Для получения информации об использовании запуска DevTools см.
Запуск DevTools из VS Code в документации DevTools.

Начните отладку, нажав Выполнить> Начать отладку
из главного окна IDE или нажмите F5 .

Выбор целевого устройства

Когда проект Flutter открыт в VS Code,
вы должны увидеть набор записей, специфичных для Flutter, в строке состояния,
включая версию Flutter SDK и
имя устройства (или сообщение No Devices ):

Примечание:

Если вы не видите номер версии Flutter или информацию об устройстве,
возможно, ваш проект не был обнаружен как проект Flutter.Убедитесь, что папка, содержащая ваш pubspec.yaml ,
внутри папки рабочего пространства VS Code .
Если в строке состояния указано No Devices , Flutter не был
возможность обнаружить любые подключенные устройства iOS или Android или симуляторы.
Вам необходимо подключить устройство или запустить симулятор или эмулятор,
продолжать.

Расширение Flutter автоматически выбирает последнее подключенное устройство.
Однако, если у вас подключено несколько устройств / симуляторов, щелкните
устройство в строке состояния, чтобы увидеть список выбора
вверху экрана.Выберите устройство, которое вы хотите использовать для
работает или отладка.

Запустить приложение без точек останова

Нажмите Выполнить> Начать без отладки в
в главном окне IDE или нажмите Ctrl + F5 .
Строка состояния станет оранжевой, чтобы показать, что вы находитесь в сеансе отладки.

Запустить приложение с точками останова

При желании установите точки останова в исходном коде.
Щелкните Выполнить> Начать отладку в главном окне IDE,
или нажмите F5 .
- Левая боковая панель отладки показывает кадры стека и переменные.
- Нижняя панель Debug Console показывает подробный вывод журнала.
- Отладка основана на конфигурации запуска по умолчанию.
  Для настройки щелкните шестеренку в верхней части
  Боковая панель отладки для создания файла launch.json .
  Затем вы можете изменить значения.

Запустить приложение в режиме отладки, профиля или выпуска

Flutter предлагает множество различных режимов сборки для запуска вашего приложения.Вы можете узнать о них больше в режимах сборки Flutter.

Откройте файл launch.json в VS Code.
Если у вас нет файла launch.json , перейдите по ссылке
представление Run в VS Code и щелкните , чтобы создать файл launch.json .
В разделе конфигураций измените свойство flutterMode на режим сборки, на который вы хотите настроить таргетинг. Например, если вы хотите работать в режиме отладки, ваш запуск .json может выглядеть так: "конфигурации": [ { "name": "Flutter", "запрос": "запуск", "тип": "дротик", "flutterMode": "отладка" } ]
Запустите приложение в представлении Выполнить .

`Цикл разработки быстрого редактирования и обновления`

Flutter предлагает лучший в своем классе цикл разработки, позволяющий вам чтобы увидеть эффект от ваших изменений почти мгновенно с помощью Горячая перезагрузка с отслеживанием состояния. Функция .Видеть Для получения подробной информации используйте горячую перезагрузку.

`Расширенная отладка`

`Отладка проблем с визуальной компоновкой`

Во время сеанса отладки, несколько дополнительных команд отладки добавлены в Палитра команд и инспектор Flutter. Когда пространство ограничено, значок используется как визуальный элемент. версия этикетки.

Переключить базовую окраску: Заставляет каждый RenderBox рисовать линию на каждой из своих базовых линий.
Переключить перекрасить радугу: Показывает вращение цветов на слоях при перерисовке.
Включить медленную анимацию: Замедляет анимацию для визуального осмотра.
Баннер переключения режима отладки: Скрывает баннер режима отладки даже при запуске отладочной сборки.

`Отладка внешних библиотек`

По умолчанию отладка внешней библиотеки отключена. в расширении Flutter. Для включения:

Выберите Настройки> Расширения> Конфигурация Dart .
Отметьте опцию Debug External Libraries .

`Советы по редактированию кода Flutter`

Если у вас есть дополнительные советы, которыми мы хотели бы поделиться, дайте нам знать!

`Ассисты и быстрые исправления`

Ассисты - это изменения кода, связанные с определенным идентификатором кода. Некоторые из них доступны, когда курсор находится на Идентификатор виджета Flutter, обозначенный значком желтой лампочки. Помощник можно вызвать, щелкнув лампочку или используя сочетание клавиш Ctrl + . ( Cmd + . на Mac), как показано здесь:

Быстрые исправления похожи, только они показаны с фрагментом кода, есть ошибка, и они может помочь исправить это.

Обертка с новым помощником по виджетам: Это можно использовать, когда у вас есть виджет, который вы хотите обернуть в окружающем виджете, например, если вы хотите обернуть виджет в строке или столбце .
Обернуть список виджетов новым помощником виджетов: Аналогично описанному выше, но для упаковки существующего список виджетов, а не отдельный виджет.
Превратить ребенка в помощника ребенка: Изменяет дочерний аргумент на дочерний аргумент, и помещает значение аргумента в список.
Преобразование StatelessWidget в StatefulWidget Assistant: Изменяет реализацию StatelessWidget на реализацию StatefulWidget , создав класс State и переместив туда код.

`Фрагменты`

Snippets можно использовать для ускорения ввода типичных структур кода.Они вызываются путем ввода своего префикса, а затем выберите в окне завершения кода:

Расширение Flutter включает следующие фрагменты:

Префикс stless : Создайте новый подкласс StatelessWidget .
Префикс stful : создать новый подкласс StatefulWidget и связанный с ним подкласс State.
Префикс stanim : Создать новый подкласс StatefulWidget , и связанный с ним подкласс State, включая инициализированное поле с AnimationController .

Вы также можете определить пользовательские фрагменты, выполнив Сконфигурируйте пользовательские фрагменты из палитры команд.

`Сочетания клавиш`

Горячая перезагрузка: Во время сеанса отладки нажатие кнопки Hot Reload на Панель инструментов отладки или нажатие Ctrl + F5 ( Cmd + F5 в macOS) выполняет горячую перезагрузку. Раскладки клавиатуры можно изменить, выполнив Откройте команду «Сочетания клавиш» из палитры команд.

`Горячая перезагрузка против горячего перезапуска`

Горячая перезагрузка работает путем вставки обновленных файлов исходного кода в работает Dart VM (виртуальная машина). Это включает не только добавление новых классов, а также добавление методов и полей в существующие классы и изменение существующих функций. Однако некоторые типы изменений кода не могут быть перезагружены в горячем режиме:

Инициализаторы глобальных переменных
Инициализаторы статического поля
Метод main () приложения

Для этих изменений полностью перезапустите приложение без необходимо завершить сеанс отладки.Чтобы выполнить горячий перезапуск, запустите команду Flutter: Hot Restart из Палитра команд или нажмите Ctrl + Shift + F5 ( Cmd + Shift + F5 в macOS).

`Поиск и устранение неисправностей`

`Известные проблемы и отзывы`

Все известные ошибки отслеживаются в системе отслеживания проблем: Трекер проблем GitHub с расширениями Dart и Flutter.

Мы приветствуем отзывы, как по ошибкам / проблемам, так и по запросам функций. До подачи новых выпусков:

Выполните быстрый поиск в средствах отслеживания проблем, чтобы узнать, проблема уже отслеживается.
Убедитесь, что у вас установлена последняя версия версия плагина.

При регистрации новых выпусков включайте выходные данные флаттера.

`Разработка Python в Visual Studio Code - Настоящий Python`

Один из самых крутых редакторов кода, доступных программистам, Visual Studio Code - это расширяемый, легкий редактор с открытым исходным кодом, доступный на всех платформах. Именно эти качества делают Visual Studio Code от Microsoft очень популярным и прекрасной платформой для разработки Python.

В этой статье вы узнаете о разработке на Python в Visual Studio Code, в том числе о том, как:

Установить код Visual Studio
Найдите и установите расширения, упрощающие разработку Python
Написать простое приложение на Python
Узнайте, как запускать и отлаживать существующие программы Python в VS Code
Подключите код Visual Studio к Git и GitHub, чтобы поделиться своим кодом со всем миром

Мы предполагаем, что вы знакомы с разработкой Python и уже установили в вашей системе некоторую форму Python (Python 2.7, Python 3.6 / 3.7, Anaconda или другие). Предоставляются скриншоты и демонстрации для Ubuntu и Windows. Поскольку Visual Studio Code работает на всех основных платформах, вы можете увидеть немного разные элементы пользовательского интерфейса и, возможно, потребуется изменить определенные команды.

Бесплатный бонус: 5 мыслей о Python Mastery, бесплатный курс для разработчиков Python, который показывает вам план действий и образ мышления, которые вам понадобятся, чтобы вывести свои навыки Python на новый уровень.

`Установка и настройка кода Visual Studio для разработки на Python`

Установка Visual Studio Code очень доступна на любой платформе.Доступны полные инструкции для Windows, Mac и Linux, а редактор ежемесячно обновляется новыми функциями и исправлениями ошибок. Вы можете найти все на сайте Visual Studio Code:

На случай, если вам интересно, Visual Studio Code (или сокращенно VS Code) не имеет почти ничего, кроме имени, со своим более крупным тезкой на базе Windows, Visual Studio.

Visual Studio Code имеет встроенную поддержку нескольких языков и модель расширения с богатой экосистемой поддержки других.VS Code обновляется ежемесячно, и вы можете быть в курсе событий в блоге Microsoft Python. Microsoft даже делает репозиторий VS Code на GitHub доступным для клонирования и внесения вклада. (Сигнал к пиару.)

Пользовательский интерфейс VS Code хорошо документирован, поэтому я не буду здесь повторять его:

`Расширения для разработки на Python`

Как указано выше, VS Code поддерживает разработку на нескольких языках программирования с помощью хорошо документированной модели расширений. Расширение Python обеспечивает разработку Python в Visual Studio Code со следующими функциями:

Расширения Visual Studio Code охватывают не только возможности языка программирования:

Вот еще несколько расширений и настроек, которые мне пригодятся:

GitLens предоставляет множество полезных функций Git прямо в окне редактирования, включая аннотации обвинений и функции исследования репозитория.
Автосохранение легко включить, выбрав в меню Файл, Автосохранение . Время задержки по умолчанию составляет 1000 миллисекунд, которое также можно настроить.
Settings Sync позволяет синхронизировать настройки VS Code в разных установках с помощью GitHub. Если вы работаете на разных машинах, это помогает поддерживать единообразие среды на них.
Docker позволяет быстро и легко работать с Docker, помогая автору Dockerfile, и docker-compose.yml , упакуйте и разверните свои проекты и даже создайте подходящие файлы Docker для вашего проекта.

Конечно, вы можете обнаружить другие полезные расширения при использовании VS Code. Делитесь своими открытиями и настройками в комментариях!

Чтобы открыть и установить новые расширения и темы, щелкните значок Extensions на панели действий. Вы можете искать расширения по ключевым словам, сортировать результаты различными способами и быстро и легко устанавливать расширения.В этой статье установите расширение Python, набрав python в элементе Extensions на панели действий и нажав Установить :

Таким же образом можно найти и установить любое из упомянутых выше расширений.

`Файлы конфигурации кода Visual Studio`

Следует отметить одну важную вещь: Visual Studio Code легко настраивается с помощью параметров пользователя и рабочей области.

Параметры пользователя являются глобальными для всех экземпляров Visual Studio Code, а параметры рабочей области являются локальными для конкретной папки или рабочей области проекта.Настройки рабочего пространства придают VS Code огромную гибкость, и в этой статье я буду приводить настройки рабочего пространства. Параметры рабочего пространства хранятся в виде файлов .json в локальной папке рабочего пространства проекта с именем .vscode .

`Начать новую программу Python`

Давайте начнем наше исследование разработки Python в Visual Studio Code с новой программы Python. В VS Code введите Ctrl + N , чтобы открыть новый файл. (Вы также можете выбрать в меню File, New .)

Примечание. Пользовательский интерфейс кода Visual Studio предоставляет палитру команд, в которой вы можете искать и выполнять любую команду, не покидая клавиатуры. Откройте палитру команд, используя Ctrl + Shift + P , введите File: New File и нажмите Enter , чтобы открыть новый файл.

Независимо от того, как вы туда попали, вы должны увидеть окно VS Code, которое выглядит примерно так:

После открытия нового файла вы можете вводить код.

`Ввод кода Python`

Для нашего тестового кода давайте быстро закодируем решето Эратосфена (которое находит все простые числа меньше заданного числа). Начните вводить следующий код в только что открытой вкладке:

  сито = [Истина] * 101
для i в диапазоне (2, 100):

Вы должны увидеть что-то похожее на это:

Подождите, что происходит? Почему Visual Studio Code не выделяет ключевые слова, не выполняет автоматическое форматирование или что-то действительно полезное? Что дает?

Ответ заключается в том, что сейчас VS Code не знает, с каким файлом он имеет дело.Буфер называется Untitled-1 , и если вы посмотрите в нижний правый угол окна, вы увидите слова Plain Text .

Чтобы активировать расширение Python, сохраните файл (выбрав Файл, Сохранить из меню, Файл: Сохранить файл из палитры команд или просто используя Ctrl + S ) как sieve.py . VS Code увидит расширение .py и правильно интерпретирует файл как код Python. Теперь ваше окно должно выглядеть так:

Это намного лучше! VS Code автоматически переформатирует файл как Python, что вы можете проверить, проверив языковой режим в нижнем левом углу.

Если у вас несколько установок Python (например, Python 2.7, Python 3.x или Anaconda), вы можете изменить, какой интерпретатор Python использует VS Code, щелкнув индикатор языкового режима или выбрав Python: выберите Interpreter на палитре команд. VS Code по умолчанию поддерживает форматирование с использованием pep8 , но при желании вы можете выбрать black или yapf .

Теперь добавим остальную часть кода Sieve. Чтобы увидеть работу IntelliSense, введите этот код напрямую, а не вырезайте и вставьте, и вы должны увидеть что-то вроде этого:

Вот полный код базового сита Эратосфена:

  сито = [Истина] * 101
для i в диапазоне (2, 100):
    если сито [i]:
        печать (я)
        для j в диапазоне (i * i, 100, i):
            решето [j] = Ложь

По мере того, как вы вводите этот код, VS Code автоматически добавляет отступы строк под для и , если для вас правильно, добавляет закрывающие круглые скобки и предлагает вам предложения.В этом вся сила IntelliSense, которая работает на вас.

`Запуск кода Python`

Теперь, когда код готов, вы можете его запустить. Для этого не нужно выходить из редактора: Visual Studio Code может запускать эту программу прямо в редакторе. Сохраните файл (используя Ctrl + S ), затем щелкните правой кнопкой мыши в окне редактора и выберите Запустить файл Python в терминале :

Внизу окна должна появиться панель «Терминал» с выводом кода.

`Поддержка Python Linting`

Возможно, вы видели всплывающее окно, когда вы печатали, о том, что линтинг недоступен. Вы можете быстро установить поддержку линтинга из этого всплывающего окна, по умолчанию используется PyLint. VS Code также поддерживает другие линтеры. Вот полный список на момент написания:

пилынт
хлопья 8
mypy
пидокстиль
pep8
изыскатель
пыли
бандит

На странице линтинга Python есть полная информация о том, как настроить каждый линтер.

Примечание : Выбор линтера - это настройка рабочего пространства проекта, а не глобальная пользовательская настройка.

`Редактирование существующего проекта Python`

В примере «Сито Эратосфена» вы создали один файл Python. Это замечательный пример, но во многих случаях вы будете создавать более крупные проекты и работать над ними в течение более длительного периода времени. Типичный рабочий процесс нового проекта может выглядеть так:

Создайте папку для хранения проекта (который может включать новый проект GitHub)
Перейти в новую папку
Создайте исходный код Python с помощью команды code filename.py

Использование Visual Studio Code в проекте Python (в отличие от одного файла Python) открывает множество дополнительных функций, которые позволяют VS Code по-настоящему сиять. Давайте посмотрим, как это работает с большим проектом.

В конце прошлого тысячелетия, когда я был намного моложе программиста, я написал программу-калькулятор, которая анализировала уравнения, записанные в инфиксной нотации, используя адаптацию алгоритма маневровой станции Эдсгера Дейкстры.

Чтобы продемонстрировать возможности Visual Studio Code, ориентированные на проекты, я начал воссоздавать алгоритм маневровой станции в виде библиотеки вычисления уравнений на Python.Чтобы продолжить, не стесняйтесь клонировать репо локально.

После того, как папка будет создана локально, вы можете быстро открыть всю папку в VS Code. Мой предпочтительный метод (как упоминалось выше) изменен следующим образом, поскольку у меня уже есть папка и основные файлы:

  cd / путь / к / проекту
код.

VS Code понимает и будет использовать любые среды virtualenv, pipenv или conda, которые он видит при открытии таким образом. Вам даже не нужно сначала запускать виртуальную среду! Вы даже можете открыть папку из пользовательского интерфейса, используя File, Open Folder из меню, Ctrl + K , Ctrl + O с клавиатуры или File: Открыть папку из Command Палитра.

Вот что я вижу в моем проекте библиотеки уравнений eval:

Когда Visual Studio Code открывает папку, он также открывает файлы, которые вы открывали последним. (Это настраивается.) Вы можете открывать, редактировать, запускать и отлаживать любой из перечисленных файлов. Представление «Проводник» на панели действий слева дает вам представление обо всех файлах в папке и показывает, сколько несохраненных файлов существует в текущем наборе вкладок.

`Поддержка тестирования`

VS Code может автоматически распознавать существующие тесты Python, написанные в фреймворке unittest или фреймворке pytest или Nose , если эти фреймворки установлены в текущей среде.У меня есть модульный тест, написанный на unittest для библиотеки eval eval, который вы можете использовать в этом примере.

Чтобы запустить существующие модульные тесты, из любого файла Python в проекте щелкните правой кнопкой мыши и выберите Run Current Unit Test File . Вам будет предложено указать платформу тестирования, место в проекте для поиска тестов и шаблон имени файла, который будет использоваться вашими тестами.

Все они сохраняются как настройки рабочего пространства в локальном .vscode / settings.json и его можно там изменить. Для этого проекта уравнения вы выбираете unittest , текущую папку и шаблон * _test.py .

После того, как среда тестирования настроена и тесты были обнаружены, вы можете запустить все свои тесты, щелкнув Run Tests в строке состояния и выбрав параметр на палитре команд:

Вы даже можете запускать отдельные тесты, открыв тестовый файл в VS Code, щелкнув Run Tests в строке состояния и выбрав Run Unit Test Method… и конкретный тест для запуска.Это делает тривиальным устранение отдельных сбоев тестов и повторный запуск только неудачных тестов, что значительно экономит время! Результаты тестирования показаны на панели Output под Python Test Log .

`Поддержка отладки`

Несмотря на то, что VS Code является редактором кода, возможна отладка Python непосредственно в VS Code. VS Code предлагает многие функции, которые вы ожидаете от хорошего отладчика кода, в том числе:

Автоматическое отслеживание переменных
Смотреть выражения
Точки останова
Проверка стека вызовов

Вы можете увидеть их все как часть представления Debug на панели действий:

Отладчик может управлять приложениями Python, работающими во встроенном терминале или экземпляре внешнего терминала.Он может подключаться к уже запущенным экземплярам Python и даже может отлаживать приложения Django и Flask.

Отладить код в одном файле Python так же просто, как запустить отладчик с помощью F5 . Вы используете F10 и F11 для перехода к функциям соответственно и Shift + F5 для выхода из отладчика. Точки останова устанавливаются с помощью F9 или с помощью мыши, щелкая в левом поле в окне редактора.

Перед тем, как начать отладку более сложных проектов, включая приложения Django или Flask, вам необходимо настроить, а затем выбрать конфигурацию отладки.Настройка конфигурации отладки относительно проста. В представлении Debug выберите раскрывающийся список Configuration , затем Add Configuration и выберите Python :

Visual Studio Code создаст файл конфигурации отладки в текущей папке с именем .vscode / launch.json , который позволяет вам настроить определенные конфигурации Python, а также параметры для отладки определенных приложений, таких как Django и Flask.

Вы даже можете выполнять удаленную отладку и отлаживать шаблоны Jinja и Django.Закройте файл launch.json в редакторе и выберите правильную конфигурацию для своего приложения в раскрывающемся списке Configuration .

`Интеграция с Git`

VS Code имеет встроенную поддержку управления исходным кодом и поставляется с поддержкой Git и GitHub прямо из коробки. Вы можете установить поддержку других SCM в VS Code и использовать их одновременно. Управление исходным кодом доступно из окна управления исходным кодом . Представление :

.

Если папка вашего проекта содержит файл .git , VS Code автоматически включает все функции Git / GitHub. Вот некоторые из множества задач, которые вы можете выполнить:

Все эти функции доступны непосредственно из пользовательского интерфейса VS Code:

VS Code также распознает изменения, внесенные вне редактора, и будет вести себя соответствующим образом.

Фиксация последних изменений в VS Code - довольно простой процесс. Измененные файлы отображаются в представлении Source Control с маркером M , а новые неотслеживаемые файлы помечаются с помощью U .Внесите изменения, наведя указатель мыши на файл и щелкнув знак «плюс» ( + ). Добавьте сообщение фиксации вверху представления, а затем щелкните галочку, чтобы зафиксировать изменения:

Вы также можете отправлять локальные коммиты на GitHub из VS Code. Выберите Sync из меню просмотра Source Control или щелкните Synchronize Changes в строке состояния рядом с индикатором ветви.

`Заключение`

Visual Studio Code - один из самых крутых редакторов общего назначения и отличный кандидат для разработки на Python.Из этой статьи вы узнали:

Как установить VS Code на любую платформу
Как найти и установить расширения для включения специфичных для Python функций
Как VS Code упрощает написание простого приложения Python
Как запускать и отлаживать существующие программы Python в VS Code
Как работать с репозиториями Git и GitHub из VS Code

Visual Studio Code стал моим редактором по умолчанию для Python и других задач, и я надеюсь, что вы дадите ему шанс стать вашим.

Если у вас есть вопросы или комментарии, пишите в комментариях ниже. На веб-сайте Visual Studio Code также есть гораздо больше информации, чем мы могли бы здесь рассказать.

Автор благодарит Дэна Тейлора из команды Visual Studio Code в Microsoft за потраченное время и неоценимый вклад в эту статью.

Код

`Visual Studio может это сделать? - Smashing Magazine`

`Об авторе`

Берк Холланд (Burke Holland) - фронтенд-разработчик, живущий в Нэшвилле, штат Теннесси; величайший город в мире.Ему очень нравится JavaScript, потому что это единственный способ ... Больше о Берк ↬

Почему Visual Studio Code (VS Code) так популярен и нужен ли нам еще один текстовый редактор? В этой статье мы рассмотрим, как VS Code расширяет традиционные концепции текстовых редакторов и открывает совершенно новые возможности для повышения производительности для разработчиков. Это все самое лучшее о VS Code, о котором никто никогда не удосужился рассказать вам.

Около двух лет назад я неохотно впервые открыл Visual Studio Code (VS Code).Единственная причина, по которой я это сделал, - это то, что я работал над проектом TypeScript (тоже довольно неохотно), и мне надоело бороться с редактором, компилятором и всеми настройками, которые мне нужны для работы проекта TypeScript. Кто-то упомянул мне, что TypeScript «просто работает» в VS Code, и я был приятно удивлен, обнаружив, что они были правы.

Я ожидал этого. VS Code от Microsoft, поэтому вполне ожидаемо, что TypeScript будет работать. Чего я не ожидал, так это того, что практически все, что мне нужно было сделать в VS Code, «просто сработало».И я имею в виду , что угодно, . Хотя в этой статье основное внимание уделяется функциям для Интернета, а также разработчикам JavaScript, VS Code имеет интеграцию с Go, Python, Java и Ruby - и это лишь некоторые из них.

В течение следующих нескольких месяцев я начал открывать в VS Code вещи, которые я нашел замечательными. Я официально перешел на VS Code и с тех пор не оглядывался. В течение нескольких месяцев я составлял список моих любимых советов, уловок и расширений для VS Code, которые могли оставить у вас ту же реакцию, что и у меня, и которые продолжаются: «VS Code может это сделать ?!» 😲

`От веб-приложений к настольным приложениям`

Знаете ли вы, что добавить в свое резюме «разработчика настольных приложений» можно, приложив немного больше усилий? Все, что вам нужно сделать, это просмотреть документацию по API и создать свое первое современное настольное приложение.Прочтите соответствующую статью →

`Интерактивная площадка`

Один из лучших способов изучить все тонкости VS Code - пройти через интерактивную площадку.

Это специальная страница, на которой описаны общие сочетания клавиш и такие понятия, как несколько курсоров, разделенные панели и сочетания клавиш. Каждый из примеров является интерактивным, так что вы можете практиковать уроки прямо в самих уроках.

Интерактивное руководство находится прямо на странице «Добро пожаловать» при первом открытии редактора:

Раздел «Интерактивная площадка» на странице приветствия VS Code.

Многие люди (включая меня) полностью пропускают его, потому что он находится ниже «сгиба» и ближе к низу страницы. Кроме того, кто читает заставки?

Примечание : Вы можете вернуться к интерактивному руководству в любое время, открыв палитру команд VS Code Ctrl / Cmd + Shift + P и выбрав «Интерактивная игровая площадка».

Теперь, когда вы освоили основы, вам понадобится шрифт, столь же красивый, как и код, который вы собираетесь написать.Для этого не ищите ничего, кроме FiraCode и Font Ligatures.

`Лигатуры шрифтов`

Лигатуры шрифтов - это шрифты, содержащие специальные символы, которые используются для представления символов, состоящих из более чем одного символа. У нас их много в программировании. Это будут такие символы, как <= , > = , == и === .

FiraCode - прекрасная лигатура шрифтов для VS Code. Сначала загрузите шрифт FiraCode с GitHub и добавьте его в шрифты вашего компьютера.Затем добавьте следующие строки в свой файл пользовательских настроек Ctrl / Cmd +, .

  "editor.fontFamily": "Код Фира",
        "editor.fontLigatures": true

Попробуйте использовать несколько специальных символов, перечисленных выше, чтобы увидеть разницу. Лигатуры шрифтов появляются в неожиданных местах. Такие места, как www и && . Идите вперед, попробуйте и посмотрите, что вы обнаружите!

Теперь, когда у вас есть хорошая лигатура шрифта и несколько замечательных новых символов, пора задействовать мышечную память, которую вы накопили за годы работы в предыдущих редакторах, установив раскладку клавиатуры.

`Раскладки клавиатуры`

Отчасти мои сомнения при переходе на VS Code заключались в том, что я потратил некоторое разочарование и усилия на изучение сочетаний клавиш Sublime Text. Я также немного гордился своим мастерством игры на клавиатуре и вовсе не был готов отказаться от этого.

К счастью, в этом не было необходимости.

VS Code имеет то, что называется Keymaps . Это расширения, которые сопоставляют все его ярлыки (ну, почти все) другим редакторам. Есть раскладки для всех популярных редакторов, включая Sublime, Atom, Emacs и даже Eclipse!

Чтобы установить раскладку клавиатуры, откройте панель поиска расширений, нажав Ctrl / Cmd + K → Ctrl / Cmd + X .Затем найдите «раскладку».

Расширение Sublime Keymap для VS Code.

Должен отметить, что с тех пор я удалил Sublime Keymap. После достаточного использования я смог перенастроить свой мозг, чтобы использовать ярлыки VS Code, как только они появляются из коробки. Думайте о раскладке клавиатуры как о колесе для тренировки: это хорошая идея, когда вы только начинаете, но в какой-то момент вы, вероятно, захотите их снять.

Теперь, если вы похожи на меня, у вас несколько компьютеров, и вы можете редактировать в разных местах в зависимости от проекта и дня.Мы уже внесли ряд изменений в настройку VS Code и собираемся внести еще несколько. Мы не хотим повторять эту конфигурацию везде, где мы используем VS Code. Вот где приходит на помощь расширение Settings Sync.

`Settings Sync`

С помощью расширения Settings Sync вы можете экспортировать все свои настройки VS Code в Gist, а затем вытащить их все из другой установки VS Code и сразу применить .

Это также хороший способ поделиться своей конфигурацией с коллегами.Просто отправьте им идентификатор в свой Gist, и они смогут синхронизировать все ваши настройки со своей установкой. Некоторые магазины сохраняют общую суть, и все новые разработчики в команде могут получить точную конфигурацию с помощью одной простой команды. Вот такая продуктивность!

И, говоря о производительности, давайте перейдем к одному из моих любимых инструментов повышения производительности для веб-разработчиков: Эммету.

`Emmet`

Emmet - популярный инструмент расширения для разметки и CSS, который существует уже довольно давно.Тем не менее, я почти каждый день встречаю людей, которые либо не слышали об этом, либо они новички в разработке и только узнают об этом. Это нормально! Мы все учимся разным вещам в разное время.

Emmet встроен в VS Code, поэтому для его запуска не требуется дополнительных усилий. Просто начните вводить синтаксис Emmet в файле HTML или CSS, а все остальное сделает редактор. По умолчанию VS Code даже покажет вам предварительный просмотр предстоящего расширения Emmet.

VS Code показывает предварительный просмотр грядущего расширения Emmet.

Изящный трюк, который можно использовать с Emmet, - сопоставить сочетание клавиш ( Ctrl / Cmd + K → Ctrl / Cmd + S открывает сопоставления клавиатуры) команде «Обернуть отдельные строки сокращениями». Это похоже на старый «Обернуть выделение как ссылку» от Textmate, но с дополнительным преимуществом, заключающимся в возможности переносить сразу несколько строк с более сложным расширением.

Emmet также можно использовать в файлах markdown, JSX и .vue . Чтобы включить их, добавьте правильное языковое сопоставление в файл пользовательских настроек Ctrl / Cmd +, .

  "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "уценка": "HTML"
    },

В случае JSX Эммет достаточно умен, чтобы использовать className вместо class внутри расширения.

Еще одна интересная особенность Emmet, которая была для меня новой, - это способность Emmet автоматически предоставлять ширину и высоту изображения, просто просматривая файл изображения, связанный в src . Это работает в HTML и CSS. Он также работает как с изображениями, размещенными локально в проекте, так и с изображениями по другим URL-адресам.Чтобы использовать эту функцию, поместите курсор в тег изображения, откройте палитру команд Ctrl / Cmd + Shift + P и выберите «Обновить размер изображения». Магия! 🎩

Для более глубокого понимания того, что такое Эммет, и всех различных способов его использования в VS Code, ознакомьтесь с этой статьей CSS Tricks.

В то время как Эммет заботится о производительности в разметке и CSS, сам VS Code обеспечивает автозавершение кода в форме intellisense; и он работает там, где вы не ожидали.

`Intellisense в файлах JSON`

Intellisense - довольно известная функция редактора, но в первую очередь задумана только внутри файлов кода.VS Code расширяет классическое определение intellisense и также добавляет его в файлы JSON. Вы увидите это, если добавите какие-либо настройки в свой файл пользовательских настроек. VS Code также предоставляет intellisense для файлов package.json . Что еще более впечатляет, так это то, что он предоставляет intellisense для пакетов npm внутри package.json . Нужен конкретный пакет, но вы не помните его версию? Без проблем! VS Code просмотрит npm и вернет самую последнюю версию в intellisense.

Некоторые люди отметили, что они не редактируют файл package.json вручную. Однако я ловлю себя на том, что время от времени делаю это по какой-то странной причине, и необходимость искать версию пакета всегда была для меня огромной болью. Теперь он мне предоставлен VS Code. На одну вещь меньше, о которой я должен догадываться.

Даже с Intellisense это JavaScript, поэтому, если мы не очень смелы (или не зависимы от страданий), нам понадобится линтер. VS Code имеет отличную интеграцию с ESLint через расширение ESLint, но есть и другие варианты, и он включает проверку типа вашего нетипизированного JavaScript.

`Type Check Your JavaScript`

Помните ту замечательную интеграцию TypeScript, о которой я говорил вам ранее? Одна из малоизвестных уловок заключается в том, что вы можете использовать компилятор TypeScript для проверки и простых файлов JavaScript. Вы делаете это, добавляя // @ ts-check в начало любого файла JavaScript, и вы сразу получаете проверку ошибок TypeScript в файле.

Вы не хотели бы добавлять эту строку в каждый файл, поэтому вы можете использовать TypeScript для проверки каждого файла JavaScript в своем проекте, добавив следующую строку в свой файл пользовательских настроек Ctrl / Cmd +, .

  "javascript.implicitProjectConfig.checkJs": true

Если вы хотите управлять определенными функциями проверки TypeScript, просто добавьте файл .tsconfig в свой проект. Когда я говорю, что TypeScript «просто работает» в VS Code, я имею в виду, что он работает настолько хорошо, что разработчик почти без проблем понимает его.

Теперь, когда у вас есть линтинг кода и даже проверка типов, когда это необходимо, пора позволить VS Code решать эти надоедливые проблемы форматирования с помощью Prettier.

`Prettier`

Prettier - замечательный инструмент форматирования кода с открытым исходным кодом.Он широко используется командами (и отдельными людьми), чтобы убедиться, что стили кодирования универсальны для проектов и разработчиков. Он автоматически переформатирует ваш код в соответствии с некоторыми определенными стандартами, такими как столбец для переноса кода, способ форматирования обещаний и использование одинарных или двойных кавычек.

Prettier включен в VS Code с помощью Prettier Extension. Чтобы установить его, откройте панель расширений Ctrl / Cmd + K → Ctrl / Cmd + X и выполните поиск по запросу «красивее».

После установки вы увидите Prettier на панели задач для любого файла, который Prettier умеет форматировать.Вы можете вызвать Prettier для файла с помощью команды «Форматировать документ»: Alt / Option + Shift + F .

Здесь есть хитрый трюк (показанный на видео выше) - установить VS Code на автоматическое форматирование при сохранении. Это вызовет Prettier всякий раз, когда файл будет сохранен. Чтобы получить эту функциональность, добавьте следующие настройки в файл пользовательских настроек ( Ctrl / Cmd ).

  "editor.formatOnSave": true

Настройки Prettier также можно изменить из файла пользовательских настроек.Если вы хотите, чтобы Prettier использовал вашу конфигурацию ESLint для настроек, просто укажите параметр «eslintIntegration».

  "prettier.singleQuote": true,
    "prettier.eslintIntegration": правда,
    "prettier.tabWidth": 2

Посмотрите, какой теперь красивый ваш код! Красивый. Вам больше не захочется выходить из редактора. Благодаря параметрам терминала в VS Code вам, возможно, никогда не придется!

`Терминальный доступ`

Из видео выше вы могли заметить, что VS Code имеет встроенный терминал.Вы можете запустить его, нажав Ctrl +, . Можно открыть несколько сеансов терминала, и они появятся в раскрывающемся списке в правом верхнем углу окна терминала.

Мне было трудно избавиться от привычки пользоваться встроенным терминалом на Mac. Вы можете открыть внешний терминал в любое время из VS Code в том месте, где находится файл, который вы просматриваете в данный момент, с помощью сочетания клавиш Ctrl / Cmd + Shift + C .

Если отбросить глупые уловки с терминалом, одна из самых важных вещей, которые разработчик может сделать для повышения своей производительности, - это просто сотрудничать с другими разработчиками.Мы делаем это постоянно. Некоторым из нас посчастливилось сидеть рядом друг с другом. Некоторые из нас делают это через Skype. Независимо от того, как вы объединяете программу, VS Code только что добавил функцию, которая, вероятно, изменит ваше представление о совместной работе.

`Live Share`

VS Code Live Share было объявлено на прошлой неделе на Microsoft Connect. Это позволяет нескольким разработчикам мгновенно объединиться в один проект. Нет необходимости проверять код в репозитории или запускать инструмент для демонстрации экрана.Другие разработчики могут сразу загрузить ваш проект в свой редактор и видеть ваш курсор в реальном времени без необходимости настраивать что-либо на своей стороне.

Это также работает для отладки. Если вы начнете сеанс отладки, другой человек получит тот же полный опыт отладки прямо в своем редакторе. Они даже могут контролировать процесс отладки, входя, выходя и перебирая код. Если другой человек изменит ваш код, он также изменится в вашем редакторе. Это действительно сложно осмыслить, пока не увидишь это в действии.Я очень рекомендую посмотреть эту короткую демонстрацию. Я до сих пор не понимаю, как мы продержались так долго, пока разработчики не имели такой функции.

На момент написания этой статьи общий ресурс VS Code Live находится на стадии предварительной версии, но, вероятно, будет общедоступным к тому моменту, когда вы это прочитаете. Фактически, вы, возможно, уже используете его!

Теперь, когда ваши коллеги успешно исправили все ваши ошибки (ура для совместной работы!), Пора проверить все это на GitHub. Одна из моих любимых особенностей VS Code заключается в том, что интеграция с Git настолько хороша, что даже я могу использовать Github.

`Интеграция с Git`

Мне также сложно работать с Git на терминале, потому что это черный ящик. Вы летите вслепую за пределы своего редактора, имея только свои навыки работы с терминалом и знание интерфейса командной строки Git, чтобы справиться с этим. Некоторым этого может хватить, но я стал сильно полагаться на визуальную интеграцию Git, которая предоставляется с VS Code.

VS Code автоматически подбирает любую конфигурацию Git в вашем проекте. Есть целая вкладка, посвященная только параметрам Git.По умолчанию VS Code поддерживает добавление, фиксацию и отправку, ветвление, сохранение и извлечение, а также множество других опций. При просмотре файлов на вкладке Git вы получаете параллельное сравнение оригинала и сравнения. Теперь вы также можете просматривать различия прямо в файле кода и даже возвращаться оттуда.

До сих пор мы уделяли большое внимание редактированию текста, но VS Code замечательно подходит для более тяжелой работы; то, что мы обычно ожидаем от интегрированной среды разработки (IDE), а не от текстового редактора.Вот некоторые из моих любимых.

`Нулевая конфигурация Node.js Запуск и отладка`

VS Code будет запускаться и присоединять отладчик к любому коду JavaScript без каких-либо расширений или какой-либо конфигурации. Просто нажмите клавишу F5 и выберите «Узел» из раскрывающегося списка. Вы также можете переключиться на вкладку отладки Ctrl / Cmd + Shift + D и нажать кнопку с зеленой стрелкой вверху. Это запустит ваше приложение и подключит отладчик, обеспечивающий полнофункциональную отладку.

`Точки останова по столбцу`

Код VS также поддерживает встроенные точки останова или точки останова по столбцу.Это когда вы устанавливаете точку останова в середине строки кода. Это особенно полезно для отладки цепочек обещаний и любых других мест, где вы выполняете несколько функций в одной строке.

Просто щелкните правой кнопкой мыши во время сеанса отладки и выберите «Добавить точку останова столбца».

Устанавливает точки останова столбца для разрыва внутри отдельных строк кода.

`Сборка, запуск, отладка и развертывание Docker`

Microsoft предоставляет расширение Docker для VS Code, которое позволит вам выполнять практически все действия Docker в VS Code.Фактически, VS Code автоматически создаст необходимые файлы Docker для вашего проекта (насколько это возможно) в зависимости от выбранной вами среды выполнения и структуры вашего проекта. Для простых приложений Node.js это означает установку Docker с нулевой конфигурацией.

В этом примере я беру приложение Express и использую VS Code для создания всех файлов компоновки Docker и Docker. VS Code также создает правильную конфигурацию отладки, поэтому после запуска образа я могу подключить отладчик VS Code, и все просто работает.Расширение также позволяет публиковать образ в Docker Hub или в реестре контейнеров Azure.

`Составные конфигурации запуска`

Хотя инструменты сборки, такие как Webpack, полностью изменили способ создания приложений, они также представили новые проблемы разработки, которых раньше не было. Webpack использует свой собственный сервер разработки в памяти для обеспечения «горячей перезагрузки», но когда вы переходите к производству, Webpack выходит из уравнения, и ваш сервер берет на себя ответственность.

По сути, теперь необходимо работать как два отдельных проекта в разработке и один проект в производстве. Это означает, что мы обычно отлаживаем интерфейсные приложения в браузере с помощью Chrome DevTools и серверной части в нашем текстовом редакторе.

VS Code имеет возможность запускать несколько процессов и присоединять отладчики к обоим из одной команды запуска. Это означает, что можно отлаживать внешний код JavaScript и код на стороне сервера Node.js прямо из VS Code.

Это называется «составной конфигурацией запуска». В приведенном выше видео я использую следующий код для отладки приложения, которое использует Express / Cosmos DB для серверной части и React для клиентской части.

  {
        "соединения": [
            {
                "name": "Запустить браузер / сервер",
                «конфигурации»: [«Запустить браузер», «Запустить сервер»]
            }
        ],
        "конфигурации": [
            {
                "тип": "хром",
                "запрос": "запуск",
                "name": "Запустить браузер",
                "url": "http: // localhost: 3000",
                "webRoot": "$ {workspaceRoot} / src"
            },
            {
                "тип": "узел",
                "запрос": "запуск",
                "name": "Запустить сервер",
                "программа": "$ {workspaceRoot} / server / server.js "
            }
        ]
    }

Обратите внимание, что для этого необходимо установить расширение отладчика Chrome. Администрирование MongoDB

`Администрирование MongoDB`

VS Code может помочь вам визуально администрировать и запрашивать любую базу данных MongoDB или Cosmos DB (локальную или удаленную) с помощью расширения Cosmos DB.

Расширение Cosmos DB будет подключаться к любым существующим экземплярам Cosmos DB в Azure, но оно также будет подключаться к любому экземпляру MongoDB, доступному по URL-адресу mongodb: // .

Вы можете создавать и удалять базы данных и коллекции на боковой панели, а также создавать и работать с MongoDB Scrapbooks для тестирования ваших запросов. VS Code обеспечивает полный интеллект для коллекций и API MongoDB в Mongo Scrapbooks. Вы даже можете изменить результат своего запроса на панели результатов, и изменения будут сохранены обратно в базу данных.

`Развертывание приложений`

Еще одно интересное расширение для VS Code - это расширение Azure AppService. Если вы хотите развернуть свои приложения в облаке, вы можете сделать это, даже не выходя из редактора.

Microsoft предоставляет расширение под названием AppService Tools for VS Code, которое позволит вам создавать новые сайты, управлять существующими и развертывать код либо щелчком правой кнопкой мыши, либо с помощью предварительно созданного сценария оболочки, который автоматизирует процесс проверки вашего кода в правая конечная точка Git для настройки непрерывной доставки.

`Да, VS Code может это сделать`

К настоящему времени вы, вероятно, поняли, что на самом деле нет ничего, что VS Code не мог бы сделать. Если вам нужна определенная функциональность, весьма вероятно, что либо редактор уже поддерживает ее (мы даже не касались интеграции Git), либо кто-то создал расширение для вашего конкретного варианта использования.Даже если это превратит Markdown в презентации Reveal.js!

`Дополнительные ресурсы`

(da, ra, il) Настройка

`- vscode-docs`

Начать работу с VS Code легко и быстро. Следуйте приведенным ниже руководствам для конкретных платформ.

Код

VS является легковесным и должен работать на большинстве доступных версий оборудования и платформ. Вы можете просмотреть системные требования, чтобы проверить, поддерживается ли конфигурация вашего компьютера.

Примечание. VS Code - это прежде всего редактор, который занимает мало места.В отличие от традиционных IDE, в которых есть все, кроме кухонной мойки, вы можете настроить свою установку в соответствии с технологиями разработки, которые вам нужны. Обязательно прочтите раздел «Дополнительные компоненты» после руководств по платформе, чтобы узнать о настройке установки VS Code.

`Mac OS X`

Загрузить код Visual Studio для Mac OS X.
Дважды щелкните загруженный архив, чтобы развернуть его содержимое.
Перетащите Visual Studio Code.app в папку Applications , сделав его доступным на панели запуска .
Добавьте код VS в свою док-станцию, щелкнув правой кнопкой мыши значок и выбрав Options , Keep in Dock .

Совет: Если вы хотите запустить VS Code с терминала, просто набрав 'code', VS Code имеет команду Shell Command: Установите команду 'code' в PATH , чтобы добавить 'code' в ваш $. Список переменных PATH .
После установки запустите VS Code. Теперь откройте палитру команд ( kb (workbench.action.showCommands) ) и введите команду оболочки , чтобы найти команду оболочки : установите команду 'code' в команду PATH .
После выполнения команды перезапустите терминал, чтобы новое значение $ PATH вступило в силу. Вы сможете просто ввести «код». в любой папке, чтобы начать редактирование файлов в этой папке.

`Linux`

Загрузите код Visual Studio для вашего дистрибутива, .deb для дистрибутивов на основе Debian, таких как Ubuntu или.rpm для дистрибутивов на основе Red Hat, таких как Fedora или CentOS. Обратите внимание, что 32-битные двоичные файлы также доступны на странице загрузки.
Установите пакет с помощью диспетчера пакетов с графическим интерфейсом пользователя, дважды щелкнув файл пакета, или через командную строку:

Баш # Для .deb sudo dpkg -i .deb

# Для .rpm (Fedora 21 и ниже) sudo yum install .rpm

# Для .rpm (Fedora 22 и выше) sudo dnf установить .rpm ``

VS Code теперь должен быть доступен для запуска через программу запуска или командную строку, запустив код .

Совет: Запустите код . в любой папке, чтобы начать редактирование файлов в этой папке.

`Окна`

Загрузите код Visual Studio для Windows.
Дважды щелкните файл VSCodeSetup.exe , чтобы запустить процесс установки. Это займет всего минуту.
По умолчанию VS Code устанавливается в папку C: \ Program Files (x86) \ Microsoft VS Code для 64-разрядной машины.

Примечание: .NET Framework 4.5 требуется для VS Code. Если вы используете Windows 7, убедитесь, что установлена .NET Framework 4.5.
Примечание: Вы можете скачать zip-архив здесь.
Совет: Программа установки при желании добавит код Visual Studio в ваш % PATH% , поэтому с консоли вы можете просто ввести код . , чтобы открыть VS Code в этой папке.
Совет: Возможно, вам потребуется выйти из системы после установки, чтобы изменения в переменной среды % PATH% вступили в силу.

`Дополнительные компоненты`

VS Code - это небольшая загрузка по умолчанию и включает только минимальное количество компонентов, используемых в большинстве рабочих процессов разработки. Включены основные функции, такие как редактор, управление файлами, управление окнами и настройки предпочтений. Языковая служба JavaScript / TypeScript и отладчик Node.js также являются частью базовой установки.

Если вы привыкли работать с более крупными монолитными инструментами разработки (IDE), вы можете быть удивлены, что ваши сценарии не полностью поддерживаются из коробки.Например, нет диалогового окна File > New Project с предустановленными шаблонами проектов. Большинству пользователей VS Code потребуется установить дополнительные компоненты в зависимости от их конкретных потребностей.

Вот несколько часто устанавливаемых компонентов:

Git - VS Code имеет встроенную поддержку управления исходным кодом с помощью Git, но требует, чтобы Git устанавливался отдельно.
Node.js (включает NPM) - платформа и среда выполнения для простого создания и запуска приложений JavaScript
TypeScript - компилятор TypeScript, tsc , для преобразования структурированного и строго типизированного TypeScript в JavaScript.
Typings - Диспетчер определения типа TypeScript, чтобы VS Code мог предоставлять IntelliSense для популярных платформ JavaScript.

Вы часто найдете вышеупомянутые компоненты в нашей документации и пошаговых руководствах.

`VS Расширения кода`

VS Code расширения позволяют сторонним разработчикам добавлять поддержку для дополнительных:

Расширения

интегрируются в пользовательский интерфейс VS Code, команды и системы запуска задач, поэтому вам будет легко работать с различными технологиями через общий интерфейс VS Code.Посетите рынок расширений VS Code, чтобы узнать, что доступно.

Visual Studio Code интегрируется с существующими цепочками инструментов. Мы думаем, что следующие инструменты улучшат ваш опыт разработки.

Yeoman - инструмент для создания шаблонов приложений, представьте его как версию командной строки File > New Project .
generator-aspnet - генератор Yeoman для создания каркасов приложений ASP.NET Core .
hottowel - генератор Yeoman для быстрого создания AngularJS приложений.
Express - фреймворк для приложений Node.js, использующий шаблонизатор Jade .
gulp - система запуска задач потоковой передачи, которая легко интегрируется с задачами VS Code.
mocha - Фреймворк для тестирования JavaScript, работающий на Node.js.
bower - менеджер пакетов на стороне клиента.

`Следующие шаги`

Теперь вы установили и настроили VS Code.

Для получения дополнительной документации попробуйте:

Основы - Базовая ориентация на VS Code
Расширенное редактирование - Lint, IntelliSense, Lightbulbs, Peek and Goto Definition и многое другое

Отладка

- вот где действительно сияет VS Code

Если вы хотите, чтобы что-то работало быстро, попробуйте Node.js во время выполнения, которое поможет вам отладить веб-приложение Node.js с помощью VS Code за считанные минуты.

`Общие вопросы`

Q: Какие системные требования для VS Code?

A: У нас есть список системных требований.

Q: Как мне создать и запустить новый проект?

A: Код VS не включает традиционное диалоговое окно File > New Project или предустановленные шаблоны проектов.Вам нужно будет добавить дополнительные компоненты и скаффолдеры в зависимости от ваших интересов разработки. С помощью таких инструментов, как Yeoman, и множества модулей, доступных через диспетчер пакетов NPM, вы обязательно найдете подходящие шаблоны и инструменты для создания своих проектов.

.

Как запустить код в visual studio code: Как запустить проект на c++ в visual studio code? — Хабр Q&A

Как запустить код select в VScode?

5 ответов

Похожие вопросы:

Как построить и запустить код C++ в Visual Studio Code?

Отказ от ответственности: Visual Studio Code не поддерживает задачи, использующие различные команды shell (см. здесь ).

Отказ от ответственности: панель вывода задач Visual Studio Code не позволит вам передавать входные данные в вашу программу в интерактивном режиме.

Как написать и запустить HTML на компьютере? — Блог HTML Academy

Шаг 1. Качаем текстовый редактор

Шаг 2. Запускаем редактор и осматриваемся

Шаг 3. Добавляем файлы

Шаг 4. Делаем работу удобнее

Шаг 5. Добавляем код

Шаг 6. Запускаем код и смотрим на результат

Что мы сделали

Внеклассное чтение:

Запустите JavaScript в коде Visual Studio

подробный гайд по настройке и установке плагинов

Visual Studio Code: мощное руководство пользователя

Предпосылки

Немного истории

Настройка и обновления

Пользовательский интерфейс

Работа с проектами

Контроль версий с помощью Git

Создание и запуск кода

Настройки пользователя и рабочей области

Ассоциация языков

Горячие клавиши

Возможности редактора кода

Intellisense

Снипеты

Форматирование

Linting

Отладка

Каким образом в Visual Studio Code запускать код из глобального каталога. | by Emil Garipov

Настройка файла settings.json

Настройка конфигурационного файла виртуального окружения

Запуск кода Visual Studio на macOS

Установка

Запуск из командной строки

Альтернативные инструкции по эксплуатации

Поддержка сенсорной панели

Защита конфиденциальности Mojave

Обновления

Следующие шаги

Общие вопросы

Почему я вижу «Visual Studio Code запрашивает доступ к вашему календарю».

VS не обновляет

Работает ли VS Code на компьютерах Mac M1?

Учебное пособие по началу работы для Python в Visual Studio Code

Предварительные требования

Установите код Visual Studio и расширение Python

Установить интерпретатор Python

Окна

macOS

Linux

Другие опции

Проверьте установку Python

Запустить VS Code в папке проекта (рабочей области)

Выберите интерпретатор Python

Создайте файл исходного кода Python Hello World

Запустите Hello World

Настроить и запустить отладчик

Установить и использовать пакеты

Следующие шаги

Запуск кода Visual Studio в Windows

Установка

Настройка пользователя и системы

32-битные версии

Обновления

Подсистема Windows для Linux

Последняя сборка Windows

Windows как машина разработчика

Новый терминал Windows

Следующие шаги

Общие вопросы

Какие аргументы командной строки поддерживаются программой установки Windows?

Прокрутка медленная и неровная

У меня проблемы с установщиком

`Цикл разработки быстрого редактирования и обновления`

`Расширенная отладка`

`Отладка проблем с визуальной компоновкой`

`Отладка внешних библиотек`

`Советы по редактированию кода Flutter`

`Ассисты и быстрые исправления`

`Фрагменты`

`Сочетания клавиш`

`Горячая перезагрузка против горячего перезапуска`

`Поиск и устранение неисправностей`

`Известные проблемы и отзывы`

`Разработка Python в Visual Studio Code - Настоящий Python`

`Установка и настройка кода Visual Studio для разработки на Python`

`Расширения для разработки на Python`

`Файлы конфигурации кода Visual Studio`

`Начать новую программу Python`

`Ввод кода Python`

`Запуск кода Python`

`Поддержка Python Linting`

`Редактирование существующего проекта Python`

`Поддержка тестирования`

`Поддержка отладки`

`Интеграция с Git`

`Заключение`

`Visual Studio может это сделать? - Smashing Magazine`

`Об авторе`

`От веб-приложений к настольным приложениям`

`Интерактивная площадка`

`Лигатуры шрифтов`

`Раскладки клавиатуры`

`Settings Sync`

`Emmet`

`Intellisense в файлах JSON`

`Type Check Your JavaScript`

`Prettier`

`Терминальный доступ`

`Live Share`

`Интеграция с Git`

`Нулевая конфигурация Node.js Запуск и отладка`

`Точки останова по столбцу`

`Сборка, запуск, отладка и развертывание Docker`

`Составные конфигурации запуска`

`Администрирование MongoDB`

`Развертывание приложений`

`Да, VS Code может это сделать`

`Дополнительные ресурсы`

`- vscode-docs`