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. Самый подробный гайд по настройке и установке плагинов для начинающих

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

Сегодня речь пойдет о редакторе кода 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. Настройка и применение. Часть 1 | by p1t1ch

Синхронное добавление модификаторов элементам списка через множественный курсор

Теперь сконцентрируемся на главной функции редактора кода — непосредственно написании кода. В VSCode присутствует ряд возможностей для упрощения этого процесса.

Emmet

Emmet встроен в VSCode, его можно увидеть в списке плагинов в категории Built-in Extensions. Если кто не пользовался им ранее, то это инструмент, позволяющий упростить написание разметки. Можно сказать, что это сниппеты для HTML, только с возможностью чейнинга. Например можно написать:

ul.list>.list__item*5{Item $}

Нажать Tab и получить:

<ul class=”list”>
<li class=”list__item”>Item 1</li>
<li class=”list__item”>Item 2</li>
<li class=”list__item”>Item 3</li>
<li class=”list__item”>Item 4</li>
<li class=”list__item”>Item 5</li>
</ul>

Если вы знаете как пишутся CSS-селекторы, то с написанием сокращений под Emmet у вас не возникнет проблем. В данном примере к специфике Emmet относится только знак “*”, повторяющий блок указанное число раз, “$”, вставляющий счётчик, и опускание “li”, т.” и очень редко использую оператор соседства “+”, т.к. в этих случаях проще развернуть то, что есть, и, не заморачиваясь, написать следующую часть с нуля.

Emmet также можно использовать с CSS, но лично я им при написании стилей не пользуюсь, т.к. мне хватает автосаджеста. К тому же нужно запоминать сокращения в отличие от HTML, где построение сокращений естественно, т.к. выводится из CSS-селекторов. Хотя я знаю, что некоторые разработчики находят эту возможность полезной. Так что для протокола пример применения в CSS:

m0!

переводится в

margin: 0 !important;

P.S. Кстати, не используйте !important 💩

Множественный курсор

VSCode поддерживает всю ту магию с множественным курсором, которой когда-то покорил меня Sublime Text. Вообще говоря, множественные курсоры проставляются на Alt + Click, но я этим не пользуюсь. Приведу примеры более практичного применения этой возможности.

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

Ctrl + D — выбор следующего вхождения.

Можно выделить и сразу все:

Ctrl + F2 — выбор всех вхождений.

Однако, если цель — заменить имя цельной сущности в js, то лучше отдать предпочтение переименованию на F2 — она умнее, чем обычная текстовая замена, и как раз предназначена для таких целей (подробнее о символьных манипуляциях в следующей главе). Также замену можно произвести через Ctrl + H (про текстовый поиск опять же поговорим в следующей главе), но когда применяешь Ctrl + D цель всё-таки несколько другая — расположить множественные курсоры, чтобы параллельно изменять код в нескольких местах.

Пример применения: есть JSON-файл с тысячей вхождений поля “order” с различными значениями. Мы сочли, что такое поле нам больше не нужно. Соответственно, выделяем “”order”:”, Ctrl + F2, курсор проставляется в 1000 строк, End — переходим в конец выделенных строк, Shift + Home — выделяем строку, Backspace — стираем выделенный текст, Backspace — убираем пустые строки. Без множественного курсора мы бы провозились с этими правками довольно долго, а теперь же, расправившись с этой задачей like a boss, можем спокойно пойти выпить чая 😎

Бывает, что у нас есть несколько идентичных строк, идущих подряд, и нам нужно в каждую из них дописать что-то ещё. Для этой цели подойдёт колоночное выделение:

Alt + Shift + (Drag mouse) — колоночное выделение.

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

Манипуляция строками

В отдельную группу выделю управление строками через Alt и стрелки. Здесь всего 2 комбинации, которые стоит запомнить.

Нажатие стрелок с зажатым Alt перемещает строку. Порой бывает удобно перенести выделенный участок, не переключаясь на мышь. По сути то же самое, что выделить блок мышью, и прожать Ctrl + X Ctrl + V, только быстрее, если привыкнуть. Если нужно перенести только одну строку, то выделять ничего не нужно, достаточно стоящего на строке курсора.

Alt + Arrow — перемещение строки.

Если повторить ту же комбинацию с зажатым Shift, строка вместо перемещения начнёт копироваться. Допустим, у вас есть некоторая строка и вам нужно размножить её до 20 вхождений, чтобы иметь базу, в которой вы будете потом вручную изменять отдельные фрагменты. Это можно сделать, выделив строку, нажав Ctrl + C, и ещё 19 раз прожав Enter и Ctrl + V. Создаёт видимость работы, конечно, но то же самое можно сделать, зажав Shift + Alt и стрелку вниз, и отпустив стрелку, когда строк станет достаточно. Вы можете возразить, что можно скопировать строку сразу с переносом, а Ctrl + V просто зажать. Ну вообще можно, да, и это уже похоже по трудозатратам на то, что мы делаем через Alt. Просто раньше я замечал за собой именно первый вариант, так что, полагаю, что он достаточно распространён.

Shift + Alt + Arrow — копирование строки.

Комментарии

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

Ctrl + / — вставка строчного комментария.

Тип комментариев подбирается на основании языка. Для js будет применён //, для css /* */, для html <!-- -->, для hbs {{!-- --}} и т.д. Для написания стилей я пользуюсь PostCSS, и здесь важно, что для при этом комментарии определяются верно. В Sublime Text я ставил ассоциацию .pcss файлов c SCSS, в результате чего подсветка синтаксиса была примерно корректная, но комментарий вставлялся, как в SASS одинарный, что для PostCSS вызывало ошибку, т.к. в CSS должны быть блочные комментарии.

Лично я придерживаюсь такого стиля написания комментариев в скриптах, что выделение участка кода, который временно отключён, идёт через //, временные пометки в конце строк также идут через //, но пояснения пишутся через блочные комментарии /* */ на отдельных строках. Так можно визуально отделить “work in progress” участки кода, которые потом можно будет удалить, от вшитых сопровождающих пояснений работы блока, да и смотрятся блочные комментарии более аккуратно. Для вставки блочного комментария в VSCode предназначен шорткат:

Shift + Alt + A — вставка блочного комментария.

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

начало работы с VS Code с помощью WSL

  • Чтение занимает 4 мин

В этой статье

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

  • Разработка в среде под управлением Linux
  • Использование цепочек инструментов и служебных программ для Linux
  • запускайте и отлаживать приложения Linux с помощью Windows и сохраняя доступ к средствам повышения производительности, таким как Outlook и Office
  • использование встроенного терминала VS Code для запуска дистрибутива Linux по выбору
  • воспользуйтесь преимуществами VS Code функций, таких как завершение кода Intellisense, linting, поддержка отладки, фрагменты кодаи модульное тестирование .
  • простота управления версиями с помощью встроенной поддержки Git VS Code
  • выполнение команд и VS Code расширений непосредственно в проектах WSL
  • изменение файлов в Linux или смонтированной Windows файловой системе (например,/мнт/к) без беспокойства о проблемах с путями, двоичной совместимости или других трудностей между операционными системами

установка VS Code и расширения Remote WSL

  • перейдите на страницу установки VS Code и выберите двоичный установщик 32 или 64. установите Visual Studio Code на Windows (а не в файловую систему WSL).

  • При появлении запроса на Выбор дополнительных задач во время установки обязательно установите флажок Добавить в путь , чтобы можно было легко открыть папку в WSL с помощью команды Code.

  • Установите Пакет расширений для удаленной разработки. Этот пакет расширений включает расширение Remote-WSL в дополнение к расширениям Remote-SSH и Remote-Container, что позволяет открывать любую папку в контейнере, на удаленном компьютере или в WSL.

Важно!

Чтобы установить расширение Remote-WSL, потребуется версия 1,35 или более поздняя VS Code. не рекомендуется использовать WSL в VS Code без расширения Remote-WSL, так как будет потеряна поддержка автоматического завершения, отладки, linting и т. д. Забавный факт. это расширение WSL устанавливается в $HOME/.вскоде/екстенсионс (введите команду ls $HOME\.vscode\extensions\ в PowerShell).

Обновление дистрибутива Linux

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

Например, чтобы обновить Debian или Ubuntu, используйте:

sudo apt-get update

Чтобы добавить wget (для получения содержимого с веб-серверов) и CA-Certificates (чтобы разрешить приложениям на основе SSL проверять подлинность SSL-соединений), введите:

sudo apt-get install wget ca-certificates

Откройте проект WSL в Visual Studio Code

Из командной строки

Чтобы открыть проект из дистрибутива WSL, откройте командную строку распространения и введите: code .

Из VS Code

кроме того, можно получить доступ к дополнительным VS Code удаленным параметрам с помощью ярлыка: CTRL+SHIFT+P в VS Code, чтобы открыть палитру команд. если затем ввести, Remote-WSL вы увидите список доступных VS Code удаленных параметров, что позволит повторно открыть папку в удаленном сеансе, указать, какое распространение следует открыть в, и многое другое.

расширения в VS Code Remote

расширение Remote-WSL разделяет VS Code в архитектуру «клиент-сервер» с помощью клиента (пользовательского интерфейса), работающего на компьютере Windows, и сервера (код, Git, подключаемые модули и т. д.), запускаемые удаленно.

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

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

Некоторые расширения, такие как расширение Python или все, что обрабатывает такие действия, как linting или Отладка, должны устанавливаться отдельно на каждом удаленном распределении WSL. VS Code отобразит значок предупреждения ⚠ , а также зеленую кнопку «установить в WSL», если установлено локальное расширение, которое не установлено на удаленном компьютере WSL.

