Настройка visual studio code: Редактор кода Visual Studio Code. Самый подробный гайд по настройке и установке плагинов для начинающих

Содержание

Редактор кода Visual Studio Code. Самый подробный гайд по настройке и установке плагинов для начинающих

Бесплатный, мощный, очень популярный, с кучей дополнений, да что там говорить, сам Фейсбук выбрал его в качестве основного редактора!


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

Если больше интересен редактор кода Sublime Text 3 по нему статья тут https://habr.com/ru/post/458206/

Содержание:




Удаление


Если ты уже пользуешься VS Code, но решил начать с чистого листа, то я покажу, как удалить программу полностью, включая все настройки и плагины. Кроме того, что программу нужно удалить из панели управления Windows, нужно еще перейти на Диск C > Пользователи > Твое имя пользователя и здесь удалить папку .vscode

В строке пути нужно дописать AppData, далее переходим в папку Roaming и здесь нужно удалить папку Code.

Установка


Отлично, теперь мы можем установить программу. Переходим на сайт code.visualstudio.com, секция Download. Здесь есть версия под Mac, Linux. Меня интересует Windows. Нажимаем и скачиваем себе на ПК. Кстати, сайт программы очень полезный, поэтому советую его изучить.

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

Запуск на слабой машине


Когда программа установлена, можем ее запустить. Но запустится она не на каждом компьютере. Дело в том, что программа достаточно ресурсоемкая. Поэтому на слабой машине можно получить такой результат: вместо интерфейса программы черный экран, а процессор потеет на все 100%. Но выход есть — необходимо открыть контекстное меню ярлыка программы и дописать в пути к файлу вот такой флаг: —disable-gpu

Отлично, теперь программа запустится даже на калькуляторе.

Установка языка


Программа запущена и мы можем приступить к знакомству с ней. А чтобы знакомится было проще, я установлю русский язык. Для этого я щелкаю на иконку расширений, В поле поиска начинаю писать russian, пока не увижу пакет Russian Language Pack for Visual Studio Code.

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

Экран Приветствия


Боковую панель я пока скрою, мы еще не раз к ней вернемся.
Первое, что мы видим — это экран приветствия. Здесь есть пункт, с помощью которого мы можем импортировать все настройки, клавиши из уже установленных редакторов, например Vim, Sublime, Atom и другие.

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

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

Интерфейс из коробки


Лень читать? Тут видео версия.

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

Вызовем окно Общие сведения об интерфейсе и посмотрим основные элементы программы.

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

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

Строка состояния


Проблемы

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

Чтобы открыть панель, нужно щелкнуть на эти иконки либо зажать Ctrl+Shift+М, здесь нам будет выводиться сам текст сообщений о проблемах.

В панели можно отфильтровать эти сообщения, свернуть их, развернуть всю панель на весь экран или закрыть ее.

Консоль отладки

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

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

Терминал