дополнительные сведения см. в VS Code документах:

  • при запуске VS Code Remote в WSL сценарии запуска оболочки запускаться не будут. Дополнительные сведения о выполнении дополнительных команд или изменении среды см. в этой статье о сценариях расширенной настройки среды .

  • возникли проблемы при запуске VS Code из командной строки WSL? В этом руководство по устранению неполадок содержатся советы по изменению переменных пути, устранению ошибок расширения, связанных с отсутствием зависимостей, устранению проблем с завершением строк Git, установке локального VSIX на удаленном компьютере, запуску окна браузера, порту localhost для блокировки, веб-сокеты не работают, ошибки при хранении данных расширения и многое другое.

Установка Git (необязательно)

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

сведения об установке git см. в статье настройка git для работы с подсистема Windows для Linux.

Установка Терминала Windows (необязательно)

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

  1. Скачайте Терминал Windows из Microsoft Store: При установке через магазин обновления выполняются автоматически.

  2. После установки откройте Терминал Windows и щелкните Параметры, чтобы настроить Терминал использовать файл profile.json.

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

К дополнительным рекомендуемым расширениям относятся следующие:

  • Раскладки клавиатуры других редакторов — эти расширения позволят использовать необходимую раскладку при переходе в другой текстовый редактор (например, Atom, Sublime, Vim, eMacs, Notepad++ и т. п.).
  • Расширение синхронизации параметров — позволяет синхронизировать параметры VS Code в разных установках, используя GitHub. Если вы работаете на разных компьютерах, это обеспечит согласованность среды между ними.
  • Отладчик для Chrome: после завершения разработки на стороне сервера с Linux необходимо разработать и протестировать клиентскую часть. Это расширение интегрирует редактор VS Code со службой отладки браузера Chrome, что увеличивает эффективность выполнения операций.

Как пользоваться отладчиком копаться в Visual Studio Code



Я установил расширение Go для VS Code, но не смог заставить его работать.

«dlv debug» работает нормально с terminal.

dlv debug src/github.com/user/hello

В launch.json :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "go",
            "request": "launch",
            "mode": "debug",
            "program": "${workspaceRoot}",
            "env": {},
            "args": []
        }
    ]
}

Вы знаете, как его настроить?

go visual-studio-code delve
Поделиться Источник Chris G.     20 августа 2016 в 21:22

4 ответа


  • Visual Studio Code замена Visual Studio

    Я только что узнал о Visual Studio Code. Я хотел бы знать, могу ли я заменить Visual Studio для всех работ, связанных с разработкой .NET? Могу ли я сэкономить на лицензировании Visual Studio? Что есть в Visual Studio, чего нет в Visual Studio Code?

  • Visual Studio Code [Javascript]

    Я хочу запустить скрипт java с помощью visual studio code. Когда я запускаю скрипт, visual studio code возвращает Code language not supported or define . У меня есть плагин Code Runner в visual studio code. Что означает Code language not supported or define ?



68

Для использования отладчика Delve в Visual Studio Code с Golang выполните следующие действия:

( Note: for Windows OS replace all $GOPATH with %GOPATH% )
  • Установите последнюю версию Golang и установите GOROOT и GOPATH
  • Добавьте $GOPATH/bin в переменную среды OS PATH .
  • установите переменную окружения: GO15VENDOREXPERIMENT = 1
  • запустите: go get github.com/derekparker/delve/cmd/dlv и убедитесь, что двоичный файл dlv сгенерирован в вашем $GOPATH/bin
  • Установить Visual Studio Code
  • Запустите VS Code Quick Open ( Ctrl + P ), вставьте эту команду: ext install Go и нажмите enter.
  • нажмите кнопку установить Rich Go language support for Visual Studio Code
  • нажмите кнопку Enable и перезапустите Visual Studio Code
  • Внутри Visual Studio Code Открыть папку Ctrl + Shift + E , например: $GOPATH\src\hello\
  • Затем откройте hello.go из этой папки (или создайте новый файл Ctrl + N и сохраните его в этой папке):
package main

import "fmt"

func main() {
    fmt.Println("Hello World!")
    i := 101
    fmt.Println(i)
}
  • Затем Откройте Отладчик Ctrl + Shift + D
  • в этой строке: i := 101 нажмите F9 , чтобы установить или переключить точку клюва.
  • Нажмите F5 , чтобы начать отладку или запустить приложение, если вас попросят выбрать среду: выберите Go .
  • Нажмите F10 , чтобы перейти.
  • Нажмите F11 , чтобы войти.
  • Нажмите Shift + F11 , чтобы выйти.
  • Нажмите Shift + F5 , чтобы остановить отладку.
  • Пресс Ctrl + Shift + F5 чтобы перезапустить отладку.

Мой launch.json нетронутый:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "go",
            "request": "launch",
            "mode": "debug",
            "remotePath": "",
            "port": 2345,
            "host": "127.0.0.1",
            "program": "${workspaceRoot}",
            "env": {},
            "args": [],
            "showLog": true
        }
    ]
}

Результат:

Поделиться Unknown     21 августа 2016 в 09:24


  • Visual Studio 2017 и Visual Studio Code

    Visual Studio 2017 планируется выпустить 7 марта 2017 года в соответствии с Microsoft. Мои вопросы таковы : Мне все еще нужно Visual Studio Code для моего Angular2/Typescript Развитие ? Заменит ли Visual Studio 2017 Visual Studio Code или они оба будут сосуществовать с разными сильными сторонами,…

  • Visual Studio Code — лучше diff

    Я использую Visual Studio Code для просмотра Git различий. Но diff читать труднее, чем Visual Studio 2017 diff. Возможно ли иметь только один цвет в Visual Studio Code? Visual Studio 2017 diff (легко читается): Visual Studio Code diff (почти невозможно прочитать):



2

Этот launch.json работал для меня, чтобы запустить отладчик Golang в VSCode:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch file",
      "type": "go",
      "request": "launch",
      "mode": "auto",
      "program": "${file}",
      "env": {
        "PATH": "/usr/local/go/bin:${fileDirname}"
      },
      "args": []
    }
  ]
}

VSCode Ссылка На Переменные : Если файл /home/your-username/your-project/folder/main.go открыт в VSCode и

каталог /home/your-username/your-project -это ваше корневое рабочее пространство, тогда

${файл} = /home/your-username/your-project/folder/main.go

${fileDirname} = /home/your-username/your-project/folder


Мои конкретные ценности:

$GOROOT: /usr/local/go

$GOPATH: /Users/myname/code

${файл}: /Users/myname/code/src/github.com/githubName/appName/main.go

${fileDirname}: /Users/myname/code/src/github.com/githubName/appName

Поделиться Raymond Gan     01 сентября 2019 в 14:49



0

FTA (в случае, если его трудно найти), если при использовании delve и вы получаете ошибку cannot find package , даже если ваш GOPATH установлен правильно, проверьте эту ошибку vscode-go, она влияет как на MAC OS, так и на Linux, по состоянию на октябрь 2017 года.

Решение также размещено там:

… добавление GOPATH в качестве var env в свойстве env в файле launch.json решило проблему

Поделиться xpt     09 октября 2017 в 17:28



0

Содержание launch.json для gdb и углубиться

{
// Используйте IntelliSense, чтобы узнать о возможных атрибутах.
// Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
// Для получения дополнительной информации посетите: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "name": "Delve",
        "type": "go",
        "request": "launch",
        "mode": "debug",
        "remotePath": "",
        "port": 2345,
        "host": "127.0.0.1",
        "program": "${workspaceRoot}/src/hello/hello.go",
        "env": {},
        "args": [],
        "showLog": true
    }
   ,
    {
        "type": "gdb",
        "request": "launch",
        "name": "GDB",

        "target": "${workspaceRoot}/src/hello/hello",
        "cwd": "${workspaceRoot}",
        "linux": {
            "MIMode": "gdb",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ]
        },
    }
]
}

Поделиться big-town     13 апреля 2018 в 15:14



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


Относительный корень с отладчиком Visual Studio ASP.NET

Я работаю над проектом ASP.NET, который физически находится в C:\Projects\MyStuff\WebSite2. Когда я запускаю приложение с отладчиком Visual Studio, кажется, что встроенный веб-сервер считает…


Почему студентов не учат пользоваться отладчиком?

Здесь много домашних заданий на SO. Я бы предположил, что 90%+ можно решить, пройдя через код в отладчике и наблюдая за состоянием программы/переменной. Меня никогда не учили пользоваться…


как запустить firefox под отладчиком с помощью visual studio 2010?

я новичок в разработке firefox, поэтому я выполнил первые 2 шага, приведенные здесь https:/ / developer.mozilla.org / en / Introduction теперь на Шаге 3 они говорят, что запускают firefox под…


Visual Studio Code замена Visual Studio

Я только что узнал о Visual Studio Code. Я хотел бы знать, могу ли я заменить Visual Studio для всех работ, связанных с разработкой .NET? Могу ли я сэкономить на лицензировании Visual Studio? Что…


Visual Studio Code [Javascript]

Я хочу запустить скрипт java с помощью visual studio code. Когда я запускаю скрипт, visual studio code возвращает Code language not supported or define . У меня есть плагин Code Runner в visual…


Visual Studio 2017 и Visual Studio Code

Visual Studio 2017 планируется выпустить 7 марта 2017 года в соответствии с Microsoft. Мои вопросы таковы : Мне все еще нужно Visual Studio Code для моего Angular2/Typescript Развитие ? Заменит ли…


Visual Studio Code — лучше diff

Я использую Visual Studio Code для просмотра Git различий. Но diff читать труднее, чем Visual Studio 2017 diff. Возможно ли иметь только один цвет в Visual Studio Code?…


Visual Studio Code: Как отключить перетаскивание для редактирования текста?

В VS Code как я могу отключить перетаскивание для редактирования текста? При редактировании в Visual Studio Code часто, когда я пытаюсь выделить область текста, я случайно выбираю несколько…


Тот же ярлык в Visual Studio и Visual Studio Code

Есть ли способ настроить одни и те же ярлыки как в Visual Studio Code, так и в Visual Studio (без необходимости менять их все вручную каждый раз)? Я например использую Alt + Shift + A в 35-м…


Visual Studio Code — начинающий программист

каждый. Я графический дизайнер и думал, что начну изучать кодирование для написания сценариев для Adobe Illustrator в ExtendScript/JavaScript. году я начал несколько уроков для начинающих и добился…

Использование интеграции Git в Visual Studio Code

Введение

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

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

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

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

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

Шаг 1 — Знакомство с вкладкой Source Control

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

Откройте Visual Studio Code и запустите встроенный терминал. Вы можете открыть его, используя сочетание клавиш CTRL + ` в Linux, macOS или Windows.

Используя терминал, создайте каталог для нового проекта и перейдите в этот каталог:

  • mkdir git_test
  • cd git_test

Затем создайте репозиторий Git:

Также вы можете сделать это в Visual Studio Code, открыв вкладку Source Control (иконка выглядит как развилка дороги) в левой панели:

Затем нажмите кнопку Open Folder:

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

Затем нажмите Initialize Repository:

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

Вы увидите созданный каталог .git:

Output

Это означает, что репозиторий инициализирован, и теперь вам следует добавить в него файл index.html.

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

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

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

Чтобы записать изменения, введите команду отправки в поле ввода в верхней части панели Source Control. Затем нажмите иконку отметки check для отправки файла в репозиторий.

После этого вы увидите, что несохраненных изменений нет.

Теперь добавьте немного содержания в файл index.html.

Вы можете использовать ярлык Emmet для генерирования базовой структуры кода HTML5 в VS Code, нажав !, а затем клавишу Tab. Теперь добавьте что-нибудь в раздел <body>, например, заголовок <h2>, и сохраните файл.

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

Для практики давайте запишем это изменение в репозиторий.

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

Шаг 2 — Интерпретация показателей Gutter

На этом шаге мы рассмотрим концепцию Gutter («Желоб») в VS Code. Gutter — это небольшая область справа от номера строки.

Если ранее вы использовали сворачивание кода, то в области Gutter находятся иконки «Свернуть» и «Развернуть».

Для начала внесем небольшое изменение в файл index.html, например, изменим содержание внутри тега <h2>. После этого вы увидите, что измененная строка помечена в области Gutter синей вертикальной чертой. Синяя вертикальная черта означает, что соответствующая строка кода была изменена.

Теперь попробуйте удалить строку кода. Вы можете удалить одну из строк в разделе <body> вашего файла index.html. Обратите внимание, что в области Gutter появился красный треугольник. Красный треугольник означает строку или группу строк, которые были удалены.

Теперь добавьте новую строку в конец раздела <body> и обратите внимание на зеленую полосу. Вертикальная зеленая полоса обозначает добавленную строку кода.

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

Шаг 3 — Просмотр отличий файлов

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

Чтобы посмотреть отличия, откройте панель контроля исходного кода и дважды нажмите на измененный файл. В этом случае следует дважды нажать на файл index.html. Откроется типовое окно сравнения, где текущая версия файла отображается слева, а ранее сохраненная в репозитории версия — справа.

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

Шаг 4 — Работа с ветвлением

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

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

Создайте новую ветвь с именем test.

Теперь внесите изменение в файл index.html, чтобы перейти в новую ветвь test, например, добавьте текст this is the new test branch.

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

После переключения обратно на ветвь master вы увидите, что текст this is the new test branch, сохраненный для ветви test, отсутствует в главной ветви.

Шаг 5 — Работа с удаленными репозиториями

В этом учебном модуле мы не будем вдаваться в детали, но панель Source Control также предоставляет доступ для работы с удаленными репозиториями. Если вы уже работали с удаленными репозиториями, то вы увидите знакомые вам команды, такие как pull, sync, publish, stash и т. д.

Шаг 6 — Установка полезных расширений

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

Git Blame

Это расширение дает возможность просматривать информацию Git Blame в панели состояния для текущей выделенной строки.

Английское слово Blame имеет значение «винить», но не стоит беспокоиться — расширение Git Blame призвано сделать процесс разработки более практичным, а не обвинять кого-то в чем-то плохом. Идея «винить» кого-то за изменения кода относится не к буквальному возложению вины, а к идентификации человека, к которому следует обращаться с вопросами в отношении определенных частей кода.

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

Git History

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

Как можно увидеть на снимке ниже, это расширение позволяет тщательно изучать историю файла, автора, ветви и т. д. Чтобы активировать показанное ниже окно Git History, нажмите на файл правой кнопкой мыши и выберите пункт Git: View File History:

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

Git Lens

GitLens дополняет возможности Git, встроенные в Visual Studio Code. Это расширение помогает визуализировать принадлежность кода через аннотации Git Blame и линзу кода, просматривать и изучать репозитории Git из среды VS Code, получать полезные аналитические данные с помощью мощных команд сравнения, а также выполнять многие другие задачи.

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

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

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

При этом откроется следующее окно:

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

Заключение

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

Как настроить VS Code для разработки на PHP

Visual Studio Code – популярный бесплатный редактор кода. Может с легкостью конкурировать с PhpStorm, ведь он бесплатный и с открытым исходным кодом

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

Основные возможности

  • отладчик кода
  • встроенный терминал
  • удобные инструменты для работы с Git
  • подсветка синтаксиса для множества популярных языков и файловых форматов
  • удобная навигация
  • встроенный предпросмотр Markdown
  • умное автодополнение
  • встроенный пакетный менеджер

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

EditorConfig for VS Code

EditorConfig — это конфигурационный файл и набор расширений к большому количеству редакторов кода. Он подхватывает настройки из файла .editorconfig, который, как правило, размещается в корне проекта. Расширение автоматически настроит отступы и перевод строк единообразно для всех разработчиков, использующих его. PHP код чаще всего выполняется на *nix системах, поэтому необходимо использовать стандарт.

Ниже приводится пример файла .editorconfig, который используется в Laravel:

root = true

# Глобальные настройки, которые будут записаны для всех файлов.
[*]
charset = utf-8
# На Unix системах используется lf для перевода строки.
# Это также требование стандарта PSR.
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true

# Можно задать индивидуальные настройки как для типов файлов,
# так и отдельных файлов по имени.
[*.md]
trim_trailing_whitespace = false

[*.{yml,vue,js,html}]
indent_size = 2

[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

[lib/**.js]
indent_style = space
indent_size = 2

PHP Intelephense

В редакторе уже есть поддержка синтаксиса и подсказок стандартных функций языка. Но без специального дополнения редактор не будет подсказывать пользовательские функции из других частей проекта. Поэтому для поддержки автодополнения, анализа кода, перехода к месту, где создана функция/класс/переменная (с помощью шортката Alt+Click), используется дополнение PHP Intelephense

Чтобы подсказки не дублировались необходимо отключить встроенную в редактор поддержку кода для PHP: Extensions -> Search @builtin php -> PHP Language Features -> Disable

PHP Debug

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

Чтобы воспользоваться PHP Debug, необходимо установить сам XDebug, без него расширение для редактора работать не будет. Установив расширение, необходимо добавить конфигурацию для PHP в разделе Debug. После выбора языка в корне проекта будет создан файл .vscode/launch.json с задачами для Дебаггера. Расширение создаст файл со стандартными параметрами.

Для того, чтобы XDebug общался с нашим дебаггером, необходимо добавить настройки в файл конфигурации php. Чтобы найти этот файл выполните в терминале команду php --ini или запустите веб-сервер с кодом phpinfo().

В Linux PHP подгружает не только основной файл, но и файл из этой директории. Например, на Ubuntu путь к директории конфигурационных файлов для PHP может быть таким — /etc/php/7.3/cli/conf.d/. В ней создаём файл с необходимыми правами (требуются root права):

$ sudo touch /etc/php/7.3/cli/conf.d/99-local.ini
$ sudo chmod 777 /etc/php/7.3/cli/conf.d/99-local.ini

Содержимое файла:

xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000 ; Порт, который мы указали в launch.json
xdebug.idekey=code
xdebug.remote_autostart=1

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

PHP Sniffer

В языках программирования есть понятие стиль кодирования. Но не все разработчики знают об этом. Программа, которая отвечает за проверку на соответствие стандартам, называется линтер. В PHP приняты стандарты под названием PSR. Нас интересуют стандарты PSR-1 и PSR-12. Именно эти два стандарта касаются кодирования и правил оформления.

В PHP в качестве линтера используется PHP_CodeSniffer. Для его работы необходимо установить глобально сам линтер composer global require "squizlabs/php_codesniffer=*" и расширение PHP Sniffer.

Проверьте, что линтер установился:

$ phpcs --version
PHP_CodeSniffer version 3.4.2 (stable) by Squiz (https://www.squiz.net)

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

$ phpcs --standard=PSR12 <dirname>

Semicolon Insertion Shortcut

PHP требует разделять инструкции с помощью точки запятой. Расширение Semicolon Insertion Shortcut добавляет необходимый символ в конец строки с помощью шортката. Если при нажатии [Ctrl] + ; символ не вставляется, то необходимо проверить список горячих клавиш и при необходимости назначить комбинацию вручную: File -> Preferences -> Keyboard Shortcuts

Список расширений, которые могут быть использованы не только для PHP:

  • GitLens — в VS Code уже встроена поддержка Git. Но когда базовых возможностей становится недостаточно, на помощь может придти Gitlens. Например, одна из полезных фич — git blame на текущей строке.

  • Indent Rainbow — разноцветные отступы в коде. Подсвечивает некорректный отступ. Можно вместо радуги установить оттенки серого.

  • Settings Sync — плагин, позволяющий синхронизировать настройки редактора между разными компьютерами. В качестве облачного хранилища используется Github Gists. Все настройки можно скачать, указав нужный файл синхронизации.

  • Fira Code — моноширинный шрифт, в котором используются лигатуры (объединяет несколько символов в один) для общих комбинаций символов в программировании. Визуальная надстройка для более удобного чтения кода.

Начало работы с Visual Studio Code

Обучение программированию пугает, поэтому настройте себя на успех с помощью инструмента, созданного специально для вас. Visual Studio Code — это бесплатный редактор кода, который помогает быстро приступить к программированию. Используйте его для программирования на любом языке программирования, не переключая редакторов. Visual Studio Code поддерживает множество языков, включая Python, Java, C ++, JavaScript и другие. Готовы начать? Посмотрите эти вводные видеоролики или ознакомьтесь с нашими пакетами кодирования для Java, Python и.СЕТЬ.

Почему VS Code?

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

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

Код для изучения

Новичок в программировании? Visual Studio Code выделяет ключевые слова в вашем коде разными цветами, чтобы помочь вам легко идентифицировать шаблоны кодирования и быстрее учиться.Вы также можете воспользоваться такими функциями, как IntelliSense и Peek Definition, которые помогут вам понять, как можно использовать функции и как они соотносятся друг с другом.

Исправьте ошибки при коде

По мере написания кода Visual Studio Code предлагает дополнить строки кода и быстро исправить типичные ошибки. Вы также можете использовать отладчик в VS Code, чтобы проходить каждую строку кода и понимать, что происходит. Ознакомьтесь с руководствами по использованию отладчика, если вы пишете на Python, Java и JavaScript / TypeScript / Node.js.

Сделайте это своим с помощью настраиваемых тем и цветов

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

Сравните изменения в вашем коде

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

Код

в ноутбуках

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


Была ли эта страница полезной? Документация

для Visual Studio Code

Visual Studio Code — это легкий, но мощный редактор исходного кода, который работает на вашем рабочем столе и доступен для Windows, macOS и Linux.Он поставляется со встроенной поддержкой JavaScript, TypeScript и Node.js и имеет богатую экосистему расширений для других языков (таких как C ++, C #, Java, Python, PHP, Go) и среды выполнения (например, .NET и Unity). . Начните свое путешествие с VS Code с этих вводных видеороликов.

Код Visual Studio в действии

Интеллектуальное завершение кода

Кодируйте умнее с IntelliSense — дополнения для переменных, методов и импортированных модулей.

Оптимизированная отладка

Отладка печати осталась в прошлом. Отлаживайте VS Code с помощью инструментов вашего терминала.

Контроль исходного кода в продукте

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

Верхние удлинители

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

Смотрите больше на торговой площадке

Первые шаги

Чтобы получить максимальную отдачу от Visual Studio Code, начните с изучения нескольких вводных тем:

Вступительные видеоролики — Начните свое путешествие с VS Code с этих вводных видеороликов.

Setup — Установите VS Code для своей платформы и настройте набор инструментов для своих нужд разработки.

Пользовательский интерфейс — Знакомство с основным пользовательским интерфейсом, командами и функциями редактора VS Code.

Настройки

— настройте VS Code так, как вам нравится работать.

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

Узел.js — это руководство поможет вам быстро запустить и отладить веб-приложение Node.js.

Советы и уловки. Воспользуйтесь советами и уловками, чтобы стать опытным пользователем VS Code.

Azure — VS Code отлично подходит для развертывания ваших веб-приложений в облаке.

— Узнайте, как написать расширение VS Code.

Почему VS Code? — Прочтите о философии дизайна и архитектуре VS Code.

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

Повысьте продуктивность с помощью сочетаний клавиш VS Code.

Загрузки

Загрузить VS Code — быстро найти подходящую установку для вашей платформы (Windows, macOS и Linux)

Конфиденциальность

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

Начните использовать VS Code с WSL

  • 4 минуты на чтение

В этой статье

Visual Studio Code вместе с расширением Remote — WSL позволяет использовать WSL в качестве постоянной среды разработки непосредственно из VS Code.Вы можете:

  • разработка в среде на базе Linux
  • использует специфичные для Linux наборы инструментов и служебные программы
  • запускать и отлаживать приложения на базе Linux, не выходя из Windows, при этом сохраняя доступ к инструментам повышения производительности, таким как Outlook и Office
  • используйте встроенный терминал VS Code для запуска выбранного вами дистрибутива Linux
  • пользуется преимуществами функций VS Code, таких как завершение кода Intellisense, линтинг, поддержка отладки, фрагменты кода и модульное тестирование.
  • легко управлять версией с помощью встроенной поддержки VS Code
  • в Git
  • запускать команды и расширения VS Code непосредственно в ваших проектах WSL
  • редактировать файлы в вашей файловой системе Linux или смонтированной Windows (например, / mnt / c), не беспокоясь о проблемах с путями, бинарной совместимости или других проблемах между ОС.

Установите VS Code и удаленное расширение WSL

  • Посетите страницу установки VS Code и выберите 32- или 64-разрядный установщик.Установите Visual Studio Code в Windows (не в файловую систему WSL).

  • При запросе Select Additional Tasks во время установки обязательно отметьте опцию Add to PATH , чтобы вы могли легко открыть папку в WSL с помощью команды code.

  • Установите пакет расширений удаленной разработки. Этот пакет расширений включает расширение Remote — WSL в дополнение к расширениям Remote — SSH и Remote — Containers, что позволяет открывать любую папку в контейнере, на удаленном компьютере или в WSL.

Важно

Для установки расширения Remote-WSL вам понадобится версия 1.35 May выпуска или более поздняя версия VS Code. Мы не рекомендуем использовать WSL в VS Code без расширения Remote-WSL, так как вы потеряете поддержку автозаполнения, отладки, линтинга и т. Д. Интересный факт: это расширение WSL установлено в $ HOME / .vscode / extensions (введите команда ls $ HOME \ .vscode \ extensions \ в PowerShell).

Обновите свой дистрибутив Linux

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

Например, чтобы обновить Debian или Ubuntu, используйте:

  sudo apt-get update
  

Чтобы добавить wget (для получения контента с веб-серверов) и CA-сертификаты (чтобы приложения на основе SSL могли проверять подлинность соединений SSL), введите:

  sudo apt-get install wget ca-сертификаты
  

Откройте проект WSL в Visual Studio Code

Из командной строки

Чтобы открыть проект из вашего дистрибутива WSL, откройте командную строку дистрибутива и введите: код.

Из VS Код

Вы также можете получить доступ к дополнительным параметрам VS Code Remote с помощью ярлыка: CTRL + SHIFT + P в VS Code, чтобы открыть палитру команд. Если затем вы наберете Remote-WSL , вы увидите список доступных опций VS Code Remote, позволяющий повторно открыть папку в удаленном сеансе, указать, какой дистрибутив вы хотите открыть, и многое другое.

Расширения внутри VS Code Remote

Расширение Remote-WSL разделяет VS Code на архитектуру «клиент-сервер», при этом клиент (пользовательский интерфейс) работает на вашем компьютере с Windows, а сервер (ваш код, Git, плагины и т. Д.) Работает удаленно.

При запуске VS Code Remote выбор вкладки «Расширения» отобразит список расширений, разделенных между вашим локальным компьютером и вашим распределением WSL.

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

Некоторые расширения, такие как расширение Python или все, что обрабатывает такие вещи, как линтинг или отладка, должны быть установлены отдельно в каждом удаленном дистрибутиве WSL. VS Code отобразит значок предупреждения ⚠ вместе с зеленой кнопкой «Установить в WSL», если у вас локально установлено расширение, которое не установлено на вашем WSL Remote.

Для получения дополнительной информации см. Документы VS Code:

  • Когда VS Code Remote запускается в WSL, сценарии запуска оболочки не запускаются. См. Эту статью сценария расширенной настройки среды для получения дополнительной информации о том, как запускать дополнительные команды или изменять среду.

  • Возникли проблемы с запуском VS Code из командной строки WSL? Это руководство по устранению неполадок включает советы по изменению переменных пути, устранению ошибок расширения, связанных с отсутствием зависимостей, решению проблем с окончанием строки Git, установке локального VSIX на удаленном компьютере, запуску окна браузера, блокировке порта localhost, неработающим веб-сокетам, ошибкам с сохранением данных расширения. , и более.

Установить Git (необязательно)

Если вы планируете сотрудничать с другими или разместить свой проект на сайте с открытым исходным кодом (например, GitHub), VS Code поддерживает управление версиями с помощью Git. Вкладка Source Control в VS Code отслеживает все ваши изменения и имеет стандартные команды Git (добавление, фиксацию, push, pull), встроенные прямо в пользовательский интерфейс.

Чтобы установить Git, ознакомьтесь с настройкой Git для работы с подсистемой Windows для Linux.

Установить терминал Windows (необязательно)

Новый терминал Windows поддерживает несколько вкладок (быстрое переключение между командной строкой, PowerShell или несколькими дистрибутивами Linux), пользовательские привязки клавиш (создание собственных сочетаний клавиш для открытия или закрытия вкладок, копирования + вставки и т. Д.), смайлики ☺ и пользовательские темы (цветовые схемы, стили и размеры шрифтов, фоновое изображение / размытие / прозрачность). Дополнительные сведения см. В документации по терминалу Windows.

  1. Получите Windows Terminal в Microsoft Store: при установке через магазин обновления обрабатываются автоматически.

  2. После установки откройте Терминал Windows и выберите Настройки , чтобы настроить терминал с помощью файла profile.json .

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

Несколько дополнительных расширений, которые вы можете рассмотреть, включают:

  • Раскладки клавиатуры из других редакторов: эти расширения могут помочь вашей среде чувствовать себя как дома, если вы переходите с другого текстового редактора (например, Atom, Sublime, Vim, eMacs, Notepad ++ и т. Д.).
  • Settings Sync: позволяет синхронизировать настройки VS Code в разных установках с помощью GitHub. Если вы работаете на разных машинах, это помогает поддерживать согласованность вашей среды на них.
  • Отладчик
  • для Chrome: после того, как вы закончите разработку на стороне сервера с Linux, вам нужно будет разработать и протестировать клиентскую сторону. Это расширение интегрирует ваш редактор VS Code со службой отладки браузера Chrome, что делает работу немного более эффективной.

Учебник по коду Visual Studio

Введение

С самого начала редакторы — странный зверь.Некоторые усиленно отстаивают свой выбор редактора. В мире Unix есть «войны» Emacs против vi , и я как бы представляю , почему так много времени тратит на обсуждение преимуществ одного по сравнению с другим.

За последние несколько лет я использовал множество редакторов и IDE. Я помню TextMate, TextWrangler, Espresso, BBEdit, XCode, Coda, Brackets, Sublime Text, Atom, vim, PHPStorm. Разница между IDE и редактором в основном заключается в наборе функций и сложности.

Я в большей степени предпочитаю редактор IDE, так как он быстрее и меньше мешает.

За последние 12 месяцев я использовал VS Code, редактор с открытым исходным кодом от Microsoft, и он быстро стал моим любимым редактором.

Стоит ли переходить на VS Code? И почему?

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

Этот редактор основан на многолетнем опыте редакторов Microsoft.

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

Он использует в качестве основы Electron, что позволяет ему быть кроссплатформенным и работать на Mac, Windows и Linux. Он создан с использованием Node.js, и вы можете расширить его с помощью JavaScript (что делает его выигрышным для всех нас, разработчиков JavaScript).

Это fast , самый быстрый редактор, который я когда-либо использовал после Sublime Text.

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

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

Начало работы

Домашняя страница Visual Studio Code в Интернете: https://code.visualstudio.com/.

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

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

При первом запуске редактора вы увидите экран приветствия:

Слева находится панель инструментов с 5 значками. Это дает доступ к:

  • Проводник
  • Искать
  • Система управления версиями
  • Отладчик
  • Расширения

Исследователь

Давайте начнем исследование с исследователя (игра слов).

Нажмите кнопку «Открыть папку» на боковой панели или Открыть папку... на странице приветствия. Оба вызовут окно выбора файлов.

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

VS Code покажет содержимое этой папки в вашем представлении:

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

Если вы выберете файл слева, этот файл откроется на главной панели:

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

Нажатие CMD + P покажет вам средство быстрого выбора файлов для быстрого перемещения файлов в больших проектах:

Вы можете скрыть боковую панель, на которой размещен файл, с помощью ярлыка CMD + B .

Примечание. Я использую быстрые клавиши Mac. В большинстве случаев в Windows и Linux вы просто меняете CMT на CTRL, и это работает, но не всегда. Распечатайте справочник по сочетаниям клавиш.

Искать

Второй значок на панели инструментов — «Поиск». При нажатии открывается интерфейс поиска:

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

Чтобы выполнить поиск, нажмите введите .

Щелчок по символу ▷ слева включает инструмент поиска и замены.

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

Контроль источника

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

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

Щелчок по первому значку сверху с логотипом Git позволяет нам инициализировать репозиторий Git:

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

Создайте первую фиксацию, написав текстовое сообщение и нажав Cmd-Enter или щелкнув значок ✔︎ вверху.

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

Значок с тремя точками при нажатии предлагает множество вариантов взаимодействия с Git:

Отладчик

Четвертый значок на панели инструментов открывает отладчик JavaScript. Это заслуживает отдельной статьи. А пока ознакомьтесь с официальной документацией.

Расширения

Пятый значок переносит нас в расширения.

Расширения — одна из отличительных черт VS Code.

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

У меня установлено много расширений.

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

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

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

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

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

В качестве примера установим его.

Сначала я проверяю количество просмотров. Это 1,2 миллиона, так много! И отзывы положительные (4. 5 5 ). При нажатии на имя расширения справа открываются подробные сведения.

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

Готово! Давайте проверим это, создав файл уценки с ошибкой, например с отсутствующим атрибутом alt на изображении. Это успешно нам сообщает:

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

Терминал

VS Code имеет встроенный терминал.

Вы можете активировать его из меню Вид ➤ Интегрированный терминал или используя CMD + \ `, и он откроется с вашей оболочкой по умолчанию.

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

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