Последняя вкладка в этой панели — встроенный терминал. Вызвать его можно зажав Ctrl+`.

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

Например, у меня установлен GitBash. Выбрав его, добавляем новое окно терминала, у меня откроется именно этот интерфейс.Традиционно здесь можно развернуть панель на весь экран и закрыть ее.

Уведомления

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

Также в панели состояния будут появляться множество других элементов.

Контекстное меню

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

Также в этом же контекстном меню можем скрыть эту строку полностью.

Панель действий


По умолчанию в левой части редактора расположилась панель действий с 6 элементами:
  1. Проводник, он же встроенный файл менеджер;
  2. Поиск;
  3. Система управления контролем версий;
  4. Запуск и отладка приложений;
  5. Установщик различных дополнений — наш редактор;
  6. Внизу шестеренка, кликнув на которую мы увидим меню основных настроек программы.

Проводник

Начнем с Проводника, открыть его можно кликнув на иконку либо зажав Ctrl+Shift+E.

Очень удобно, что при наведении на иконку редактор подсказывает нам сочетание клавиш.

Тут мы видим 3 основные вкладки:

  1. Открытые редакторы — здесь будет список открытых для редактирования файлов.
  2. Вкладка с папками, проектами. Сейчас у нас нет открытых папок.
  3. Структура, — сейчас тут ничего нет, к ней мы вернемся позже.

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

Давай добавим в редакторе пустую папку нашего будущего проекта. Для этого нужно кликнуть Открыть папку либо просто перетащить ее в это поле.

Сейчас у нас появилась пустая папка hello_vscode, а также некоторые элементы управления:

  • Создать файл;
  • Создать папку;
  • Обновить все файлы и папки;
  • Свернуть все в проводнике.

Давай создадим некоторые файлы, которые нам нужны для проекта. Нажимаем Создать файл, пишем например Index.html. Далее мы можем создать папку css и в ней создать файл style.css. Очень удобно пользоваться этим встроенным файл менеджером.

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

Теперь мы можем перейти в Index.html и написать туда что-то интересное, например “Hello VC Code”.

Подсветка синтаксиса


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

Этот список не может включать в себя абсолютно все. Например, если мы работаем с файлом .kit. Давайте создадим index.kit и скопируем туда наш код. Мы увидим, что подсветки никакой нет, а вместо элемента html мы видим надпись простой текст. Что делать в этом случае? Нам нужно кликнуть на простой текст и тут у нас есть выбор — вместо автоматического обнаружения мы можем попробовать поискать дополнения для подсветки синтаксиса именно для файлов .kit.

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

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

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

В итоге у меня останется только папка с проектом.

Поиск


Поиск (Ctrl+Shift+F) — штука нужная. Пишем слово hello, которое мы указывали в нашем html файле. Поиск его сразу же нашел, подсветил, показал в каком файле. Тут же можно заменить это слово на какое-то другое.

Здесь удобно нам все это показывает, нажав здесь на иконку слово будет заменено.

Система управления контролем версий


Открыть вкладку можно кликнув на иконку либо зажав Ctrl+Shift+G. Для тех, кто уже знаком с системами контроля версий, например Git, тот оценит эту возможность. Немного позже я покажу как связать свой локальный проект с репозиторием на GitHub.

Отладка приложения


Следующий элемент панели действий — это Отладка приложения. Этот инструмент как самостоятельно так и с помощью сторонних плагинов позволяет нам анализировать выполнение того или иного программного кода.

Например, у нас есть некий javascript код, и для того, чтобы запустить отладку, мы можем нажать на кнопку здесь либо нажать F5.

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

Расширения


Тут у нас целый склад расширений и плагинов для нашего редактора. Мы уже использовали эту вкладку для установки языкового пакета. Кликаем на иконку либо зажав сочетание клавиш Ctrl+Shift+X мы увидим поле поиска расширений и три дополнительных вкладки:
  • Включено — выводятся все установленные расширения;
  • Рекомендуемые;
  • Расширения, которые установлены, но отключены.

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

Настройки


На панели действий у нас остался еще один элемент — шестеренка — меню основных настроек. Здесь мы можем вызвать палитру команд кликнув тут или Ctrl+Shift+P. Откроется такой блок, где мы можем найти и выполнить любую команду редактора или установленных плагинов.

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

Заканчивая с Панелью действий, стоит отметить, что можно быстро вызвать последнюю открытую вкладку сочетанием Ctrl+B. Также скрыв контекстное меню можно скрыть ненужный элемент. Например, Запуск и Отладка я скрою. В этом же контекстном меню можно скрыть всю панель действий целиком.

Область редактора


Лень читать? Тут видео версия.

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

Здесь есть дополнительное меню для управления всеми файлами.

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

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

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

Что тут можем мы настроить?


Как я уже показывал, окно редактора можно разделить на несколько частей, это удобно при работе с разными файлами. Для того, чтобы посмотреть разные варианты, нужно перейти в Вид > Макет редактора. Здесь есть куча вариантов, например две строки и мы можем какой-то файл переместить сюда и работать так. Также есть вариант Сетка 2х2. То есть, можно работать одновременно с 4 файлами.

Также можно быстро оформить нужное положение файлов, просто перетаскивая их. Я сразу сформировал себе нужный макет для работы. Также есть возможность настроить вид всей области редактора. Откроем Меню > Вид > Внешний вид.

Снизу есть возможность регулировать масштаб всей программы. Не путайте с размерами шрифта. Удобно пользоваться сочетаниями клавиш. Например, для увеличения элементов я нажимаю Сtrl+, для уменьшения — Ctrl-, для сброса настроек — Ctrl+0.

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

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

Режимы экрана

Сверху есть полноэкранный режим при нажатии на F11. Скроется верхнее меню, кнопки управления окном программы.

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

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

Чтобы выйти из него, нажимаю Escape.

Перенос текста

Далее в самом меню Вид мы можем включить или выключить перенос текста, это можно сделать зажав Alt + Z. Что это значит? Например, у нас есть очень длинный текст, который не помещается в область кода и появляется горизонтальная прокрутка. Если это кажется неудобным, можно нажать Alt + Z весь наш текст перенесется, чтобы поместиться в область кода.

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

Цветовая схема


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

Если ни одна из этих тем не подходит, мы можем установить свою. Для этого я возвращаюсь к вкладке Расширения, в поле поиска пишу название своей темы — SpaceOceanKit. Нахожу, нажимаю Install. Далее у меня есть выбор какую тему мне выбрать и я выбираю именно ее.

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

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

Иконки


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

Также установить дополнительные пакеты значков. Например, Matherial Icon Theme.

Параметры


Дополнительно настроить комфорт работу с кодом и в целом с редактором можно в Параметрах программы. Для этого переходим в Управление > Параметры или зажимаем Ctrl+,

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

Автосохранение

Первая полезная опция — автосохранение файла. Для новичков очень крутая опция. Новички часто подходят ко мне с проблемой “Почему у меня ничего не работает?” Я смотрю, а там не сохранен файл.

Чтобы этого не происходило, здесь можно поменять значение на одно из трех:

  1. afterDelay — файл будет сохраняться после некоторой задержки, которую можно настроить сразу здесь ниже. При выборе этой опции при редактировании файла он сразу будет сохраняться, жирная точка даже не будет появляться.
  2. onfocusChange — файл будет сохранен, когда мы перейдем на другой файл
  3. onWindowChange — когда мы перейдем совсем на другую программу, тогда файл будет сохранен автоматически.

Выбирайте для себя удобную опцию и двигаемся дальше.

Отображение кода

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

Я настраиваю размер отступа при табуляции. По умолчанию она составляет 4. Как по мне, слишком широкое поле при одном Tab, поэтому я меняю на значение 3, так мне кажется более компактно. Ты же указывай комфортное для тебя значение.

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

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

А то, каким образом определять вставку символов для новых открытых файлов отвечает опция Detect Indentation. Я галочку уберу, потому что хочу, чтобы для всех файлов работали именно мои настроенные параметры.

Скрыть подсказки

Ранее я показывал, что при наведении на элемент в коде всплывают подсказки, часто это может раздражать. Чтобы подсказки убрать, существует параметр Hover Enabled. Галочку можно снять и подсказки пропадут.

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

Мы можем сделать его полупрозрачным, ставятся значения rgba или вообще поменять цвет на другой. Если галочку Hover Enabled уберем, то эта функция тоже пропадает.

За вывод отвечает параметр Color Decorators, если он не нужен, галочку можно снять и никаких квадратиков цвета не будет.

Mouse Wheel Zoom — поставив галочку, мы сможем в редакторе изменить размер шрифта зажав Ctrl и покрутив колесико мыши.

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

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

Следующая группа настроек отвечает за форматирование, которое уже встроено в редакторе VC Code. Что такое форматирование? Например, мы пишем структуру, в ней еще одну структуру, но по какой-то причине съехала табуляция. При зажатии Shift + Alt + F у нас все выстроится как надо.

Вернемся к нашим настройкам. Здесь мы можем поставить три галочки:

  1. Format On Paste — форматирование будет произведено автоматически при вставке кода.
  2. Format On Save — форматирование будет произведено в момент сохранения файла.
  3. Format On Type — форматирование будет автоматическим, то есть мы будем печатать и будет сразу все форматироваться.

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

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

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

Для быстрого доступа ко всему, что мы настроили, зажимаем Ctrl+Shift+P и в строке поиска пишем Settings, пока не увидим Settings (JSON). Нажимаем и перед нами появятся наши настройки, их тут же можно менять.

В этом же файле будем настраивать и новое расширение.

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

Плагины


Лень читать? Тут видео версия.

Emmet

— этот плагин уже встроен в редакторе VS Code из коробки. И вправду, сегодня сложно себе представить жизнь без Emmet. Супер ускоряет набор кода. Например, именно благодаря ему, я так быстро создал начальный код для HTML файла написав только восклицательный знак и нажав Tab.

Вот еще пример. Нам нужно создать div с классом block для этого я пишу .block и нажимаю Tab. Готово!

Или например посложнее — нам нужно создать маркированный список на 10 элементов. Пишем ul>li*10 Tab. Готово!

То же самое применимо и к файлам стилей. Например, для тега body я хочу задать размер шрифта 20 пикселей. Для этого мне достаточно написать fz20. Нажав Tab я получу уже готовый параметр.

Лучше ознакомиться с возможностями Emmet можно на сайте этого дополнения.

Сниппеты

Но еще круче создавать свои сокращения-сниппеты для быстрого вызова того иного куска кода.
Переходим в Управление > Пользовательские фрагменты кода. Здесь есть выбор:
  • Создать сниппеты для конкретного языка;
    Создать сниппеты для всех языков, но для конкретного проекта;
    Создать глобальные сниппеты для всех языков и для всех проектов.

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

    Набираю my, нажимаю и открывается файл my.code-snippets. Здесь есть всякая информация закомментированная, а также пример. Я его раскомментирую. Здесь заготовка сниппета для языка JavaScript.

    Надпись означает название самого сниппета. Параметр scope — указываем языки для которых этот сниппет будет применяться. Это необязательный параметр, можно его убрать и сниппет будет применяться для всех языков. Префикс — это сокращения, то есть что мы будем набирать, чтобы вывелся нужный отрезок кода. В поле body мы и пишем наш кусок кода. Здесь будет выводиться console.log Ниже description, здесь можем указать описание.

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

    Пишу — “Внешний отступ”, это же можно добавить и в описание. Языки вообще уберу, а префикс я поставлю например mm. В body нужно задать параметр «margin: 0px, 0px, 0px 0px;», я хочу чтобы при наборе mm у меня вывелся такой параметр. Сохраняем Ctrl+S и проверим.

    Переходим в наш style.css набираем mm и нажимаем Tab. Видим, что наш кусок кода, готовый параметр сразу появился.

    Можем проверить тот снипет, который был задан изначально в качестве примера. Переходим в файл js, набираем log Tab.

    Здесь обращаю внимание, что курсор уже моргает в нужном месте, за это отвечают переменные $1 $2. Изначально курсор будет в положении $1. Если мы нажмем Tab, то курсор перескочит в $2. С помощью этих переменных можно настраивать свой сниппет.

    Я думаю, мне не нужено объяснять, какой скорости можно добиться, грамотно настроив свои сниппеты.

    Продолжаем установку плагинов. Зажимаем Ctrl+Shift+X и переходим во вкладку с расширениями.

    Live Sass Compiler


    Идеальное для тех, кто работает с препроцессорами SASS/SCSS. Ищем наше дополнение и нажимаем Install. Индикатор сверху показывает, что идет установка, Отлично, расширение установлено. Получаем информационное окошко, что все окей.

    В строке состояния появляется кнопочка Watch Sass. И сейчас мы будем этот плагин настраивать.

    Создадим папку с нашими scss файлами, так ее и назовем. Внутри создадим style.scss.
    Напишем код:

    body{
    	font-size: 20 px;
    	div{
    		font-size: 10 px;
    	}
    }		
    

    У нас пока ничего происходить не будет, но мы можем включить кнопку Watch Sass и плагин начал следить за нашими scss\sass файлами. Рядом с ним автоматически скомпилировались два файла style.css и style.css.map.

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

    Удалим старые файлы и перейдем к настройкам. Зажимаем Shift+Ctrl+P, вызываем наш Settings (JSON). Можем вставить следующую настройку, обязательно ставим запятую и вставляем две настройки.

    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.formats": [
    	{
    		"format": "expanded",
    		"autoprefix": "last 5 versions",
    		"extensionName": ".css",
    		"savePath": "css"
    	}
    ],
    

    Я выключаю генерацию файла-карты, мап-файла. Следующие настройки для собственно самого компилятора. «format» — можно указать, каким именно способом будет генерироваться scss файл — развернутый, ужат, минифицирован и т.д.

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

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

    По поводу файлов, которые мы будем включать в style.scss. Мы знаем, что файлы в scss можно импортировать какие-то другие файлы. Пишем, как обычно — import «header.scss»

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

    Что происходит? Когда я сохраняю header.scss у меня создается файл header.css. Но мне нужно, чтобы у меня был один файл style.css, который включает в себя и header, и многие другие файлы, которые я туда подключу. Удаляем header, это неправильно. Чтобы этого не было, мне нужно переименовать файл header.scss, указать вначале имени подчеркивание, а здесь при подключении указать подчеркивание и вообще убрать расширение.

    Компилятор будет уже сам понимать, что с ним делать. В итоге, я сохраняю, у меня уже не создается отдельный файл header.css, но стили его собраны в одном файле. Теперь работать очень классно 🙂

    Live Server


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

    В поиске набираем его название, у нас он уже есть, установлен автоматически вместе с Live Css Compiler. Об этом говорит кнопку в строке состояния Go Live. Мы работаем с нашими файлами, когда мы хотим увидеть результат, перейдя в index.html нажимаем на Go Live и у нас запускается Браузер.

    Я редактирую свою html файл, пишу “Hello”, сохраняю, нажимаю GoLive и сразу вижу результат в браузере.

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

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

    SCSS IntelliSense


    Покажу еще несколько интересных плагинов для препроцессора SaSS. Установим SCSS IntelliSense, этот плагин подсказывает нам интересные штуки во время работы с scss, также удобно при работе именно с этим синтаксисом.

    SCSS Formatter


    Форматирование можно отдельно установить для конкретного синтаксиса. Этот плагин форматирует sсss файлы. Также его можно подстроить.

    Auto Complete Tag


    Мегаполезный плагин в который входят Auto Rename Tag и Auto Close Tab. Несмотря на то, что VS Code умеет закрывать теги, плагин Auto Close Tab — умеет закрывать теги не только в html, но и в многих других языках. Auto Rename Tag — изменяет закрывающий элемент автоматически, если переименовать открывающий. Например, мне нужно изменить открывающий элемент на span и мы видим, что закрывающий элемент изменит название автоматически.

    Bracket Pair Colorizer


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

    Indent Rainbow


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

    Better Comments


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

    Ставим для чего-то очень важного —! — текст окрашен в красный, для списка ToDO — оранжевый, для вопроса —? — синий.

    Все цвета можно настроить, есть готовый код с настройками в информации, его можно перенести и там подправить цвета под наши задачи.

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

    BEM Helper


    Это помощник при работе с методологией BEM. Он умеет вставлять сразу новый элемент по методологии bem, учитывая родителя, учитывая блок. Может вставлять модификатор, помимо всего умеет формировать файл стилей, будь-то css или scss файл на основе bem-разметки в html коде.

    Попробуем. Нажимаем Alt+B+E, у нас вставился объект, учитывая класс родителя, клас блока.

    Как менять сочетания клавиш?

    На примере этого плагина покажу как можно менять сочетания клавиш.
    Допустим эти сочетания клавиш нас не устраивают. Мы копируем имя плагина, переходим в Управление > Сочетание клавиш и здесь ищем BEM Helper.

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

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

    eCSStractor


    Плагин, который помогает копировать классы из html в css\scss\sass. Установим его и сразу создадим сочетания клавиш, чтобы делать все быстро. Переходим в Управление > Сочетание клавиш, ищем наш плагин eCSStractor, видим несколько команд. Меня интересует команда eCSStractor Run (With BEM Nesting).

    Нажимаем на команду, на плюсик, придумываем свободное сочетание Ctrl+Alt+1, нажимаем Enter, наши горячие клавиши присвоились.

    Тестируем: переходим в наш html файл, выделяем блок с классами, нажимаем Ctrl+Alt+1, получаем сообщение, что наши классы скопировались.

    Переходим в файл стилей и вставляем. Видим, что все работает.

    Что делать, если нам нужно скопировать просто классы, но без BEM? Возвращаемся сочетания клавиш и нам нужно назначить сочетание Ctrl+Alt+2 например.

    Тестим, выделяем, вставляем. Готово, теперь у нас есть две комбинации клавиш — по BEM и без BEM.

    CSS Navigation


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

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

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

    Это же окошко можно вызвать сочетанием Alt + F12

    Image Preview


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

    Debugger for Chrome


    Для отладки кода можно использовать не встроенный инструмент, а этот плагин и с его помощью делать отладку какого-то скрипта. При нажатии на F5 мы можем выбрать Chrome, вся отладка будет проводиться на основе этого браузера, Нужно его дополнительно настроить и пользоваться.

    Vscode Google Translate или Google Translate


    Позволяет переводить выделенный текст с одного языка на другой. Для его настройки переходим в плагин, ищем команду translate text.

    Переходим в сочетания клавиш, вставляем команду, находим ее и задаем сочетание клавиш, допустим Shift+Alt+T.
    Возвращаемся в наш html файл, выделяем слово hello, зажимаем Shift+Alt+T и получаем список языков. Далее выбираем язык, на который нужно перевести и получаем перевод.

    Если нам нужно переводить только с русского на английский, то можем зайти в Параметры > Расширения, найти этот плагин, указать основной язык, на который нужно переводить, например английский.

    Возвращаемся в сочетание клавиш, сбросить старое сочетание клавиш и добавляем это сочетание клавиш на эту команду (Preffered). У нас есть русское слово, зажимаем Shift+Alt+T и сразу получаем английское. Я этим пользуюсь постоянно и поэтому рекомендую этот плагин.

    Project Manager


    Незаменим, если ты работаешь с множеством проектов, папок и т.д. Установим его и в панели действий появится иконка папочек. Это и есть наш Project Manager.

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

    Settings Sync


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

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

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

    Нужно сохранить все то, что мы сегодня настроили. В информации о плагине есть сочетание Shift+Alt+U.

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

    Ну а сейчас я полностью удалю программу и попробую получить все настройки заново.

    У меня чистая программа, теперь мне нужно установить плагин Settings Sync. Устанавливаю, далее нужно залогиниться с помощью GitHub. Здесь я могу выбрать свой существующий ключ.

    Я его выбираю. Мне нужно все мои настройки получить, смотрю, какое сочетание клавиш мне для этого нужно — Shift+Alt+D.

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

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

    Вот общий (более широкий) список полезных плагинов:
    Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
    Settings Sync

    Связать с GITHub


    Лень читать? Тут видео версия.

    Внимание! На ПК должен быть установлен Git.

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

    Тут мы видим изменения которые нам нужно применить. Жмем на +, чтобы применить сразу все изменения.

    Нужно написать комит, жмем на галочку, пишем что-нибудь, нажимаем на Enter. Далее нужно создать репозиторий на GitHub.Переходим по ссылке Создать новый репозиторий, пишем название, жмем кнопку Создать. Даже нас интересуют эти две команды:

    git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git
    git push -u origin master

    Копируем, переходим в редакторе и открываем терминал. Важно, чтобы мы находились внутри в папке проекта. Если это не так, нам нужно перейти в проводник, вызвать контекстное меню, указать пункт Открыть терминал. Вставляем наши две команды, нажимаем Enter.

    Загрузки, готово. Теперь наш проект полностью связан с репозиторием Git. Если мы что-то начнем менять, мы увидим что здесь у нас появится значок 1, то есть изменен 1 файл в системе версий, опять нужно применить изменения, написать комит. Достаточно нажать Меню > Отправить и наш проект загрузится на репозиторий.

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

    Дополнительно можно установить плагин GitLens, который существенно расширяет возможности системы управления контролем версий.

    Все это только инструменты, и по большому счету абсолютно не важно, в каком именно редакторе ты работаешь — главное, — это твое мастерство.

    Обучайся, развивайся, и помни — живи, а работай в свободное время!

    По материалам выпуска VS Code настройка установка плагины на канале «Фрилансер по жизни»

Обзор Visual Studio Code — Блог HTML Academy

Visual Studio Code — бесплатный и очень популярный редактор кода от Microsoft.

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

Скачать VS Code — https://code.visualstudio.com

Полезные материалы

Первый запуск

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

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

Посмотрим интерфейс редактора на примере одного из проектов.

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

Поиск

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

Git

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

Настройка Git в Visual Studio Code подробна описана в официальной документации.

Отладчик

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

Расширения

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

Главное меню

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

Edit. Через этот пункт можно работать с открытым файлом — отменять последние действия, производить поиск по файлу.

Selection. В пункте Selection можно найти команды для выделения нужного участка кода.

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

Go. Через пункт Go можно перемещаться между открытыми файлами и по документу. Также можно разделять рабочую область на части. Это удобно для работы на большом мониторе — можно держать в одном месте разметку и файлы стилей.

Debug. Здесь собраны команды для отладки скриптов.

Terminal. В редактор встроен терминал (он же командная строка). Он может выполнять как отдельные задачи, так и выводить командную строку в интерфейс редактора.

Help. В этом пункте собраны справочные материалы по работе редактора, его основным функциями и общая информация о программе.


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

VS Code — инструмент фронтендера

Пройдите обучение в HTML Academy, чтобы работать с редактором кода и другими инструментами как профессионал.

Узнать больше

Python + Visual Studio Code = успешная разработка

Суперсет Python и Visual Studio Code в действии! Полное руководство по настройке и началу работы на лучшем языке в лучшем редакторе.

VS Code от Microsoft – легкий и удобный редактор кода, доступный на всех платформах и невероятно гибкий. Это отличный выбор для программирования на Python.

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

Статья предназначена для программистов, уже имеющих опыт работы с Python и установивших на свою рабочую машину интерпретатор этого языка программирования (Python 2.7, Python 3.6/3.7, Anaconda или другой дистрибутив).

Установка Python – дело несложное: здесь вы найдете подробное пошаговое руководство для всех популярных ОС. Помните, что в разных операционных системах интерфейс VS Code может немного различаться.

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

Сразу же отметим, что VS Code не имеет практически ничего общего с его знаменитым тезкой Visual Studio.

Редактор очень легко установить на любую платформу: на официальном сайте есть подробные инструкции для Windows, Mac и Linux.

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

VS Code + Python

С 2018 года есть расширение для Python. Наблюдать за развитием отношений этой пары можно в блоге Microsoft.

Основные возможности редактора:

А вот пара полезных подборок для прокачки Python-скиллов:

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

И еще несколько крутых возможностей для полного счастья:

  1. GitLens – множество полезных функций Git прямо в редакторе, включая аннотации blame и просмотр репозитория.
  2. Автосохранение (FileAuto Save) и удобная настройка его задержки.
  3. Синхронизация параметров редактора между различными устройствами с помощью GitHub.
  4. Удобная работа с Docker.

Чтобы найти и установить необходимые расширения и темы, нажмите на иконку Расширения на левой панели. Можно искать по ключевым словам и сортировать результаты поиска.

Найдите расширение Python и установите его, чтобы продолжить настройку редактора.

Файлы конфигурации

В Visual Studio Code вы легко можете настроить все под себя. Здесь есть параметры пользователя, которые являются глобальными, и параметры рабочей области – локальные для конкретных папок или проектов. Локальные настройки сохраняются в виде .json-файлов в папке .vscode.

Новый проект на Python

Чтобы открыть новый файл, нужно зайти в меню Файл и выбрать пункт Создать или нажать горячую комбинацию клавиш Ctrl+N.

Еще в редакторе есть полезная палитра команд, которую можно вызвать сочетанием Ctrl+Shift+P. Для создания нового файла введите в появившемся поле File: New File и нажмите Enter.

Какой бы способ вы ни выбрали, перед вами должно открыться вот такое окно:

Здесь уже можно вводить код вашей программы.

Начинаем кодить

Для демонстрации возможностей редактора напишем «Решето Эратосфена» – известный алгоритм для нахождения простых чисел до некоторого предела. Начнем кодить:

sieve = [True] * 101
for i in range(2, 100):

На экране это будет выглядеть примерно так:

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

Без паники! Просто сейчас редактор не знает, с каким файлом он имеет дело. Смотрите, у него еще нет названия и расширения – только какое-то неопределенное Untitled-1. А в правом нижнем углу написано Plain Text (простой текст).

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

  • меню: Файл — Сохранить
  • горячая комбинация: Ctrl+S
  • палитра команд: File: Save File

Дайте файлу имя sieve.py.

Теперь редактор понял, что имеет дело с кодом на Python, и исправился:

Так гораздо лучше! В правом нижнем углу появилась надпись Python, значит все работает правильно.

Если на вашем компьютере установлено несколько интерпретаторов языка (Python 2.7, Python 3.x или Anaconda), вы можете выбирать нужный. Для этого кликните на индикаторе языка (внизу в левой части экрана) или наберите в палитре команд Python: Select Interpreter.

По умолчанию VS Code поддерживает форматирование с использованием pep8, но вы можете выбрать black или yapf, если хотите.

Допишем код алгоритма:

sieve = [True] * 101
for i in range(2, 100):
if sieve[i]:
print(i)
for j in range(i*i, 100, i):
sieve[j] = False

Если вы будете вводить его вручную (без copy-paste), то сможете увидеть IntelliSense редактора в действии.

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

Запуск программы

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

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

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

Линтинг кода

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

  • flake8
  • mypy
  • pydocstyle
  • pep8
  • prospector
  • pyllama
  • bandit

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

Обратите внимание, что линтер настраивается для конкретной рабочей области, а не глобально.

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

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

С редактором можно работать прямо из консоли, открывая и создавая файлы простой командой code filename.py.

Посмотрим, на что способен VS Code на примере уже готового проекта. Это библиотека для анализа уравнений, основанная на «алгоритме маневровой станции» (shunting-yard algorithm) Дийкстры. Вы можете клонировать этот репозиторий, чтобы начать работу.

Открыть созданную локально папку в редакторе можно из терминала:

cd /path/to/project
code .

VS Code умеет работать с различными средами:  virtualenv, pipenv или conda.

Также вы можете открыть папку прямо из интерфейса редактора:

  • меню: Файл — Открыть папку
  • горячие клавиши: Ctrl+K, Ctrl+O
  • из палитры команд: File: Open Folder

Вот так выглядит открытый проект:

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

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

Тестирование

Грамотное программирование на Python помимо собственно написания кода включает также его тестирование.

Visual Studio Code умеет автоматически распознавать тесты в unittest, pytest или Nose. В нашем проекте есть модульный тест, который можно использовать для примера.

Чтобы запустить существующие тесты, из любого файла Python вызовите правой кнопкой мыши контекстное меню и выберите пункт Запустить текущий тестовый файл.

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

Теперь можно запустить все тесты, кликнув на Run Tests в строке состояния или из палитры команд.

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

Результаты тестов отображаются во вкладке Output (раздел Python Test Log выпадающего меню).

Посмотрите также:

Отладка кода

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

  • Автоматическое отслеживание переменных
  • Отслеживание выражений
  • Точки прерывания
  • Инспекция стека вызовов

Все эти данные можно найти во вкладке Debug левой панели.

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

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

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

VS Code создаст и откроет файл .vscode/launch.json, в котором можно настроить конфигурации Python, а также отладку приложений.

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

Посмотрите также:

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

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

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

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

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

Все измененные файлы помечены маркером M, а неотслеживаемые – U. Символ + подготавливает файлы к коммиту. Чтобы сохранить изменения, введите сообщение и нажмите галочку.

Локальные коммиты можно отправить на GitHub прямо из редактора. Выберите в меню пункт Sync или кликните по значку Synchronize Changes в статус-баре в самом низу редактора (рядом с индикатором текущей ветки).

Visual Studio Code + Python = довольный разработчик

Visual Studio Code – один из самых крутых редакторов кода и замечательный инструмент для разработки. Редактор из коробки предлагает множество полезных возможностей и гибко подстраивается под все ваши потребности. Программирование на Python становится проще и эффективнее.

А какой редактор (или полноценную IDE) для разработки на Python используете вы?

Оригинал статьи: Python Development in Visual Studio Code

Использование Visual Studio Code для удаленной разработки с помощью плагина Remote-SSH

Введение

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

Есть множество причин, по которым это может быть полезно для вас. Например, у вас может быть рабочая станция Windows, и вы хотите разрабатывать в Windows, но ваш код в конечном счете будет запускаться на Linux. Для обработки вам может потребоваться больше оперативной памяти или мощности процессора, чем у вашего текущего компьютера, или вы не захотите хранить код на личном компьютере из-за политики компании или желания оставить вашу рабочую станцию чистой.

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

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

Для прохождения этого обучающего модуля вам потребуется следующее:

  • Локальный компьютер для разработки, работающий под управлением Windows, MacOSX или Linux. Данный обучающий модуль не предназначен для устройств под управлением ChromeOS.
  • Среда разработки Visual Studio Code, которую вы можете загрузить и установить с официального сайта.
  • Сгенерированная пара ключей SSH:
  • Один сервер Ubuntu 18.04, настроенный в соответствии с руководством по начальной настройке сервера Ubuntu 18.04, включая пользователя с разрешениями sudo без прав root и брандмауэр.

Шаг 1 — Установка плагина Remote-SSH

Extensions Marketplace — возможность загружать поддерживаемые и сторонние расширения для самых разных инструментов и языков программирования. Здесь вы найдете плагин Remote-SSH, после чего установите его.

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

Также вы можете получить доступ к этому разделу, нажав Ctrl+Shift+X. После открытия этой страницы вы увидите предлагаемые плагины для загрузки и установки.

После открытия Extensions Marketplace введите Remote-SSH в панели Поиск расширений в Marketplace. Когда найдете плагин, выберите его и нажмите зеленую кнопку Установить для установки расширения.

Расширение установлено. Далее вы настроите расширение, чтобы подключиться к серверу.

Шаг 2 — Настройка плагина Remote-SSH и подключение к серверу

Теперь, когда у вас установлен плагин, вы можете настроить его для подключения к серверу. Для этого вам потребуются следующие сведения:

  • IP-адрес сервера или имя хоста.
  • Имя пользователя для подключения.
  • Закрытый ключ, который вы будете использовать для аутентификации пользователя.

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

Теперь, когда у вас установлен плагин Remote-SSH, вы увидите небольшую зеленую коробку в нижнем левом углу интерфейса Visual Studio Code. Если навести указатель мыши на это поле, появится всплывающее сообщение Открыть удаленное окно. Кнопка выглядит как математический знак «больше» чуть ниже знака «меньше» ><, как на следующем изображении:

Нажмите кнопку, и диалоговое окно отобразится наверху в центре. Выберите Remote-SSH: открыть файл конфигурации… из списка:

Следующая подсказка спросит, какой файл конфигурации вы хотите открыть. Если вы используете Windows, то увидите два местоположения: одно в персональном каталоге пользователя и одно в месте установки SSH. Используйте файл в каталоге пользователя при настройке сервера.

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

config

Host my_remote_server
    HostName your_server_ip_or_hostname
    User sammy
    IdentityFile /location/of/your/private/key

Вот как работает этот файл конфигурации:

  • Host: указывает имя вашего хоста. Это позволяет использовать короткое имя или аббревиатуру вместо полного IP-адреса либо имя хоста при подключении к серверу.
  • HostName: фактическое имя хоста сервера, которое представляет собой либо IP-адрес, либо полностью квалифицированное доменное имя.
  • User: пользователь, от имени которого вы хотите выполнить подключение.
  • IdentityFile: путь к вашему закрытому ключу SSH. На системах Mac и Linux вы найдете ее в домашнем каталоге в скрытом каталоге .ssh, обычно id_rsa. Если вы используете Windows, у вас будет указано местоположение для сохранения этого файла при его создании с помощью putty-gen.

Определите соответствующие значения в вашем файле и сохраните файл.

Теперь Visual Studio Code настроен и готов подключиться к вашему серверу. Нажмите зеленую кнопку Открыть удаленное окно в нижнем левом углу и выберите Remote-SSH: подключиться к хосту…

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

Если вы впервые подключились к этому серверу с компьютера, скорее всего, вы увидите диалог верификации SSH Fingerprint, как на следующем изображении:

Это необходимо, чтобы убедиться, что вы действительно подключаетесь к правильному серверу. Вы можете проверить это, войдя на свой сервер вручную и выполнив команду ssh-keygen -l -f /etc/ssh/ssh_host_key.pub для просмотра «отпечатка пальца» сервера. Если отпечаток тот же, что указан в Visual Studio Code, то вы действительно подключаетесь к правильному серверу, т.ч. можете нажать Продолжить.

Visual Studio Code по умолчанию открывает новое окно после создания нового подключения. Появится новое окно с экраном приветствия. Вы узнаете, что подключение прошло успешно, если увидите SSH: your_ip_address_or_hostname в зеленой коробке в нижнем левом углу. Это означает, что Visual Studio Code подключен и связывается с вашим удаленным сервером.

Теперь, когда вы подключены, вы можете выполнять команды и код из редактора.

Шаг 3 — Выполнение кода на удаленном сервере

Плагин Remote-SSH настроен, и теперь можно запустить какой-нибудь код на вашем удаленном компьютере. Откройте окно терминала, выбрав Терминал из панели навигации в верхней части окна Visual Studio, и нажмите Новый терминал. Также вы можете открыть терминал, нажав CTRL+Shift+​​`. Открывшийся терминал находится на вашем удаленном сервере, а не на локальном компьютере.