Палитра команд

Палитра команд — очень мощный инструмент.Вы включаете его, щелкнув View ➤ Command Palette , или используя CMD + SHIFT + P

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

Общие операции, которые я выполняю:

  • Расширения: установка расширений
  • Предпочтения: Цветовая тема для изменения цветовой темы (я иногда меняю с ночи на день)
  • Форматировать документ , автоматически форматирующий код
  • Выполнить код , который предоставляется Code Runner, и выполняет выделенные строки JavaScript

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

Помните, когда вы ранее набирали CMD + P , чтобы увидеть список файлов? Это ярлык для конкретной функции палитры команд. Есть и другие:

  • Ctrl-Shift-Tab показывает активные файлы
  • Ctrl-G открывает палитру команд, позволяющую ввести номер строки для перехода к
  • CMD + SHIFT + O показывает список символов, найденных в текущем файле

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

шаблоны

Вы можете переключить используемую цветовую тему, щелкнув CMD-k + CMD-t или вызвав команду Preferences: Color Theme .

Это покажет вам список установленных тем:

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

Темы — это просто расширения.Вы можете установить новые темы, перейдя в менеджер расширений.

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

Моя любимая тема — Аю, она отлично подходит для любого времени дня, ночи, утра / вечера и после обеда.

Настройка

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

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

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

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