Когда терминал откроется, дайте следующую команду, чтобы посмотреть IP-адрес вашего сервера, чтобы убедиться, что вы подключены к удаленному серверу:

В своем терминале вы увидите следующее:

Output

1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever preferred_lft forever inet6 ::1/128 scope host valid_lft forever preferred_lft forever 2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000 link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff inet your_server_ip brd your_broadcast_address scope global eth0 valid_lft forever preferred_lft forever ...

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

Добавьте в файл следующие строчки:

hello.py

print("Hello Sammy!")

Для запуска этой программы на вашем сервере откройте терминал в Visual Studio Code из меню навигации, или нажав CTRL+Shift+`. Поскольку этот терминал подключен к вашему удаленному серверу, выполните в терминале следующую команду для выполнения вашей программы hello.py:

Отобразится вывод вашей программы.

Также вы можете выполнить файл из контекстного меню Отладка​​, выбрав Запуск без отладки.

Примечание: Если у вас есть какие-либо расширения разработки, установленные в Visual Studio Code, такие как расширение Python, то вам придется повторно установить эти расширения на вашем сервере при помощи Extension Marketplace. Если вы ранее установили эти плагины в Visual Studio Code, то когда вы снова будете искать их, Marketplace укажет Установить на SSH: hostname. Всегда обращайте внимание, в каком контексте разработки вы находитесь, поскольку в этом месте Visual Studio Code установит ваши плагины и создаст ваши файлы. Если вы попробуете запустить ваш код без установки этих плагинов, то в правом нижнем углу экрана будут появляться диалоговые окна сообщений об ошибках, предлагающие установить их на удаленном сервере. После их установки они, скорее всего, потребуют от вас перезагрузки Visual Studio Code. После перезагрузки он будет продолжать работать на удаленном сервере без необходимости повторно подключаться вручную.

Заключение

Теперь у вас есть Visual Studio Code, настроенный для разработки на удаленном сервере с помощью SSH. Удаленное исполнение при помощи IDE обеспечивает множество преимуществ, в том числе способность быстро тестировать процесс выполнения вашего кода на различных операционных системах и с различными техническими спецификациями оборудования. Если у вас есть подключение к Интернету, вы можете подключаться к вашему серверу и работать над вашим кодом с любого компьютера, а также можете заниматься разработкой в среде Linux, даже если будете использовать Windows в качестве основной операционной системы.

Установка и настройка Visual Studio Code · GitHub

Устанавливаем расширения

Устанавливаем их. Жмём CTRL+P и вводим команды:

  • Babel ES6-ES7 ext install vscode-babel-coloring
  • Debugger for Chrome ext install debugger-for-chrome
  • ESLint ext install vscode-eslint
  • JavaScript (ES6) code snippets ext install JavaScriptSnippets
  • PostCSS syntax ext install PostCSS
  • React Native Tools ext install vscode-react-native
  • vscode-icons ext install vscode-icons
  • yarn Script Runner ext install vscode-yarn-script
  • npm ext install vscode-npm-script

Настраиваем .eslintrc

Создаем файл .eslintrc в папке с проектом. Наполняем его содержимым:

{
  "parser": "babel-eslint",
  "globals": {
    "document": true,
    "window": true,
    "screen": true,
    "If": true
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },
  "extends": "airbnb",
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-first-prop-new-line": ["warn", "multiline-multiprop"]
  }
}

Настраиваем рабочее окружение

Жмём F1, печатаем workspace и жмём Enter. В появившимся окне настроек справа вставляем заготовленные настройки:

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.lineHeight": 22,
  "editor.mouseWheelZoom": true,
  "editor.renderIndentGuides": true,
  "editor.formatOnType": true,
  "editor.formatOnSave": true,
  "files.insertFinalNewline": true,
  "files.eol": "\n",
  "eslint.autoFixOnSave": true
}

В проекте создастся папка .vscode со всеми использованными настройками.

Если нужно использовать пользовательские настройки, то необходимо нажать F1 и напечатая user открыть окно настроек пользователя. Не забывайте, что настройки окружения перезапишут настройки пользователя!

Разрешаем использование декораторов

Создаем конфигурационный файл с названием jsconfig.json и наполняем его следующим содержимым:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Включаем иконки

Жмём F1, печатаем theme и жмём Enter. В появившимся окне выбираем установленные иконки VSCode Icons.

Остальное

По желанию можно настроить цветовые схемы и прочее.

Заключение

Перезагружаем Visual Studio Code. Приятного использования.

Как настроить код Visual Studio для компиляции кода C ++?

Основная проблема заключается в том, что сборка и компоновка программы на C ++ сильно зависит от используемой системы сборки. Вам нужно будет поддерживать следующие отдельные задачи, используя некоторую комбинацию плагинов и пользовательского кода:

  1. Общая поддержка языка C ++ для редактора. Обычно это делается с помощью ms-vscode.cpptools, который, как ожидается, большинство людей также обрабатывает много других вещей, таких как поддержка сборки. Позвольте мне сэкономить вам время: это не так. Тем не менее, вы, вероятно, все равно захотите.

  2. Построить, очистить и восстановить задачи. Здесь ваш выбор системы сборки становится огромным делом. Вы найдете плагины для таких вещей, как CMake и Autoconf (да поможет вам Бог), но если вы используете что-то вроде Meson и Ninja, вам придется написать несколько вспомогательных скриптов и настроить собственный файл «tasks.json» для справиться с этим. Microsoft полностью изменила все в этом файле за последние несколько версий, вплоть до того, как он должен называться, и мест (да, мест), куда он может пойти, не говоря уже о полном изменении формата. Хуже того, они в некотором роде сохранили обратную совместимость, чтобы использовать ключ «версия», чтобы указать, какой вариант вы хотите. Подробности смотрите здесь:

https://code.visualstudio.com/docs/editor/tasks

… но обратите внимание, конфликтует с:

https://code.visualstudio.com/docs/languages/cpp

ВНИМАНИЕ: Во ВСЕХ ОТВЕТАХ НИЖЕ, НИЧЕГО, ЧТО НАЧИНАЕТСЯ С ВЕРСИИ «ВЕРГИЯ» НИЖЕ 2.0.0, УСТАРЕЛО.

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

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
                "file": 1,
                "line": 2,
                "column": 3,
                "severity": 4,
                "message": 5
            }
        }
    },
    {
        "label": "rebuild project",
        "type": "shell",
        "command": "buildscripts/rebuild-debug.sh",
        "args": [],
        "group": {
            "kind": "build",
            "isDefault": true
        },
        "presentation": {
            // Reveal the output only if unrecognized errors occur.
            "echo": true,
            "focus": false,
            "reveal": "always",
            "panel": "shared"
        },

        // Use the standard MS compiler pattern to detect errors, warnings and infos
        "options": {
            "cwd": "${workspaceRoot}"
        },
        "problemMatcher": {
            "owner": "cpp",
            "fileLocation": ["relative", "${workspaceRoot}/DEBUG"],
            "pattern": {
                "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
                "file": 1,
                "line": 2,
                "column": 3,
                "severity": 4,
                "message": 5
            }
        }
    },
    {
        "label": "clean project",
        "type": "shell",
        "command": "buildscripts/clean-debug.sh",
        "args": [],

        "group": {
            "kind": "build",
            "isDefault": true
        },
        "presentation": {
            // Reveal the output only if unrecognized errors occur.
            "echo": true,
            "focus": false,
            "reveal": "always",
            "panel": "shared"
        },

        // Use the standard MS compiler pattern to detect errors, warnings and infos
        "options": {
            "cwd": "${workspaceRoot}"
        },
        "problemMatcher": {
            "owner": "cpp",
            "fileLocation": ["relative", "${workspaceRoot}/DEBUG"],
            "pattern": {
                "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
                "file": 1,
                "line": 2,
                "column": 3,
                "severity": 4,
                "message": 5
            }
        }
    }
]

}

Обратите внимание, что теоретически этот файл должен работать, если вы поместите его в корень рабочей области, чтобы не застревать при проверке файлов в скрытых каталогах (.vscode) в вашей системе контроля версий. Я еще не видел, что на самом деле работает; протестируйте его, но если он потерпит неудачу, поместите его в .vscode. В любом случае, IDE будет сукой, если ее там нет. (Да, на данный момент это означает, что я был вынужден проверить .vscode в subversion, что меня не устраивает.) Обратите внимание, что мои сценарии сборки (не показаны) просто создают (или воссоздают) каталог DEBUG, используя, в мой случай, мезон, и построить внутри него (используя, в моем случае, ниндзя).

  1. Запустить, отладить, прикрепить, остановить. Это еще один набор задач, определенных в «launch.json». Или, по крайней мере, раньше. Microsoft сделала такой хэш документации, я даже не уверен больше.

Настройка visual studio code (vs code) для разработчика 2020

Если прошлая статья про Sublime Text вам не зашла, так как Вы любитель VS Code. Тогда представляем наши настройки для редактора Visual Studio Code актуальные на 2020 год и далее. Редактор получится очень красивым и удобным, Вы без проблем сможете разрабатывать сайты и не париться.

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

Для начала установим плагины и темы, для этого в левой панели выберите последний пункт «Extensions«, сочетание клавиш ctrl + shift + x, далее в поиск вводим название нужного расширения и нажимаем «Install«.

Список плагинов, которые мы рекомендуем:

  1. Sublime Text Keymap and Settings Importer — Перенос настроек и горячих клавиш из Sublime
  2. Auto Close Tag — авто закрытие тегов
  3. Auto Rename Tag — авто изменение имени тегов
  4. Bracket Pair Colorizer — Цветные скобки исходя из иерархии
  5. ESLint — помощник в JavaScript
  6. PHP IntelliSense — помощник в PHP
  7. Vetur — поддержка VueJS
  8. vscode-icons или Material Icon Theme — Иконки файлов
  9. Sass — поддержка Sass
  10. AutoFileName — подсказка имени файла
  11. Color Picker — окно с выбором цвета
  12. Live Server — Лайв сервер
  13. Laravel Blade Snippets — поддержка Laravel Blade
  14. Open in Browser — Открыть в браузере
  15. One Dark Pro Theme

Для перехода в файл настроек, нажмите сочетание клавиш ctrl +shift +p, в поиске введите settings и выберите из списка «Open Default Settings (JSON)«

Код для вставки в файл настроек:

{
	"workbench.startupEditor": "newUntitledFile",
	"git.ignoreMissingGitWarning": true,
	"workbench.colorTheme": "One Dark Pro",
	"workbench.iconTheme": "material-icon-theme",
	"editor.fontFamily": "Fira Code",
	"terminal.integrated.fontSize": 17,
	"terminal.integrated.shell.windows": "E:\\Program Files\\Git\\bin\\bash.exe",
	"window.menuBarVisibility": "toggle",
	"workbench.statusBar.visible": true,
	"workbench.activityBar.visible": true,
	"editor.minimap.enabled": false,
	"files.defaultLanguage": "html",
	"editor.fontSize": 16,
	"editor.lineHeight": 24,
	"editor.tabSize": 2,
	"workbench.editor.tabSizing": "shrink",
	"editor.detectIndentation": false,
	"editor.insertSpaces": false,
	"editor.folding": false,
	"editor.glyphMargin": false,
	"editor.smoothScrolling": true,
	"editor.multiCursorModifier": "ctrlCmd",
	"emmet.includeLanguages": {
			"blade": "html"
	},
	"editor.snippetSuggestions": "top",
	"editor.formatOnPaste": true,
	"editor.wordWrap": "on",
	"window.zoomLevel": 0,
	"editor.fontLigatures": true,
	"workbench.editor.highlightModifiedTabs": true,
	"files.autoSave": "afterDelay",
	"explorer.sortOrder": "type",
	"editor.acceptSuggestionOnEnter": "off"
}

Более поробно, все описани в нашем видео!

P.S. Чтобы Emmet быстро работал, как в Sublime. Добавьте в код настроек:

"emmet.showExpandedAbbreviation": "never",
"emmet.triggerExpansionOnTab": true


Чтобы более подробно разобраться в данной теме «Настройка visual studio code (vs code) для разработчика 2020» советую посмотреть наше видео на эту тему:

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация — Войти — Наши курсы. Задавайте вопросы в комментариях!

Настройка Visual Studio Code

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

Кроссплатформенный

VS Code — это бесплатный редактор кода, работающий в операционных системах macOS, Linux и Windows.

Следуйте приведенным ниже руководствам для конкретных платформ:

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

Частота обновления

VS Code выпускает новую версию каждый месяц с новыми функциями и исправлениями важных ошибок. Большинство платформ поддерживают автоматическое обновление, и вам будет предложено установить новую версию, когда она станет доступной. Вы также можете вручную проверить наличие обновлений, запустив Help > Check for Updates в Linux и Windows или запустив Code > Check for Updates в macOS.

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

Еженедельная сборка инсайдеров

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

Портативный режим

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

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

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

Расширения

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

  • Языки — C ++, C #, Go, Java, Python
  • Инструменты
  • — ESLint, JSHint, PowerShell
  • Отладчики
  • — PHP XDebug.
  • Раскладки клавиш
  • — Vim, Sublime Text, IntelliJ, Emacs, Atom, скобки, Visual Studio, Eclipse

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

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

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

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

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

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

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

Насколько велик VS Code?

VS Code — это небольшая загрузка (<100 МБ), занимающая место на диске менее 200 МБ, поэтому вы можете быстро установить VS Code и попробовать его.

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

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

Как узнать, какая у меня версия?

В Linux и Windows выберите Справка > О . В macOS используйте Code > О Visual Studio Code .

Почему VS Code сообщает, что моя установка не поддерживается?

VS Code обнаружил, что некоторые установочные файлы были изменены, возможно, с расширением. Переустановка VS Code заменит затронутые файлы. См. Раздел часто задаваемых вопросов для получения более подробной информации.

Как я могу выполнить «чистую» деинсталляцию VS Code?

Если вы хотите удалить все пользовательские данные после удаления VS Code, вы можете удалить папки пользовательских данных Code и .vscode . Это вернет вас в состояние, в котором вы установили VS Code. Это также можно использовать для сброса всех настроек, если вы не хотите удалять VS Code.

Расположение папок зависит от вашей платформы:

  • Windows — удалить % APPDATA% \ Code и % USERPROFILE% \. Vscode .
  • macOS — Удалите $ HOME / Library / Application Support / Code и ~ / .vscode .
  • Linux — удалить $ HOME /.config / Код и ~ / .vscode .

05.05.2021

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

Установка

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

Загружая и используя Visual Studio Code, вы соглашаетесь с условиями лицензии и заявлением о конфиденциальности.

Snap

Visual Studio Code официально распространяется в виде пакета Snap в Snap Store:

Вы можете установить его, запустив:

  sudo snap install --classic code # или code-insiders  

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

Примечание: Если snap недоступен в вашем дистрибутиве Linux, ознакомьтесь со следующим руководством по установке snapd, которое может помочь вам выполнить эту настройку.

Узнайте больше о снимках из официальной документации Snap.

Дистрибутивы на основе Debian и Ubuntu

Самый простой способ установить Visual Studio Code для дистрибутивов на основе Debian / Ubuntu — это загрузить и установить.deb (64-разрядный), либо через графический центр программного обеспечения, если он доступен, либо через командную строку с:

  sudo apt install ./<файл >.deb

# Если вы используете более старый дистрибутив Linux, вам нужно будет вместо этого запустить следующее:
# sudo dpkg -i <файл> .deb
# sudo apt-get install -f # Установить зависимости  

Обратите внимание, что другие двоичные файлы также доступны на странице загрузки VS Code.

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

  wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor> packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch = amd64, arm64, armhf signed-by = / etc / apt / trust.gpg.d / packages.microsoft.gpg] https://packages.microsoft.com/repos/code стабильный основной "> /etc/apt/sources.list.d/vscode.список'
rm -f packages.microsoft.gpg  

Затем обновите кеш пакетов и установите пакет, используя:

  sudo apt install apt-transport-https
sudo apt update
sudo apt install code # или code-insiders  

Дистрибутивы на основе RHEL, Fedora и CentOS

В настоящее время мы отправляем стабильный 64-разрядный код VS в репозиторий yum, следующий скрипт установит ключ и репозиторий:

  sudo rpm --import https: // packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[код] \ nname = Код Visual Studio \ nbaseurl = https: //packages.microsoft.com/yumrepos/vscode \ nenabled = 1 \ ngpgcheck = 1 \ ngpgkey = https: // пакеты .microsoft.com / keys / microsoft.asc "> /etc/yum.repos.d/vscode.repo ' 

Затем обновите кеш пакетов и установите пакет, используя dnf (Fedora 22 и выше):

  sudo dnf проверка-обновление
sudo dnf установить код  

Или в более старых версиях с использованием yum :

  ням проверить-обновить
sudo yum установить код  

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

дистрибутивов на основе openSUSE и SLE

Репозиторий yum выше также работает для систем на базе openSUSE и SLE, следующий скрипт установит ключ и репозиторий:

  sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[код] \ nname = Код Visual Studio \ nbaseurl = https: //packages.microsoft.com/yumrepos/vscode \ nenabled = 1 \ ntype = rpm-md \ ngpgcheck = 1 \ ngpgkey = https: //packages.microsoft.com/keys/microsoft.asc "> / etc / zypp / repos.д / vscode.repo ' 

Затем обновите кеш пакетов и установите пакет, используя:

  sudo zypper refresh
sudo zypper установить код  

Пакет AUR для Arch Linux

Существует поддерживаемый сообществом пакет Arch User Repository для VS Code.

Чтобы получить дополнительную информацию об установке из AUR, обратитесь к следующей вики-записи: Установите пакеты AUR.

Пакет Nix для NixOS (или любого дистрибутива Linux, использующего диспетчер пакетов Nix)

В репозитории nixpkgs есть поддерживаемый сообществом пакет VS Code Nix.Чтобы установить его с помощью Nix, установите для параметра allowUnfree значение true в файле config.nix и выполните:

  nix-env -i vscode  

Установка пакета .rpm вручную

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

.
  sudo dnf install <файл>.об / мин  

Обратите внимание, что другие двоичные файлы также доступны на странице загрузки VS Code.

Обновления

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

Примечание. Обновления для пакета Snap выполняются автоматически и выполняются в фоновом режиме.

Узел.js

Node.js — популярная платформа и среда выполнения для простого создания и запуска приложений JavaScript. Он также включает npm, диспетчер пакетов для модулей Node.js. Вы увидите, что Node.js и npm часто упоминаются в нашей документации, а для некоторых дополнительных инструментов VS Code требуется Node.js (например, генератор расширений VS Code).

Если вы хотите установить Node.js в Linux, см. Установка Node.js с помощью диспетчера пакетов, чтобы найти пакет Node.js и инструкции по установке, адаптированные к вашему дистрибутиву Linux.Вы также можете установить и поддерживать несколько версий Node.js с помощью диспетчера версий Node.

Чтобы узнать больше о JavaScript и Node.js, см. Наше руководство по Node.js, в котором вы узнаете о запуске и отладке приложений Node.js с помощью VS Code.

Установка VS Code в качестве текстового редактора по умолчанию

xdg-open

Вы можете установить текстовый редактор по умолчанию для текстовых файлов ( text / plain ), который используется xdg-open , с помощью следующей команды:

  xdg-mime код по умолчанию.текст для настольного компьютера / простой  

Система альтернатив Debian

Дистрибутивы на основе Debian позволяют установить редактор по умолчанию с использованием системы альтернатив Debian, не обращая внимания на тип MIME. Вы можете установить это, запустив следующее и выбрав код:

  sudo update-alternatives --set editor / usr / bin / code  

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

  sudo update-alternatives --install editor / usr / bin / editor $ (какой код)  

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

Другой вариант разработки Linux с VS Code — использовать компьютер Windows с подсистемой Windows для Linux (WSL).

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

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

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

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

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

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

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

Проблемы с виртуальной машиной Azure

Я получаю сообщение об ошибке «Запуск без песочницы SUID»?

Эту ошибку можно игнорировать.

Debian и перемещение файлов в корзину

Если вы видите ошибку при удалении файлов из VS Code Explorer в операционной системе Debian, это может быть связано с отсутствием реализации мусорной корзины, которую использует VS Code.

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

  sudo apt-get install gvfs-bin  

Конфликты с пакетами VS Code из других репозиториев

Некоторые дистрибутивы, например Pop! _OS, предоставляют собственный пакет с кодом . Чтобы гарантировать использование официального репозитория VS Code, создайте файл с именем /etc/apt/preferences.d/code со следующим содержимым:

  Упаковка: код
PIN-код: origin "packages.microsoft.com"
Приоритет PIN-кода: 9999
  

«Visual Studio Code не может отслеживать изменения файлов в этой большой рабочей области» (ошибка ENOSPC)

Когда вы видите это уведомление, это означает, что у средства отслеживания файлов VS Code не хватает дескрипторов, потому что рабочая область большая и содержит много файлов.Перед настройкой ограничений платформы убедитесь, что потенциально большие папки, такие как Python .venv , добавлены в настройку files.watcherExclude (подробнее см. Ниже). Текущий лимит можно посмотреть, запустив:

  cat / proc / sys / fs / inotify / max_user_watches  

Предел можно увеличить до максимального, отредактировав /etc/sysctl.conf (кроме Arch Linux, читайте ниже) и добавив эту строку в конец файла:

  фс.inotify.max_user_watches = 524288  

Затем можно загрузить новое значение, запустив команду sudo sysctl -p .

Хотя 524 288 — это максимальное количество файлов, которые можно просмотреть, если вы находитесь в среде с ограниченным объемом памяти, вы можете уменьшить это число. Каждое наблюдение за файлом занимает 1080 байтов, поэтому, если предположить, что все 524 288 часов потребляются, это дает верхнюю границу около 540 МБ.

Дистрибутивы на основе Arch (включая Manjaro) требуют, чтобы вы изменили другой файл; вместо этого выполните следующие действия.

Другой вариант — исключить определенные каталоги рабочей области из наблюдателя файлов VS Code с помощью параметра files.watcherExclude . По умолчанию для файлов . WatcherExclude исключает node_modules и некоторые папки под .git , но вы можете добавить другие каталоги, которые вы не хотите, чтобы VS Code отслеживал.

  "files.watcherExclude": {
    "** /. git / objects / **": правда,
    "** /. git / subtree-cache / **": правда,
    "** / node_modules / * / **": верно
  }  

Я не вижу китайских иероглифов в Ubuntu

Мы работаем над исправлением.А пока откройте меню приложения, затем выберите Файл > Настройки > Настройки . В текстовом редакторе > Font установите для «Font Family» значение Droid Sans Mono, Droid Sans Fallback . Если вы предпочитаете напрямую редактировать файл settings.json , установите editor.fontFamily , как показано:

  "editor.fontFamily": "Droid Sans Mono, Droid Sans Fallback"  

Пакет git не установлен

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

  # Для .deb
sudo apt-get update

# Для .rpm (Fedora 21 и ниже)
sudo yum проверка-обновление

# Для .rpm (Fedora 22 и выше)
sudo dnf проверка-обновление  

Команда code bin не выводит окно на передний план в Ubuntu

Выполняется код . в Ubuntu, когда VS Code уже открыт в текущем каталоге, не выводит VS Code на передний план. Это функция ОС, которую можно отключить с помощью ccsm .

  # Установить
sudo apt-get update
sudo apt-get install compizconfig-settings-manager

# Запустить
куб.см  

Менее Общие > Общие параметры > Поведение при фокусировке и подъеме , установите «Уровень предотвращения фокусировки» на «Выкл.». Помните, что это параметр уровня ОС, который будет применяться ко всем приложениям, а не только к VS Code.

Невозможно установить пакет .deb из-за «/etc/apt/sources.list.d/vscode.list: нет такого файла или каталога»

Это может произойти при исходниках.list.d не существует или у вас нет доступа для создания файла. Чтобы исправить это, попробуйте вручную создать папку и пустой файл vscode.list :

  судо mkdir /etc/apt/sources.list.d
sudo touch /etc/apt/sources.list.d/vscode.list  

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

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

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

Пользовательская строка заголовка и меню были включены по умолчанию в Linux в течение нескольких месяцев. Настраиваемая строка заголовка пользовалась успехом в Windows, но ответ клиентов на Linux говорит об обратном. Основываясь на отзывах, мы решили включить эту настройку в Linux и оставить встроенную строку заголовка по умолчанию.

Настраиваемая строка заголовка предоставляет множество преимуществ, включая отличную поддержку тем и лучшую доступность с помощью клавиатуры и программ чтения с экрана.К сожалению, эти преимущества не распространяются также на платформу Linux. В Linux есть множество окружений рабочего стола и оконных менеджеров, которые могут сделать тематику VS Code чужеродной для пользователей. Для пользователей, которым необходимы улучшения специальных возможностей, мы рекомендуем включить настраиваемую строку заголовка при работе в режиме специальных возможностей с помощью средства чтения с экрана. Вы по-прежнему можете вручную установить строку заголовка с помощью параметра Window: Title Bar Style ( window.titleBarStyle ).

Курсор сломан в редакторе при включенном масштабировании дисплея

Из-за проблемы # 14787 восходящего потока с Electron курсор мыши может отображаться некорректно при включенном масштабировании.Если вы заметили, что обычный текстовый курсор не отображается внутри редактора, как вы ожидали, попробуйте вернуться к собственной строке меню, настроив параметр window.titleBarStyle на native .

Репозиторий изменил свое исходное значение

Если вы получаете сообщение об ошибке, подобное следующему:

  E: Репозиторий "..." изменил свое значение "Источник" с "..." на "..."
N: это должно быть принято явно перед применением обновлений для этого репозитория.Подробности см. На странице руководства apt-secure (8).
  

Используйте apt вместо apt-get , и вам будет предложено принять изменение источника:

  sudo apt update  

05.05.2021

Portable Mode в Visual Studio Code

Visual Studio Code поддерживает переносимый режим. Этот режим позволяет всем данным, созданным и поддерживаемым VS Code, жить рядом с собой, поэтому их можно перемещать по средам.

Этот режим также позволяет задать расположение папки установки для расширений VS Code, что полезно для корпоративных сред, которые предотвращают установку расширений в папку Windows AppData.

Portable Mode поддерживается при загрузке ZIP для Windows и TAR.GZ для Linux, а также при загрузке обычного приложения для macOS. См. Страницу загрузки, чтобы найти правильный файл .zip / .tar.gz для вашей платформы.

Примечание: Не пытайтесь настроить переносной режим при установке из установщика для пользователя Windows или системы .Переносной режим поддерживается только в архиве Windows ZIP ( .zip ). Также обратите внимание, что ZIP-архив Windows не поддерживает автоматическое обновление.

Включить переносной режим

Windows, Linux

После разархивирования загрузки VS Code создайте папку data в папке VS Code:

  | - VSCode-win32-x64-1.25.0-insider
| | - Code.exe (или исполняемый код)
| | - данные
| | - ...
  

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

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

macOS

В macOS вам нужно поместить папку данных как родственную для самого приложения. Поскольку папка будет рядом с приложением, вам нужно дать ей конкретное имя, чтобы VS Code мог ее найти. Имя папки по умолчанию — code-portable-data :

  | - Код Visual Studio.приложение
| - переносимые данные кода
  

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

  xattr -dr com.apple.quarantine Visual \ Studio \ Code.app  

Примечание. В инсайдерах папка должна называться code-insiders-portable-data .

Обновление Portable VS Code

В Windows и Linux вы можете обновить VS Code, скопировав папку data в более новую версию VS Code.

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

Перейти в портативный режим

Вы также можете перенести существующую установку в портативный режим:

  1. Загрузите ZIP-архив VS Code для своей платформы.
  2. Создайте папку data или code-portable-data , как указано выше.
  3. Скопируйте каталог данных пользователя Код в данные и переименуйте его в user-data :
    • Windows % APPDATA% \ Код
    • macOS $ ГЛАВНАЯ / Библиотека / Поддержка приложений / Код
    • Linux $ HOME /.config / Код
  4. Скопируйте каталог расширений в data :
    • Windows % ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ% \. Vscode \ extensions
    • macOS ~ / .vscode / расширения
    • Linux ~ / .vscode / extension

Вот желаемый результат на Windows :

  | - VSCode-win32-x64-1.25.0-insider
| | - Код.exe (или исполняемый код)
| | - данные
| | | - данные пользователя
| | | | - ...
| | | - расширения
| | | | - ...
| | - ...
  

Каталог TMP

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

05.05.2021

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

Установка

  1. Загрузите установщик Visual Studio Code для Windows.
  2. После загрузки запустите установщик (VSCodeUserSetup- {версия} .exe). Это займет всего минуту.
  3. По умолчанию 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 query "HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ NET Framework Setup \ NDP \ v4 \ full" / v version из командной строки.

Совет. Программа установки добавит код Visual Studio в ваш % PATH% , поэтому с консоли вы можете ввести ‘code.’, чтобы открыть 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 Code после завершения с помощью / 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 .Мы рассматриваем варианты, как это исправить, но пока вот обходной путь:

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

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

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

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

05.05.2021

расширений и тем · Маттиас Отт, дизайнер пользовательского опыта

А потом сломался дисплей моего MacBook Pro. Итак, по прошествии пяти лет пришло время все-таки купить новую машину. Каждый раз, когда это происходило в прошлом, я использовал возможность начать с нуля и выполнить новую установку всего программного обеспечения, которое я действительно использую и в котором нуждаюсь.Следовательно, последние пару дней я потратил на настройку своего нового Mac. В рамках этого я также настроил свою среду разработки и выбранный мной редактор Visual Studio Code. Одна из сильных сторон VS Code — это экосистема расширений, которая значительно выросла, и многие из расширений действительно могут продвинуть наш опыт кодирования еще на один шаг. Но какие расширения следует установить? Я уже пробовал и устанавливал довольно много расширений раньше, но я также просил в Твиттере узнать мнение других людей и, возможно, узнать о некоторых расширениях, о которых я раньше не слышал.Итак, вот список расширений, которые я установил, в алфавитном порядке. Если у вас есть что добавить, напишите мне сообщение или электронное письмо.

Расширения

Автоматическое закрытие тега

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

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

Лучшие комментарии

https://marketplace.visualstudio.com/items?itemName=aaron-bond.лучше комментарии

Better Comments поможет вам писать, ну, более качественные комментарии, выделяя различные типы комментариев, такие как предупреждения, вопросы или TODO, разными цветами.

Пара кронштейнов Colorizer 2

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Это расширение окрашивает соответствующие скобки в один цвет. Настолько полезен, когда вы привыкнете к множеству дополнительных цветов в вашем коде.

Чертеж

https: // торговая площадка.visualstudio.com/items?itemName=deerawan.vscode-dash

Dash — это приложение, которое позволяет читать документацию по API и фрагменты кода, также в автономном режиме. Эта интеграция для Visual Studio Code — простой способ получить доступ к документации из VS Code.

EditorConfig для VS Code

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

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

ОБНОВЛЕНИЕ : это расширение, очевидно, больше не нужно, поскольку VS Code теперь поддерживает встроенные файлы .editorconfig .

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Линтеры кода анализируют ваш код и находят проблемы и ошибки.Это расширение интегрирует JavaScript-линтер ESLint в VS Code.

История Git

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

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

GitLens — Git с наддувом

https: // торговая площадка.visualstudio.com/items?itemName=eamodio.gitlens

Важное расширение для Git. Вы можете видеть, когда и кем была изменена каждая строка кода — прямо в вашем редакторе. GitLens также позволяет вам исследовать историю вашей кодовой базы и сравнивать ветки, коммиты, теги и многое другое.

Стоимость импорта

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Если вы работаете с модулями JavaScript, вы быстро импортируете слишком много кода.При использовании Webpack это расширение будет отображать размер импортированного пакета сразу за оператором импорта.

Live Поделиться

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

Visual Studio Live Share позволяет вам совместно редактировать и отлаживать с другими в режиме реального времени. Вы можете поделиться своим текущим проектом, а затем при необходимости поделиться сеансами отладки, экземплярами терминалов, веб-приложениями localhost, голосовыми вызовами и т. Д.

нпм Intellisense

https: // торговая площадка.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

npm Intelligente автоматически заполняет модули npm в операторах импорта. Так же просто, как и эффективно.

Путь Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Это расширение автоматически дополняет имена файлов.

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

https://marketplace.visualstudio.com/items?itemName=earshinov.permute-lines&ssr=false#review-details

Permute Lines позволяет вам переставлять или переставлять строки кода или фильтровать уникальные строки.

PHP Intelephense

https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

Intelephense предоставляет функции языка PHP, такие как автозавершение кода, документация, форматирование и многое другое.

Prettier — Программа форматирования кода

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier — это средство форматирования кода для JavaScript, TypeScript, JSON, CSS, SCSS, HTML, Vue, Markdown, YAML и многих других стилей кода.

Менеджер проекта

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Project Manager поможет вам легко получить доступ к своим проектам, где бы они ни находились. Вы можете вручную добавлять проекты или позволить расширению автоматически определять репозитории Git, Mercurial или SVN, папки VSCode или любую другую папку. Спасибо Максу Бёку за предложение!

SVG

https://marketplace.visualstudio.com/items?itemName=jock.svg

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

Пульт ДУ — SSH

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

Расширение Remote — SSH позволяет использовать любую удаленную машину с сервером SSH в качестве среды разработки. Спасибо Тимо Салму за предложение!

Обозреватель задач

https://marketplace.visualstudio.com/items?itemName=spmeesseman.vscode-taskexplorer

Список всех поддерживаемых задач (например, npm, Gulp, Ruby и т. Д.) Для проекта в виде дерева.Задачи можно просматривать, редактировать, запускать и останавливать прямо из VS Code.

Twig Language 2

https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2

Добавляет поддержку языка шаблонов Twig. Полезно, например, если вы используете Craft CMS.

VS DocBlockr

https://marketplace.visualstudio.com/items?itemName=jeremyljackson.vs-docblock

DocBlock — это особый тип комментария, который включает сведения о методе или функции, такие как параметры функции или тип возвращаемых данных.VS DocBlockr упрощает написание этих комментариев: нажатие клавиши ввода или табуляции после / ** откроет новую строку и автоматически закроет комментарий. Уже одно это значительно упрощает написание более длинных блоков комментариев. Но если строка непосредственно после нее содержит определение функции, то имя и параметры функции также автоматически добавляются в комментарий.

Обернуть консольный журнал Simple

https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple

Наведите курсор на слово и используйте ярлык для создания консоли.оператор журнала с этим точным словом.

Установка расширений через интерфейс командной строки

Вскоре после того, как я поделился этой статьей, Стефан Джудис поделился со мной очень полезным советом: вы можете установить расширения VS Code через командную строку (CLI) и, например, поместить их все в сценарий и в свои точечные файлы.

Вот пример сценария с расширениями из списка выше: https://gist.github.com/matthiasott/1695ca6f1fe9ccfc18ff6748fb2767c1

шаблоны

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

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

Однако несколько дней назад я решил переключиться на тему «Ночная сова» Сары Драснер.Сара проделала выдающуюся работу по созданию яркой, но не отвлекающей темы. Night Owl также доступен для людей с дальтонизмом и в условиях низкой освещенности. Мне нравится, что фон окна редактора немного темнее синего по умолчанию темы, поэтому я скорректировал цвет в настройках. Пока что мне очень нравится эта тема.

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

~

Как настроить VS Code для веб-разработки за несколько простых шагов

Visual Studio Code стал самым популярным редактором исходного кода. Он легкий, но мощный и, без сомнения, мой любимый.

В этой статье я расскажу, как начать работу и настроить VS Code для веб-разработчиков.

Вот видео, которое вы можете посмотреть, если хотите дополнить эту статью:

Видео о настройке VS Code

Введение в VS Code

Загрузите Visual Studio Code

Если на вашем компьютере еще не установлен VS Code, перейдите по ссылке code.visualstudio.com, чтобы загрузить его. Вы можете открыть раскрывающийся список, чтобы выбрать версии, которые хотите загрузить, но обычно большая кнопка должна делать всю работу.

Вкладка приветствия VS Code

После установки и открытия первое, что вы увидите, это вкладка приветствия.Здесь вы найдете 5 разделов:

Вкладка приветствия

Начало : вы можете создать новый файл или открыть папку.

Недавние : Вы можете найти все недавно открытые папки

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

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

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

Цветовая тема

Learn : Здесь вы найдете 3 варианта. Первый выбор в списке — Найти и запустить все команды. С его помощью мы можем найти и запустить все доступные команды. Мы собираемся использовать это часто, поэтому я рекомендую вам запомнить сокращенный путь, которым является Command / Control + Shift + P .

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

Обзор интерфейса

Последний выбор — это площадка для интерактивного редактора .Здесь вы можете найти основные функции VS Code с инструкциями и примерами.

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

Итак, скажем, например, что мы хотим создать элемент неупорядоченного списка с 3 элементами внутри, и каждый элемент имеет имя класса «плод». Мы можем ввести ul> li.fruit * 3 и нажать tab .

Emmet в интерактивном редакторе Playground

Вы также можете увидеть это в существующем примере ( ul> li.item $ * 5 ), они попытались создать элемент неупорядоченного списка и 5 элементов с именем класса item внутри. Но имя класса также имеет нумерацию :

  

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

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

VS Code File Explorer

Затем перейдем в File Explorer , выбрав первую вкладку на боковой панели навигации или Command / Control + Shift + E .

Здесь вы можете открыть существующую папку, но давайте создадим новую папку и новый файл. Вместо того, чтобы открывать новое окно, давайте откроем терминал в VS Code. Вы можете нажать кнопку ошибка и предупреждение в строке состояния, а затем выбрать вкладку Terminal , или вы можете использовать ярлык Control + `.

Прямо сейчас я нахожусь в своем домашнем каталоге. Давайте создадим новую папку, набрав mkdir vscode-tutorials и войдем в нее с cd vscode-tutorials .

Теперь мы хотим открыть эту папку, чтобы мы могли нажать кнопку открыть папку и перейти в каталог папки — но это большая работа. Вместо этого в терминале мы можем сказать код . . Теперь вы можете столкнуться с ошибкой: bash: code: command not found .

Terminal в VS Code

Чтобы исправить это, мы можем открыть палитру команд и найти Shell Command: Install code command в Path и выбрать ее.Теперь вернемся к терминалу и наберем код . , новое окно VS Code откроется с созданной папкой.

Хорошо, теперь мы хотим создать новый файл. В разделе папок мы можем щелкнуть значок нового файла или щелкнуть правой кнопкой мыши и выбрать новый файл . Назовем файл index.html , а внутри него введем восклицательный знак (!) И нажмем Tab или Enter. С Emmet он сгенерирует HTML-шаблон.

Создание HTML с помощью Emmet в VS Code

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

Это очень полезная функция от VS Code. Но мы не хотим постоянно искать Format Documen t и хотим, чтобы он форматировался всякий раз, когда мы сохраняем файл.

Вы также заметили, что отступ теперь равен 4 пробела , что на мой взгляд многовато. Так что давайте изменим его на 2. И для этого мы можем перейти в настройки или использовать ярлык Command / Control +, .