Перейдите в «Настройки» ➤ «Настройки» (также доступно через CMD-, ), чтобы увидеть их:

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

Я увеличил масштаб, используя CMD- + , и этот параметр также был сохранен в window.zoomLevel , поэтому при следующем запуске VS Code он запоминает мой выбор масштабирования.

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

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

Возможности конфигурации Nice

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

Вы можете открыть файл конфигурации JSON с помощью палитры команд и выбрать Открыть настройки (JSON) .

Несколько хороших параметров конфигурации, которые я установил в своем коде:

Опция Описание
"editor.minimap.enabled ": false Удалите миникарту, которая отображается справа от редактора
"explorer.confirmDelete": false Перестаньте спрашивать у меня подтверждение, когда я хочу удалить файл (у меня есть система контроля версий!)
"explorer.confirmDragAndDrop": false Отключить подтверждение перетаскивания
"editor.formatOnSave": true Автоматическое форматирование кода при сохранении
"редактор.formatOnPaste ": true Автоматическое форматирование кода, когда я вставляю его в свой код
"javascript.format.enable": true Включить форматирование для кода JavaScript
"files.trimTrailingWhitespace": true Обрезать пробелы в файлах
"editor.multiCursorModifier": "alt" Нажав клавишу Alt и щелкнув мышью, я могу выбрать несколько строк
"редактор.detectIndentation ": true Адаптировать к отступу файла, полезно при редактировании кода других людей
"editor.quickSuggestionsDelay": 0 Показывать предложенный код сразу, а не через несколько секунд

Лучший шрифт для кодирования

Мне нравится Fira Code. Он бесплатный и имеет несколько очень хороших программных лигатур, которые преобразуют обычные конструкции, такие как ! == и => , в более красивые символы:

Включите его, установив шрифт и добавив его в свою конфигурацию:

  "редактор.fontFamily ":" Код Фира ",