На вкладке Commonly Used мы можем изменить размер табуляции на 2, а в Text Editor / Formatting мы можем выбрать Format при сохранении . Теперь всякий раз, когда мы сохраняем, файлы будут правильно отформатированы.

VS Code Extensions

Последнее, что я хочу показать вам, это Extensions . Вы можете выбрать вкладку расширений на боковой панели навигации или с помощью ярлыка: Command / Control + Shift + X .

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

Есть много расширений на выбор. Но первое расширение, которое нам нужно установить, — это Live Server. Благодаря этому мы можем заставить локальный сервер перезагружать статические веб-страницы.

Live Server Extension

Например, если мы перейдем к нашему index.html , откроем палитру команд и выполним поиск Live Server: Откройте с Live Server , вы увидите, что открылась новая вкладка в браузере.

И если мы создадим новый элемент в нашем HTML, например

VScode Introduction

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

Заключение

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

А пока, с этим вводным руководством и руководством по установке, я уверен, что вы готовы начать свое путешествие по веб-разработке.

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

__________ 🐣 Обо мне __________

Настройка — vscode-docs

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

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

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

Mac OS X

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

Совет: Если вы хотите запустить VS Code с терминала, просто набрав ‘code’, VS Code имеет команду Shell Command: Установите команду ‘code’ в PATH , чтобы добавить ‘code’ в ваш $. Список переменных PATH .

После установки запустите VS Code. Теперь откройте палитру команд ( kb (workbench.action.showCommands) ) и введите команду оболочки , чтобы найти команду оболочки : установите команду ‘code’ в команду PATH .

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

Linux

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

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

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

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

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

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

Окна

  1. Загрузите код Visual Studio для Windows.
  2. Дважды щелкните файл VSCodeSetup.exe , чтобы запустить процесс установки. Это займет всего минуту.
  3. По умолчанию 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: У нас есть список системных требований.

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

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

.
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.