"editor.fontLigatures": true`  

Рабочие места

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

Рабочее пространство создается из существующего проекта, щелкнув меню Файл ➤ Сохранить рабочее пространство как ... .

Текущая открытая папка станет основной папкой рабочего пространства.

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

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

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

Одной из веских причин является возможность иметь несколько отдельных корневых папок.Вы можете использовать File ➤ Add Folder to Workspace , чтобы добавить новую корневую папку, которая может располагаться в любом месте файловой системы, но будет отображаться вместе с другой существующей папкой, которая у вас была.

Монтаж

IntelliSense

При редактировании на одном из поддерживаемых языков (JavaScript, JSON, HTML, CSS, Less, Sass, C # и TypeScript) VS Code имеет IntelliSense, технологию, которая намекает на автозаполнение функций и параметров при их вводе.

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

Две удобные команды ( Format Document и Format Selection ) доступны на палитре команд для автоформатирования кода.VS Code по умолчанию поддерживает автоматическое форматирование для HTML, JavaScript, TypeScript и JSON.

Ошибки и предупреждения

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

Это все предупреждения или ошибки. Вы можете попытаться найти их в коде, где вы видите части, подчеркнутые красным, или вы также можете нажать CMD-Shift-M (или выбрать View ➤ Problems )

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

До сих пор я показывал вам множество сочетаний клавиш.

Запоминать их все становится сложно, но они помогают продуктивно работать. Я предлагаю распечатать официальную шпаргалку по ярлыкам для Mac, Linux и Windows.

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

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

Команда VS Code предоставляет «из коробки» раскладки клавиатуры для самых популярных редакторов: vim, Sublime Text, Atom, IntelliJ, Eclipse и других.Они доступны как плагины. Открыв меню Preferences ➤ Keymaps Extensions .

Фрагменты кода

Сниппеты очень крутые.

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

Для JavaScript / React одним из популярных является VS Code ES7 React / Redux / React-Native / JS snippets

Вы просто набираете rfe , нажимаете TAB, и в вашем редакторе появляется:

  импортировать React из react

const $ 1 = props => {
  возврат 
$ 0
} экспорт по умолчанию $ 1

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

Вы также можете определить свои собственные сниппеты. Щелкните «Настройки » ➤ «Пользовательские фрагменты» и следуйте инструкциям по созданию собственного файла фрагментов.

Расширения витрина

  • GitLens : визуализируйте, кто внес последнее изменение в строку вашего кода и когда это произошло
  • История Git визуализация и поиск в истории Git
  • CSS Peek позволяет просматривать и редактировать определения CSS, проверяя класс элемента HTML.Очень кстати.
  • Code Runner позволяет запускать фрагменты кода, выбранные в редакторе, и многое другое. Поддерживает множество языков.
  • Отладчик для Chrome позволяет отлаживать код JavaScript, запущенный в браузере, с помощью отладчика кода VS.
  • Раскраска парных скобок удобна для визуализации окончаний скобок в вашем коде.
  • Indent-Rainbow раскрашивает уровни отступов вашего кода.
  • Prettier Посмотрите мой путеводитель по Prettier
  • ESLint проверьте мое руководство по ESLint
  • IntelliSense для CSS улучшенное автозаполнение для CSS на основе определений вашего рабочего пространства
  • npm включает служебные функции npm из палитры команд
  • Автоматически закрывать теги автоматически закрывать теги HTML / JSX / *
  • Тег автоматического переименования автоматически переименовывает закрывающий тег, когда вы меняете открывающий, и наоборот

Команда интерфейса командной строки VS Code

Откройте палитру команд и найдите команду install 'code' в команде PATH .

Нажмите Enter, и команда code будет доступна глобально в вашей командной строке.

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

код -n создаст новое окно.

Полезная вещь, о которой не всегда известно, — это то, что VS Code может быстро показать разницу между двумя файлами с кодом --diff file1.js file2.js .

Решение проблем с высокой загрузкой ЦП

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

  "files.exclude": {
    "/.git": правда,
    "/.DS_Store": правда,
    "/ node_modules": правда,
    "/ node_modules /": правда
  },
  "search.exclude": {
    "/ node_modules": правда
  },
  "files.watcherExclude": {
    "/ node_modules /": верно
  },  

4 удобных использования кода Visual Studio — помимо кодирования

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

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

Просмотр баз данных

Многие проекты разработки приложений включают базы данных определенного типа. Обычно такой базой данных управляет настольное приложение или веб-портал, но множество надстроек для Visual Studio Code позволяют запрашивать базы данных непосредственно из приложения.Например, vscode-database обеспечивает быстрые подключения и запросы к MySQL и PostgreSQL, а vscode-sqlite позволяет работать с универсальным SQLite. У пользователей MongoDB есть собственное расширение. Обратите внимание, что эти расширения лучше всего подходят для просмотра и выполнения запросов, а не для управления деталями базы данных, такими как управление структурами таблиц (если вам не удобно делать такие вещи с помощью запросов).

Разработка и тестирование API-интерфейсов

API-интерфейсы позволяют программным компонентам работать вместе независимо от того, где они живут и на чем созданы.Ряд надстроек для Visual Studio Code позволяет тестировать API прямо в редакторе или работать с форматами определения API. tropicRPC позволяет автоматически тестировать API gRPC с конфигурацией теста, сохраненной в проекте VS Code. openapi-lint обеспечивает проверку и анализ файлов OpenAPI. OpenAPI — это формат, наиболее часто используемый для написания определений API; openapi-lint также обеспечивает экспорт в другие форматы, включая YAML и JSON. Swagger Viewer обеспечивает предварительный просмотр, а также линтинг и файлы IntelliSense для OpenAPI.

Обменивайтесь сообщениями с коллегами

Еще до того, как появился COVID-19 и радикально изменил способ нашей работы, инструменты для совместной работы уже значительно упрощали работу в режиме реального времени издалека. Пользователи Slack и Discord могут использовать Visual Studio Code для взаимодействия с этими сервисами, а надстройка Chat от Arjun Attam работает с обеими этими сервисами и даже позволяет интегрировать их непосредственно в окно VS Code.

Отслеживайте свою продуктивность

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

Copyright © 2020 IDG Communications, Inc.

Как запустить R в Visual Studio Code

Если вы счастливый пользователь RStudio, возможно, у вас никогда не было желания попробовать другой редактор для R (или даже Python).Но если вы хотите попробовать GitHub Copilot — новый помощник GitHub по кодированию на основе искусственного интеллекта, вам нужно будет написать свой код в Microsoft Visual Studio Code. Пока что GitHub Copilot доступен только в редакторе Microsoft, что неудивительно, учитывая, что Microsoft владеет GitHub.

GitHub Copilot использует ИИ, чтобы предлагать строки кода во время работы. Это не , оптимизированный для R, но он по-прежнему будет рекомендовать код R. Дэвид Смит, сторонник облачных вычислений в Microsoft, опубликовал в Твиттере краткую демонстрацию, показывающую, что бета-версия GitHub Copilot может даже предлагать код tidyverse, а также базовый R.

Настройка Visual Studio Code для R

К сожалению, настроить Visual Studio Code для работы с R не так просто, как установить RStudio. Это потому, что VSCode может поддерживать сотни языков программирования, что значительно больше, чем RStudio. Предлагая все эти возможности по умолчанию из коробки, вы получите довольно раздутое программное обеспечение. Итак, VS Code — это модульный , и большинству пользователей приходится устанавливать расширения, чтобы оптимизировать VS Code для своих конкретных случаев использования.

Для пользователей R это означает установку пары расширений и настройку нескольких параметров.

Первым шагом, очевидно, является загрузка Visual Studio Code, которую вы можете найти на веб-сайте Visual Studio Code. VS Code бесплатен и доступен для Windows, Mac и Linux. Установите его, как любой другой программный пакет.

Далее следует добавление поддержки R. На левой панели навигации «Действия» в Visual Studio Code щелкните значок с четырьмя квадратами для поиска расширений. Я искал «язык R», потому что поиск «R» вернет кучу нерелевантных результатов.Смит рекомендовал расширение R Юки Уэды для Visual Studio Code, также известное как vscode-R, которое предлагает базовую поддержку языка R (запуск, фрагмент, средство просмотра). Он отображается как первый результат поиска.

Шэрон Махлис, IDG

Щелкните значок расширений для поиска расширений языка R.

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

Шэрон Махлис, IDG

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

Я также прочитал вики-страницу проекта vscode-R на GitHub и главную страницу GitHub, чтобы узнать, что еще я мог бы добавить или изменить для улучшения моего опыта работы с R.

Одно из первых предложений — использовать радианный терминал. Это не расширение VS Code, а приложение, написанное на Python, а это значит, что для работы Radian в вашей системе должен быть установлен Python. У меня уже есть Python и менеджер пакетов conda, установленные на моем Mac, поэтому я использовал эту команду установки для radian:

 conda install -c conda-forge radian 

Существует также команда установки pip для тех, кто использует популярный пакет Python manager:

 pip install -U radian 

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

Есть еще пара других рекомендуемых установок для расширения vscode-R: languageserver и vscode-r-lsp. (Обновление: возможности vscode-r-lsp теперь интегрированы в расширение vscode-R, поэтому вам больше не нужно устанавливать его отдельно.)

Языковой сервер

— это обычный пакет R, поэтому я могу вернуться к RStudio или терминал R и установите его обычным способом, используя install.packages ("languageserver") .

Чтобы установить vscode-r-lsp, я могу либо вернуться в свое окно кода Visual Studio и установить его с торговой площадки расширений VS Code, либо нажать кнопку установки на веб-странице vscode-r-lsp.

Вики-страница расширения vscode-R также рекомендует, кстати, установить два других пакета R: jsonlite и rlang. Они уже есть в моей системе, но вы тоже захотите убедиться, что они есть. Если вы этого не сделаете, и jsonlite, и rlang можно установить из CRAN с помощью install.packages () .

Настройка параметров Visual Studio Code для R

В инструкциях по расширению vscode-R также говорилось, что мне нужно «включить config r.bracketedPaste ». Это означает, что мне нужно войти в настройки VS Code и включить этот параметр, если он еще не включен.

Самый простой способ изменить настройку VS Code — открыть пользовательский интерфейс настроек. (Другой вариант — редактирование базового файла JSON с настройками.) Чтобы перейти к пользовательскому интерфейсу настроек, перейдите в меню «Файл »> «Настройки»> «Настройки» в Windows или «Код »> «Настройки»> «Настройки » в Mac. Затем вы можете выполнить поиск по запросу «bracketedPaste» и щелкнуть, чтобы включить его.

Вы также можете перейти к пользовательскому интерфейсу настроек с помощью палитры команд Visual Studio Code. Палитра команд — это удобный способ доступа ко всем возможностям VS Code: набирает вместо того, чтобы указывать и щелкать меню.Во многих средах разработки программного обеспечения есть палитры команд, и с ними полезно познакомиться. В VS Code вы можете открыть палитру команд с помощью клавиши F1 или комбинации клавиш Control-Shift-P в Windows или Command-Shift-P на Mac.

Шэрон Махлис, IDG

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

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

В документации расширения vscode-R упоминается еще пара параметров, которые необходимо обновить. Один из них — включить R Session Watcher . Другой параметр, который я включил, был R: Always Use ActiveTerminal . Это означает, что весь код R будет отправлен на текущий активный терминал, даже если это не терминал R, вместо запуска нового терминала R. Это решило проблему, с которой я столкнулся на своем Mac, поэтому я включил ее. Однако это означает, что в начале каждого сеанса R в VS Code мне нужно ввести «радиан» в «обычный» (не R) терминал, прежде чем пытаться запустить R-код.

Как видите, это немного сложнее в настройке, чем одноразовая установка RStudio. Вы можете думать об этом как о первой установке R, за которой часто следует установка множества пакетов, таких как tidyverse, data.table и janitor, поверх вашей новой базовой установки R.

Напишите и запустите код R в Visual Studio Code

Инструкции по расширению vscode-R предлагают пользователям открывать папку при работе в R, а не просто создавать новый файл.Вы можете открыть папку, перейдя в Файл> Добавить папку в рабочую область . После этого вы можете использовать значок «проводник» в верхней части левой панели навигации по действиям для просмотра доступных файлов.

Еще один шаг для настройки сеанса, если я хочу, чтобы запускал код , а также записывал его: мне нужно открыть «обычный» терминал без R, а затем запустить мой терминал radian для R, набрав radian . Для этого я перехожу в верхнее меню и выбираю Terminal> New Terminal .Как только я набираю радиан в терминал, запускается терминал радиан R, и я готов к работе.

Вы можете запустить строку кода или несколько строк, которые вы выбрали, нажав Control-Enter в Windows или Command-Enter на Mac. Это очень похоже на RStudio.

Справка в VS Code немного отличается от RStudio. Пользуетесь справкой () или ? Ярлык справки не такой элегантный. Это больше похоже на справку Unix — и вам нужно набрать q , чтобы выйти из нее после просмотра.

Шэрон Махлис, IDG

Наведите указатель мыши на функцию, например geom_bar () ggplot2, и VS Code вернет информацию о файле справки.

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

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

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

Шэрон Махлис, IDG

Используйте название цвета или шестнадцатеричный код в своем сценарии R, и VS Code покажет маленькую рамку с этим цветом. Щелкните поле, и оно превратится в палитру цветов.

В

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

Фрагменты кода R в Visual Studio

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

В первый раз, когда я перешел в Код > Настройки> Пользовательские фрагменты и выбрал R, файл JSON фрагментов R был автоматически сгенерирован.Теперь, если я перейду в Код > Настройки> Пользовательские фрагменты , я могу открыть этот файл фрагментов r.json и отредактировать старые фрагменты или добавить новые.

Вот синтаксис для создания фрагмента в VS Code:

 «Заголовок фрагмента»: {
«префикс»: «what_i_type_to_trigger_snippet»,
«body»: [
«здесь мой код R;»,
«myfun ( $ {1: argument_label} #example code "
],
" description ":" Необязательное описание для моего фрагмента "
}

А ниже приведен пример моего фрагмента для создания базовой гистограммы ggplot2 с синими полосами.

 "Базовая синяя диаграмма столбцов": {
"prefix": "myg_barplot_blue",
"body": [
"ggplot ($ {1: mydata}, aes (x = $ {2: myxcol}, y = $) {3: myycol})) + ",
" geom_bar (stat = 'identity', color = 'black', fill = '# 0072B2') "
],
" description ":" Базовая гистограмма ggplot с синими полосами с черным контуром "
}

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

RStudio также имеет фрагменты кода. Оба редактора кода позволяют вам видеть доступные фрагменты, когда вы начинаете вводить аббревиатуры фрагментов (именно поэтому я придумал соглашение начинать все мои фрагменты ggplot2 с myg_ ).Однако VS Code также позволяет увидеть полный список ваших фрагментов с помощью команды «Вставить фрагмент» из палитры команд — просто нажмите клавишу F1 и введите «Вставить фрагмент».

Использовать код Visual Studio для R?

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

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

Тем не менее, я, скорее всего, пока буду придерживаться RStudio, особенно для задач, специфичных для R, таких как документы R Markdown и приложения Shiny. Но это может измениться, когда я наконец получу доступ к GitHub Copilot.

Дополнительные советы по R см. На странице InfoWorld «Сделайте больше с помощью R».

Copyright © 2021 IDG Communications, Inc.

Visual Studio Code Dev

Visual Studio Code — это бесплатный, легкий и мощный редактор кода для Windows, Mac и Linux, основанный на Electron / Chromium.Он имеет встроенную поддержку JavaScript, TypeScript и Node.js, а также богатую экосистему расширений, которая добавляет intellisense, отладку, подсветку синтаксиса и т. Д. Для многих языков (C ++, Python, Go, Java). Он работает без особых настроек. Начни здесь.

Это НЕ полноценная IDE, как Visual Studio. Это два совершенно разных продукта. Единственное сходство с Visual Studio заключается в том, что оба они от Microsoft.

Вот что хорошо работает:

  • Редактирование кода работает хорошо, особенно если вы привыкли к сочетаниям клавиш.VS Code очень отзывчивый и может обрабатывать даже большие базы кода, такие как Chromium.
  • Интеграция с Git — это взрыв. Встроенный параллельный просмотр, локальная фиксация и даже расширения для просмотра истории и обвинений.
  • Отладка работает хорошо, хотя время запуска может быть довольно большим (~ 40 секунд с gdb в Linux, намного меньше в Windows). Вы можете пошагово выполнять код, проверять переменные, просматривать стеки вызовов для нескольких потоков и т. Д.
    • Дополнительные сведения об отладке кода Python см. Здесь.
  • Открытие файлов и поиск по всему решению теперь работают хорошо после проблем в более ранних версиях.
  • Здание работает хорошо. Инструменты сборки легко интегрировать. Предупреждения и ошибки отображаются на отдельной странице, и вы можете щелкнуть, чтобы перейти к соответствующей строке кода.
  • VSCode Remote, который позволяет редактировать удаленно размещенный код и даже запускать дорогостоящие в вычислительном отношении плагины, такие как vscode-clangd, на удаленном сервере / рабочей станции (см. Раздел «Удаленный доступ»).Отлично подходит для работы на дому. (Гуглеры: см. Go / vscode-remote].)

Обновление страницы

Держите этот документ в актуальном состоянии. VS Code все еще находится в активной разработке и может быть изменен. Этот документ зарегистрирован в репозитории Chromium git, поэтому, если вы вносите изменения, прочтите руководство по документации и отправьте список изменений.

Все пути к файлам и команды были протестированы в Linux. Для Windows и Mac может потребоваться немного другая настройка (например, Ctrl -> Cmd ).Пожалуйста, обновите эту страницу соответствующим образом.

Установка

Установка

Следуйте инструкциям на https://code.visualstudio.com/docs/setup/setup-overview. Чтобы запустить его в Linux, просто перейдите в папку Chromium src и введите код . в терминале. Аргумент , код — это базовый каталог рабочей области. VS Code не требует файлов проекта или решения. Однако он сохраняет настройки рабочего пространства в папке .vscode в вашем базовом каталоге.

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

Git в Windows

Если на вашем компьютере установлен только depot_tools Git, даже если он находится в вашем PATH, VS Code проигнорирует его, поскольку он, похоже, ищет git. exe . Чтобы интеграция с Git работала, вам необходимо добавить в настройки следующее:

 {
  "git.path": "C: \\ src \\ depot_tools \\ git.bat"
}
 

Полезные расширения

До сих пор у вас есть базовая версия VS Code без особой языковой поддержки.Далее мы установим несколько полезных расширений. Перейдите в окно расширений ( Ctrl + Shift + X ) и установите эти расширения, вы, скорее всего, будете использовать их каждый день:

  • C / C ++ — Форматирование кода, отладка, Intellisense. Позволяет использовать clang-format (через параметр C_Cpp.clang_format_path ) и форматирование при сохранении (через параметр editor.formatOnSave ).
  • Python — Линтинг, intellisense, форматирование кода, рефакторинг, отладка, фрагменты.
  • Переключить заголовок / источник — Переключение между .cc и .h с помощью F4 . Расширение C / C ++ поддерживает это также через Alt + O , но иногда выбирает неправильный файл, когда в рабочей области есть несколько файлов с одинаковыми именами.
  • Поддержка Protobuf — Подсветка синтаксиса для файлов .proto.
  • Поддержка Mojom IDL — Подсветка синтаксиса и языковой сервер для файлов .mojom.На данный момент это недоступно на торговой площадке VS Code. Вам нужно установить его вручную.
  • vscode-clangd — Если вы не планируете использовать VSCode для отладки, vscode-clangd — отличная альтернатива C / C ++ IntelliSense. Он знает, как скомпилировать Chromium, что позволяет ему обеспечивать более интеллектуальное автозаполнение, чем C / C ++ IntelliSense, а также позволяет переходить от функций к их определениям. См. Clangd.md для инструкций по установке. Если вам нужно отладить, включите расширение C / C ++, но отключите «C_Cpp: Intelli Sense Engine» и перезапустите VSCode.
  • Rewrap — Переносить строки из 80 символов с помощью Alt + Q .
  • Remote — удаленно подключитесь к вашей рабочей станции через SSH с помощью портативного компьютера. См. Раздел «Удаленный доступ» для получения дополнительной информации о том, как это настроить.

Вам также могут быть полезны следующие расширения:

  • Аннотатор — просмотр обвинений Git.
  • История Git (журнал git) — Просмотр истории Git.
  • chromium-codesearch — Только для Mac и Linux: добавляет возможность открывать текущую строку в Chromium Code Search. Все остальные функции устарели, поэтому в настоящее время их полезность ограничена.
  • change-case — Быстро изменить регистр текущего выделения или текущего слова.
  • Instant Markdown — Предварительный просмотр мгновенной уценки (.md) в браузере по мере ввода. Этот документ был написан с этим расширением!

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

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

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

Советы по использованию

  • Ctrl + P открывает окно поиска для поиска и открытия файла.
  • F1 или Ctrl + Shift + P открывает окно поиска для поиска команды (например, Задачи: Выполнить задачу).
  • Ctrl + K, Ctrl + S открывает редактор привязок клавиш.
  • Ctrl + ` переключает встроенный терминал.
  • Ctrl + Shift + M переключает отображение проблем (предупреждения линтера, ошибки компиляции и предупреждения). Во время компиляции вы будете много переключаться между терминалом и отображением проблемы.
  • Alt + O переключает между исходным и заголовочным файлом.
  • Ctrl + G переход к строке.
  • F12 переходит к определению символа под курсором (также доступно в контекстном меню, вызываемом правой кнопкой мыши).
  • Shift + F12 или F1, CodeSearchReferences, Return показывает все ссылки символа на курсоре.
  • F1, CodeSearchOpen, Return открывает текущий файл в поиске кода.
  • Ctrl + D выделяет слово под курсором. Многократное нажатие на нее приводит к множественному выделению следующих вхождений, поэтому при вводе одного вхождения будут все из них, а Ctrl + U отменяет выбор последнего вхождения.
  • Ctrl + K, Z входит в режим Дзен, полноэкранный режим редактирования, в котором виден только текущий редактор.
  • Ctrl + X без выделения чего-либо обрезает текущую строку. Ctrl + V вставляет линию.

Поддержка Java / Android

Чтобы получить поддержку Java в VS Code, вам необходимо установить расширение «Java Extension Pack», но вы захотите немедленно удалить или отключить расширение Maven для Java, чтобы оно перестало ныть вы, как нам это не понадобится.

Настройка автозавершения кода / поиска справочника и т. Д.

Вам необходимо создать заполнитель.classpath файл и найдите его. Чтобы сгенерировать его, щелкните правой кнопкой мыши любую исходную папку Java на левой панели и выберите «Добавить папку к исходному пути Java». Его местоположение будет зависеть от того, занимаетесь ли вы локальной или удаленной разработкой. Локальный путь в Linux будет выглядеть примерно так:

~ / .vscode / data / User / workspaceStorage / /redhat.java/jdt_ws/ /.classpath

Вы можете найти несколько папок при поиске <проект> . Выбирайте что угодно, кроме jdt.ls-java-project . Если вы видите только jdt.ls-java-project , попробуйте снова использовать параметр «Добавить папку в исходный путь Java».

При удаленной разработке файл будет находиться под ~ / .vscode-server / на вашем удаленном компьютере.

Вам нужно будет заменить все содержимое этого файла содержимым tools / android / eclipse / .classpath (внешний) или clank / development / ide / eclipse / .classpath (сгенерировано gclient runhooks для разработчиков Chrome), а затем замените некоторые пути, поскольку vscode интерпретирует некоторые пути иначе, чем eclipse.

  • Заменить: kind = "src" path = " на kind =" src "path =" _ /
    • например.
  • Заменить: kind = "lib" path = "../ src на kind =" lib "path =" _
    • например.
  • Удалите все вложенные пути (или исключите их из родительских).На момент написания:
    • third_party / android_protobuf / src / java / src / main / java
    • third_party / junit / src / src / main / java

Также убедитесь, что export ANDRO / usr / local / google / home / {your_ldap} / Android / Sdk находится в каталоге ~ / .bashrc удаленного компьютера.

Затем перезапустите vscode, откройте файл Java и немного подождите.

Советы по отладке:

  • Щелчок правой кнопкой мыши по папке в vscode и нажатие «Добавить папку в исходный путь Java» приведет к ошибке, если есть синтаксические проблемы с вашим путем к классам.(Не используйте это на самом деле, добавляйте новые пути к вашему пути к классам, так как это не будет работать правильно)
    • Если нет синтаксических ошибок, убедитесь, что используется правильный файл .classpath, проверив, действительно ли папка была добавлена ​​в. файл пути к классам, который вы редактировали.

Настройка для Chromium

VS Code настраивается через файлы JSON. Этот абзац содержит файлы конфигурации JSON, которые особенно полезны для разработки Chromium. См. Документацию VS Code для введения в настройку VS Code.

Настройки рабочего пространства

Откройте файл //tools/vscode/settings.json5 и проверьте там настройки по умолчанию. Не стесняйтесь фиксировать добавленные или удаленные настройки, чтобы улучшить командную разработку, или изменяйте настройки локально в соответствии с личными предпочтениями. Не забудьте заменить ! Чтобы использовать эти настройки оптом, введите следующие команды в свой терминал, находясь в каталоге src:

 $ mkdir .vscode /
$ cp tools / vscode / settings.json5 .vscode / settings.json
 

Примечание. Эти настройки предполагают, что папка рабочей области (корневая папка, отображаемая на вкладке «Проводник») — это каталог Chromium src / . Если это не так, замените все ссылки на $ {workspaceFolder} на путь к вашему src / .

Задачи

Далее мы расскажем VS Code, как компилировать наш код, запускать тесты и читать предупреждения и ошибки из выходных данных сборки. Откройте файл //tools/vscode/tasks.json5. Это предоставит задания для выполнения основных задач.Возможно, вам придется настроить команды в соответствии с вашей ситуацией и потребностями. Чтобы использовать эти настройки оптом, введите в свой терминал следующую команду:

 $ cp tools / vscode / tasks.json5 .vscode / tasks.json
 

Команды запуска

Команды запуска эквивалентны F5 в Visual Studio: они запускают некоторую программу или отладчик. При желании они могут запускать некоторые задачи, определенные в файле tasks.json . Команды запуска можно запускать из окна отладки ( Ctrl + Shift + D ).Откройте файл по адресу //tools/vscode/launch.json5 и настройте пример команд запуска в соответствии с вашей ситуацией и потребностями (например, значение «type» требует настройки для Windows). Чтобы использовать эти настройки оптом, введите в свой терминал следующую команду:

 $ cp tools / vscode / launch.json5 .vscode / launch.json
 

Привязки клавиш

Чтобы изменить привязки клавиш, нажмите Ctrl + K, Ctrl + S . Вы увидите значения по умолчанию слева и ваши переопределения справа, сохраненные в файле keybindings.json . Чтобы изменить привязку клавиш, скопируйте соответствующую привязку клавиш вправо. Это довольно понятно.

Вы можете привязать любую команду к клавише, даже команды, указанные расширениями, такими как CodeSearchOpen . Например, чтобы привязать CodeSearchOpen к F2 , просто добавьте {"key": "F2", "command": "cs.open"}, . Обратите внимание, что заголовок команды CodeSearchOpen не будет работать. Вы должны получить фактическое имя команды из пакета.json с расширением.

Если вы привыкли к другим редакторам, вы также можете установить свою любимую раскладку. Например, чтобы установить раскладки клавиатуры eclipse, установите расширение vscode-eclipse-keybindings . Больше раскладок можно найти на торговой площадке.

Некоторые привязки клавиш, которые могут быть вам полезны, доступны по адресу //tools/vscode/keybindings.json5. Пожалуйста, посмотрите и настройте их в соответствии с вашей ситуацией и потребностями. Чтобы использовать эти настройки оптом, введите в свой терминал следующую команду:

 $ cp tools / vscode / keybindings.json5 .vscode / keybindings.json
 

Remote

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

Чтобы запустить это, установите расширение Remote pack, а затем убедитесь, что в вашем файле конфигурации ssh есть удаленное соединение:

~ / .ssh / config :

 Host my-connection
  Имя хоста мой-удаленный-хост.corp.company.com
 

VSCode отобразит это соединение в разделе «Remote Explorer» слева. Чтобы запустить VSCode с этим подключением, щелкните значок «+ окно» рядом с указанным именем хоста. Вы выбираете папку — используйте корень папки «src». Это откроет новое окно VSCode в «удаленном» режиме. Теперь вы можете устанавливать расширения специально для удаленного подключения, например vscode-clangd и т. Д.

Chromebook

Для сотрудников Google вот специальные инструкции Google по настройке удаленной разработки на Chromebook без использования Crostini.

Windows и SSH

Для удаленных инструментов VSCode требуется «sshd», который по умолчанию не устанавливается в Windows.

Для сотрудников Google sshd уже должен быть установлен на вашей рабочей станции, а VSCode должен работать удаленно, если вы следовали инструкциям по установке в go / building-chrome-win. Если у вас все еще возникают проблемы, обратитесь к go / vscode-remote # windows.

Пользователи, не принадлежащие к Google, могут следовать инструкциям Microsoft по установке сервера OpenSSH. После этого шага VSCode должен работать удаленно.

Фрагменты

В //tools/vscode/cpp.json5 есть несколько полезных фрагментов.

Вы можете установить их в своем профиле пользователя (путь может отличаться в зависимости от платформы):

 $ cp tools / vscode / cpp.json5 ~ / .config / Code / User / snippets / cpp.json
 

Или установите их как фрагменты проекта после установки расширения Project Snippets:

 $ cp tools / vscode / cpp.json5 .vscode / snippets / cpp.json
 

Советы

Папка
out

Автоматически сгенерированный код помещается в подпапку out /, что означает, что эти файлы игнорируются VS Code (см. Files.e] * «: правда, «out _ * / **»: правда, },

Как только это произойдет, вы можете использовать

 "! Out / Debug / gen / **": true
 

в files.exclude вместо символической ссылки.

Использование VS Code в качестве редактора git

Добавьте [core] editor = "code --wait" в свой файл ~ / .gitconfig , чтобы использовать VS Code в качестве редактора для сообщений git commit и т. Д. Обратите внимание, что редактор запускается значительно медленнее, чем nano или vim. Чтобы использовать VS Code в качестве инструмента слияния, добавьте [merge] tool = code .

Имена задач

Обратите внимание, что мы назвали задачи 1-build_chrome_debug , 2-build_chrome_release и т. Д. Это позволяет быстро выполнять задачи, нажимая их номер: нажмите Ctrl + P и введите task , где — номер задачи. Вы также можете создать сочетание клавиш для запуска задачи. File> Preferences> Keyboard Shortcuts и добавьте {"key": "ctrl + r", "command": "workbench.action.tasks.runTask "," when ":"! inDebugMode "} . Затем достаточно нажать Ctrl + R и ввести .

Работа на ноутбуке

Вы можете отключить git status автообновление для экономии заряда батареи.

 "git.autorefresh": false,
 
Редактирование в нескольких репозиториях Git

Если вы часто работаете в нескольких репозиториях Git, которые являются частью репозитория Chromium, вы можете обнаружить, что встроенные инструменты не работают должным образом для файлов, находящихся под папками, которые являются частью .Файл gitignore зарегистрирован в Chromium.

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

Чтобы отредактировать это, перейдите в Настройки -> Выберите вкладку Workspace , выберите открытие как JSON (кнопка в правом верхнем углу) и настройте папок следующим образом (измените пути в соответствии с вашей локальной настройкой и использование):

 {
  "папки": [
    {
      "путь": "хром / SRC / третья_часть / perfetto"
    },
    {
      "путь": "хром / SRC"
    }
  ]
}
 

Невозможно открыть ресурс $ File недоступен при отладке Chromium в Linux

Chromium недавно изменил путь к файлу относительно выходного каталога.

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

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

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

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

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