Как работать в visual studio code: подробный гайд по настройке и установке плагинов

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Внешний вид

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Управление Vim

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

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

Отладка кода

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

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

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

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

Заключение

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

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

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

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

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

Если больше интересен редактор кода

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

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

Сегодня речь пойдет о редакторе кода 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

Visual Studio Code — это среда разработки от компании Microsoft, созданная совсем недавно с использованием новых технологий (например Node.js). В отличие от полного пакета Visual Studio, эта среда представляет собой текстовый редактор с возможностью подключения огромного количества плагинов. Она предназначена для разработки на различных языках программирования и для разных платформ. Поддерживаются не только Windows, но и Linux, а также MacOS.

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

Содержание статьи:

Как пользоваться Visual Studio Code

В отличие от предыдущих статей на эту тему, я не буду рассказывать про установку. Об этом есть полноценная статья, поэтому посмотрите там. Программа без труда ставится с официального сайта или из snap-пакета в любом дистрибутиве, основанном на Debian или RedHat. Первым делом остановимся на интерфейсе программы. Причём будет рассмотрена именно работа Visual Studio Code для начинающих. Если вы уже опытный разработчик, вряд-ли вы найдёте для себя что-то новое.

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

Интерфейс программы типичен для многих редакторов кода. Но есть и свои особенности. Условно главное окно программы можно разделить на семь частей:

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

  1. Главное меню программы — можно использовать для доступа к настройкам, открытия проектов и папок и многого другого;
  2. Левая панель — эта панель есть только в VS Code, она позволяет переключаться между просмотром дерева каталогов, поиском, отладкой и окном установки дополнений. Сюда же некоторые расширения добавляют свои меню, например Docker, Git и расширение для управления проектами.
  3. Проводник — по умолчанию здесь отображается дерево каталогов, но тут же вы обнаружите настройки отладки или доступные для установки расширения, если выбран соответствующий пункт на боковой панели.
  4. Рабочая область — здесь выполняется редактирование файла.
  5. Мини карта — позволяет быстро ориентироваться по открытому исходнику.
  6. Нижняя панель — здесь отображается вывод программы при выполнении, консоль самой Visual Code, а также здесь есть встроенный терминал.
  7. Статус бар — отображается общая информация о состоянии программы.

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

По умолчанию среда устанавливается на английском языке. Лучше так всё и оставить: большинство информации по программированию в интернете на английском языке, и, если вы привыкните к такому формату, вам будет проще во всём этом ориентироваться. Но если вас интересует, как русифицировать Visual Studio Code, то делается это очень просто. На боковой панели кликните по значку с квадратиками, который отвечает за установку дополнений, и наберите в поле поиска vscode-language-pack-ru; утилита найдёт только один пакет, нажмите Install, чтобы установить его:

Для выбора языка нажмите Ctrl+Shift+P и начните набирать Config, в предложенном списке выберите Configure Display Language:

Затем выберите ru и перезапустите программу. Всё. После этого интерфейс программы станет русским.

3. Внешний вид

Одна из важных вещей для среды разработки — её внешний вид и тема оформления. Чтобы изменить тему оформления, надо нажать сочетание Ctrl+Shift+P и набрать Theme. Затем в меню надо выбрать Color Theme:

Затем в открывшемся меню осталось выбрать нужную тему стрелками и нажать Enter. По умолчанию доступно несколько тёмных и светлых тем:

Скачать новые темы можно с официального сайта Visual Studio Code. Здесь же можно настроить тему иконок.

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

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

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

После этого вы сможете очень просто управлять своими проектами.

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

Один из самых важных моментов в работе с кодом — это его однообразие. Приводить код к одному виду вручную не всегда удобно — для этого и были придуманы различные расширения. Это PHP-CS-Fixer для PHP и Prettier для JS/HTML/CSS. Установите их через меню установки дополнений, а затем используйте сочетание клавиш Ctrl+Shift+F в Windows или Ctrl+Shift+I в Linux, для того чтобы выполнять выравнивание кода Visual Studio Code.

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

Очень сильно помогает в разработке автоматическое дополнение кода. Вы пишите начало слова, а среда сама вам подсказывает, чем его можно завершить. Пакеты, которые позволяют выполнять автодополнение, называются *-intellisense. Рекомендуется установить PHP Intellisense,  CSS Intellisense и Path Intellisense для автодополнения путей к файлам. Для разных фреймворков существуют свои расширения автоматического дополнения кода, например, для Laravel есть Laravel Extra Intellisense. Подсветка синтаксиса обычно уже встроена в VS Code для многих языков, однако если её нет, тоже ищите расширение.

7. Управление Vim

Я привык к редактору Vim и хочу использовать его стиль везде, даже в Visual Studio Code. Если вы тоже хотите, для нас с вами есть расширение Vim, которое переносит все сочетания клавиш и режимы работы Vim в редактор Visual Studio. После его установки вы сможете перемещаться по файлу кнопками h, j, k, l, использовать Esc и сохранять файл командой :w.

8. Отладка кода

В Visual Code есть интерфейс, с помощью которого выполняется отладка кода, но прежде, чем вы его сможете использовать для PHP, его придётся настроить. Для отладки кода на PHP используется отладчик Xdebug, поэтому необходимо установить дополнение PHP Debug. Далее кликните по треугольнику со значком жука на боковой панели. Если вы раньше ничего не отлаживали в этом проекте, то программа предложит вам создать файл launch.json. Кликните по этой ссылке. В открывшемся списке выберите PHP:

В полученном файле надо обратить внимание только на поле port. Он должен быть такой же, как и значение переменной xdebug.remote_port в php.ini. У меня это 9008. Сохраните изменения и нажмите зелёный треугольник для начала отладки.

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

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

Затем Xdebug подключается к VS Code по выбранному нами порту и передаёт туда всю необходимую информацию. Только после этого вы сможете смотреть переменные и выполнять код пошагово:

9. Терминал

В завершении поговорим о чём-то более простом. Одно из преимуществ VS Code перед другими редакторами — это встроенный терминал, который позволяет выполнять команды в системной оболочке Linux или в выбранной оболочке Windows. Если терминал ещё не открыт, вы можете сделать это с помощью Ctrl+Shift+P или из меню Терминал -> Создать терминал:

10. Использование Git

Ещё одна очень полезная возможность в Visual Studio Code — это интеграция с Git. Она работает по умолчанию, и вам даже не надо ничего дополнительно устанавливать. Достаточно только, чтобы в директории с проектом уже был инициализирован Git-репозиторий. Все новые или изменённые файлы будут подсвечены в проводнике.

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

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

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

Выводы

В этой статье мы рассмотрели, как работать в Visual Studio Code для программирования на PHP и других языках программирования, предназначенных для веб-разработки. Как видите, эта среда намного лучше подготовлена по умолчанию, чем тот же Atom и то, что приходится настраивать там, здесь уже есть «из коробки». А какой средой разработки пользуетесь вы? Напишите в комментариях!

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 также можно использовать с 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 — вставка блочного комментария.

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

Начало работы с 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: Учебное пособие

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

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

Это сообщение в блоге представляет собой фрагмент главы из электронной книги «От администратора к DevOps: путь BS к DevOps в Azure».Если вам понравилась эта глава и вы хотите узнать о выполнении DevOps в Azure, ознакомьтесь с ней!

Интерфейс

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

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

Основной интерфейс VS Code

Основной интерфейс VS Code можно разделить на пять отдельных областей:

  • Окно редактора (вкладки / группы) — Окно редактора — это то место, где вы будете выполнять большую часть своей работы. На этой панели вы будете просматривать и редактировать весь код, над которым работаете. Всякий раз, когда вы открываете новый файл или редактируете существующий файл, код будет отображаться в окне редактора.В VS Code есть вкладки в этой боли редактора, которые позволяют открывать сразу несколько файлов, и группы редакторов, которые группируют различные вкладки.
  • Рабочая область. Рабочая область будет следующей наиболее распространенной частью пользовательского интерфейса, которую вы будете использовать. В рабочей области будут отображаться все файлы, открытые на вкладках. Вы также обычно открываете целые папки, чтобы увидеть здесь сразу все файлы в определенной папке.
  • Боковая панель. На боковой панели вы увидите такую ​​информацию, как открытый репозиторий Git, имя ветки Git, в которой вы работаете, и возможность отправлять изменения Git в удаленное репо.
  • Панели — Раздел панелей является разделом «вывода». На этой панели вы найдете различные «вкладки» с информацией, возвращаемой VS Code и его расширениями. Здесь вы также найдете удобный встроенный терминал. Интегрированный терминал — это встроенный терминал Bash (с другими оболочками, включенными через расширения), который позволяет запускать код непосредственно в VS Code без необходимости открывать отдельную оболочку.
  • Строка состояния — Строка состояния предоставляет информацию об открытой вкладке редактора.Строка состояния показывает, среди прочего, положение курсора, кодировку, формат VS Code распознает формат файла. В строке состояния VS Code и его расширения также будут отображать информацию по мере их выполнения.

Команды и палитра команд

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

Самый простой способ сделать что-то в VS Code — это использовать команды в палитре команд . Палитра команд — это меню, которое появляется в верхней части экрана, когда вы щелкаете меню View и выбираете Command Palette, или нажимаете Ctrl-Shift-P на клавиатуре.

На следующем снимке экрана вы можете увидеть пример палитры команд.

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

На палитре команд вы найдете все функции VS Code.Палитра команд великолепна, потому что все функции для управления задачами, настройками, фрагментами и т. Д. Расположены в одном меню (рассмотрено позже).

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

Настройки

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

Для управления настройками откройте палитру команд с помощью Ctrl-Shift-P. Введите «настройки» и выберите Предпочтения: Открыть настройки (JSON) , как показано ниже. Но будьте осторожны, здесь много, настроек!

Настройки в палитре команд

VS Code затем откроют файл JSON, в котором отображаются все его текущие настройки.

Но есть более простой способ управлять настройками через интерфейс VS Code. VS Code предоставляет пользовательский интерфейс для просмотра настроек, как вы можете видеть на следующем снимке экрана.Вы можете найти этот пользовательский интерфейс, снова открыв палитру команд и выбрав Preferences: Open Settings (UI) .

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

Управление настройками VS Code

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

Расширения

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

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

В конце концов,

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

Расширения VS Code, определенные в JSON

. Несмотря на то, что шаблон ARM создан в JSON, и VS Code понимает, что JSON не означает, что VS Code понимает шаблоны ARM.

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

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

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

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

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

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

Расширения VS Code

Для примера шаблона ARM найдите «arm», как показано ниже, и посмотрите, что получится. Обратите внимание, что существует множество различных расширений для шаблонов ARM, некоторые из которых созданы Microsoft и сторонними разработчиками. Нажатие на зеленую кнопку Install рядом с каждым расширением немедленно загрузит и установит расширение.

Расширения фильтрации

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

Фрагменты

Вы когда-нибудь набирали один и тот же фрагмент кода снова и снова? Как и в случае с разработкой программного обеспечения, вы всегда должны стремиться работать по принципу «Не повторяйся» (DRY).

Конечно, вы, , могли бы сделать то же самое, набрав этот фрагмент объявления функции в 50-й раз, но в чем смысл? И кто сказал, что вы на самом деле собираетесь писать это каждый раз одинаково? Если вам нужен автоматический способ создания текстовых размытых изображений , вам нужно использовать фрагменты .

Связано: VS Code Snippets: Speed ​​Coding with Shortcuts

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

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

Фрагменты существуют по языку или расширению и хранятся в файлах JSON. Например, вы можете установить одновременно набор фрагментов PowerShell, ARM, Python, C # и Javascript.

Вы можете найти фрагменты, открыв палитру команд с помощью Ctrl-Shift-P, набрав «фрагменты» и нажав Enter.

Настроить элемент палитры команд «Пользовательские фрагменты»

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

Просмотр специфичных для языка фрагментов

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

Просмотр файла языкового фрагмента

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

В следующем фрагменте кода вы можете увидеть типичный фрагмент для создания функции PowerShell. Этот фрагмент использует расширение PowerShell, которое создает оболочку PowerShell .json сниппетов. Когда вы вводите фрагмент « func » в окне редактора, VS Code автоматически удаляет этот фрагмент текста и заменяет его кодом в теле .

Обратите внимание на строки $ {1 | functionName} и $ 2 ниже. Фрагменты кода VS позволяют не только заменять фрагмент кода с помощью нескольких символов, но и редактировать этот код после его расширения. В этом примере этот фрагмент имеет позиций табуляции .

Позиции табуляции позволяют нажать клавишу Tab, отредактировать текст заполнителя ( functionName для первой ( 1 | )) табуляции, снова нажать Tab и начать ввод с восьмой строки тела .

  «Новая функция»: {
    "префикс": "функция",
    "тело": [
        "функция $ {1: имя_функции} {",
        "\ t [CmdletBinding ()]",
        "\ tparam",
        "\ t ()",
        "",
        "\ t $$ ErrorActionPreference = 'Стоп'",
        "",
        "\ t $ 2",
        "}"
    ],
    "description": "Новая вспомогательная функция"
}

После создания сниппета вы можете вызвать его в редакторе. На следующем снимке экрана теперь вы можете увидеть, набираете ли вы «func» в сценарии PowerShell. VS Code предоставляет вам список доступных вам опций.

По умолчанию VS Code поставляется с некоторыми встроенными сниппетами, а некоторые расширения также устанавливают некоторые сниппеты. Ниже вы увидите фрагменты function , function-advanced и function-Inline . Эти фрагменты поставляются с расширением PowerShell.

Расширения VS Code могут добавлять функции «Intellisense».

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

Определение ваших собственных сниппетов

Snippets — огромная экономия времени, если вы потратите время на создание всех стандартных процедур, которые вы выполняете изо дня в день. Фрагменты, показанные в этом руководстве по Visual Studio Code, — это лишь часть того, что вы можете сделать.

Интегрированный терминал

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

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

Интегрированный терминал интегрирован непосредственно в VS Code.Это не внешняя консоль или окно. Он всегда находится под вкладками вашего редактора (если вы его не закроете). По умолчанию терминал представляет собой устаревшую командную строку ( cmd.exe ) в Windows или Bash в Linux и macOS. Однако, как вы можете видеть ниже, после установки расширения PowerShell VS Code по умолчанию использует консоль PowerShell.

Интегрированный терминал PowerShell

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

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

Запуск кода во встроенном терминале

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

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

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

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

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

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

Связанный: Как получить код Visual Studio GitHub Setup Going!

Чтобы создать рабочее пространство, откройте одну или несколько папок, перейдите в меню Файл , щелкните Сохранить рабочее пространство как, и сохраните файл. VS Code сохраняет рабочую область в файл с расширением code-workspace .Этот файл содержит все, что было сохранено в рабочей области.

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

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

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

Открытие параметров рабочего пространства

Выбор параметра Открыть параметры рабочего пространства вернет вас к знакомому экрану Параметры . Однако на этот раз у вас будет две группы настроек; Пользователь и Рабочее пространство . Выбор Workspace и внесение здесь изменений сохранит это изменение настройки в файл рабочей области вместо вашей собственной установки VS Code.

Параметры пользователя и рабочего пространства

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

Заключение

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

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

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

Введение

С самого начала редакторы — странный зверь.Некоторые усиленно отстаивают свой выбор редактора. В мире Unix есть «войны» Emacs vs 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).

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

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

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

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

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

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

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

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

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

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

Explorer

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

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

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

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 имеет встроенный терминал.

Вы можете активировать его из меню View ➤ Integrated Terminal или используя 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, чтобы применить тему:

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

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

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

Настройка

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

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

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

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

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

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

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

Вы можете применить некоторые настройки глобально, в User Settings , или относительно рабочего пространства в Workspace settings .

В большинстве случаев эти настройки автоматически добавляются расширениями или самим 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, технологию, которая намекает на автозаполнение функций и параметров при их вводе.

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

Две удобные команды ( Формат документа и Выбор формата ) доступны на палитре команд для автоформатирования кода.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.
  • Bracket Pair Colorizer удобно для визуализации окончаний скобок в вашем коде.
  • Indent-Rainbow раскрашивает уровни отступов вашего кода.
  • Prettier Посмотрите мой справочник Prettier
  • ESLint проверьте мое руководство по ESLint
  • IntelliSense для CSS Улучшено автозаполнение для CSS на основе определений вашего рабочего пространства
  • npm включает служебные функции npm из палитры команд
  • Автоматически закрывать теги автоматически закрывать теги HTML / JSX / *
  • Auto Rename Tag автоматически переименовывает закрывающий тег, когда вы меняете открывающий, и наоборот

Команда командной строки 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 /": правда
  },

Совместное редактирование в Visual Studio Code с сеансами совместной работы Live Share

  • 27 минут для чтения

В этой статье

Готовы к совместной работе с Live Share в VS Code? В этой статье мы расскажем, как настроить сеанс совместной работы в Visual Studio Code с помощью расширения Live Share.

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

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

Подсказка

Знаете ли вы, что можно присоединиться к собственному сеансу совместной работы ? Это позволяет вам попробовать Live Share самостоятельно или запустить экземпляр Visual Studio или VS Code и подключиться к нему удаленно! Вы даже можете использовать одно и то же удостоверение в обоих случаях.Проверьте это!

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

Прежде чем вы начнете, вам понадобится поддерживаемая версия Visual Studio Code для основных требований Live Share.

Вам понадобится Visual Studio Code (1.22.0 или выше) , работающая на:

  • Windows : 7, 8.1 или 10

  • macOS : только Sierra (10.12) и выше. El Capitan (10.11) и ниже в настоящее время не поддерживаются из-за требований .NET Core 2.0.

  • Linux : 64-разрядный рабочий стол Ubuntu 16.04+, Fedora Workstation 27+, CentOS 7

Установите расширение Live Share

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

  1. Установить код Visual Studio
  2. Загрузите и установите расширение Visual Studio Live Share из магазина.
  3. Перезагрузить код Visual Studio
  4. Дождитесь загрузки и установки зависимостей (см. Строку состояния).
  5. Linux : Если вы видите уведомление об установке недостающих библиотек:
    1. Нажмите «Установить» в уведомлении.
    2. При появлении запроса введите пароль администратора (sudo).
    3. По завершении перезапустите VS Code.

Linux шаги установки

Linux — это очень изменчивая среда, и из-за огромного количества настольных сред и дистрибутивов может быть сложно начать работу. Если вы придерживаетесь поддерживаемых версий Ubuntu Desktop (16.04+) или Fedora Workstation (27+), CentOS 7 и используйте только официальные дистрибутивы VS Code , процесс покажется вам простым. Однако, если вы используете нестандартную конфигурацию или нижестоящий дистрибутив, вы можете столкнуться с некоторыми ошибками, а можете и не столкнуться с ними. См. Подробности установки Linux для получения дополнительной информации.

Установите необходимые компоненты для Linux

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

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

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

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

  wget -O ~ / vsls-reqs https://aka.ms/vsls-linux-prereq-script && chmod + x ~ / vsls-reqs && ~ / vsls-reqs
Интеграция с браузером Linux

Visual Studio Live Share обычно не требует дополнительных шагов установки для включения интеграции браузера в Linux.

Хотя это редкость, в некоторых дистрибутивах вы можете получить уведомление о том, что для завершения процесса установки требуется ваш пароль администратора (sudo) . Появится окно терминала с сообщением, где будет установлена ​​программа запуска браузера. Просто введите свой пароль, когда будет предложено, и нажмите Enter после завершения установки, чтобы закрыть окно терминала.

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

Войти в Live Поделиться

Для совместной работы вам необходимо войти в Visual Studio Live Share, чтобы все знали, кто вы. Это чисто мера безопасности, и , а не , не разрешает вам участвовать в какой-либо маркетинговой или другой исследовательской деятельности. Вы можете войти в систему, используя личную учетную запись Microsoft (например, @ outlook.com), рабочую или учебную учетную запись (AAD), поддерживаемую Microsoft, или учетную запись GitHub. Войти очень просто.

Щелкните в строке состояния «Live Share» или нажмите Ctrl + Shift + P / Cmd + Shift + P и выберите команду «Live Share: Войти с помощью браузера».

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

Примечание

Пользователи Linux: Вам может быть предложено ввести код пользователя, если вы используете старую версию Live Share (v0.3.295 или ниже). Обновите расширение до последней версии или нажмите «Возникли проблемы?» ссылку после входа в систему, чтобы увидеть код.Подробности см. Ниже.

Совет для продвинутых: Параметры lifehare.account и lifehare.accountProvider позволяют выбрать, какую учетную запись следует использовать для автоматического входа в случае, если у вас есть кэшированные учетные данные для нескольких доступных учетных записей.
Например, представьте, что вы работаете над двумя проектами, в которые хотите войти под разными именами. В настройках рабочего пространства VSCode вы можете установить для параметра lifehare.account разные адреса электронной почты в каждом каталоге проекта, чтобы каждый из них автоматически входил в систему с правильной учетной записью.Параметр lifehare.accountProvider может иметь значение «microsoft» или «github» , если вы используете один и тот же адрес электронной почты с несколькими поставщиками.

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

Войти с помощью кода пользователя

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

  1. Нажмите Ctrl + Shift + P / Cmd + Shift + P и запустите команду «Live Share: Войти с кодом пользователя».

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

    Примечание

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

  3. Когда вы закончите, нажмите «Возникли проблемы? Щелкните здесь, чтобы получить указания по использованию кода пользователя», чтобы увидеть код пользователя.

  4. Скопируйте код пользователя.

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

Найти команды Live Share

В вьюлете Live Share

После установки Visual Studio Live Share на панель активности VS Code будет добавлена ​​настраиваемая вкладка. На этой вкладке вы можете получить доступ ко всем функциям Live Share для совместной работы. Кроме того, когда вы делитесь сеансом совместной работы или присоединяетесь к нему, на вкладке «Проводник» также появляется представление, чтобы вы также могли получить доступ ко всем этим функциям.

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

В меню команд с ограниченной областью действия

Кроме того, все функции Visual Studio Live Share доступны из «Палитры команд» кода Visual Studio, к которой можно получить доступ, нажав Ctrl + Shift + P / Cmd + Shift + P или F1.Вы можете найти полный список команд, набрав «live share».

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

Запуск и остановка сеанса

После загрузки и установки Visual Studio Live Share выполните следующие действия, чтобы начать сеанс совместной работы и пригласить коллегу поработать с вами.

  1. Войти

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

  2. Открыть папку

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

  3. [Необязательно] Обновить скрытые или исключенные файлы

    По умолчанию Live Share скрывает любых файлов / папок, указанных в.gitignore файлы в ваших общих папках от гостей. Скрытие файла предотвращает его появление в дереве файлов гостя. Исключение файла применяет более строгое правило, которое не позволяет Live Share открывать его для гостя в таких ситуациях, как переход к определению или если вы входите в файл во время отладки или если вас «отслеживают». Если вы хотите скрыть / исключить разные файлы, в ваш проект можно добавить файл .vsls.json с этими настройками. См. Подробности в разделе управление доступом к файлам и их видимостью.

  4. Начать сеанс совместной работы

    Теперь просто щелкните элемент строки состояния «Live Share» или нажмите Ctrl + Shift + P / Cmd + Shift + P и выберите «Live Share: начать сеанс совместной работы (общий доступ)».

    Примечание

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

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

    Вы также увидите переход элемента строки состояния «Live Share» для представления состояния сеанса. См. Информацию о состоянии сеанса ниже, чтобы узнать, как это выглядит.

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

  5. [Необязательно] Включить режим только для чтения

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

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

  6. Отправьте кому-нибудь ссылку

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

    Совет по безопасности: Хотите узнать о последствиях для безопасности некоторых функций Live Share? Прочтите статью о безопасности.

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

  7. [Необязательно] Утвердить гостя

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

    Чтобы включить эту функцию, просто добавьте в settings.json следующее:

      "LiveShare.guestApprovalRequired": true

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

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

Вот и все !!

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

В качестве хоста вы можете полностью прекратить совместное использование и завершить сеанс совместной работы в любое время, открыв представление Live Share в проводнике или на настраиваемой вкладке Live Share и выбрав значок «Остановить сеанс совместной работы».

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

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

Присоединиться к сеансу и выйти из него

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

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

Присоединяйтесь через браузер

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

  1. Войти

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

  2. Нажмите на ссылку для приглашения / откройте приглашение в браузере

    Теперь просто откройте (или повторно откройте) ссылку для приглашения в браузере.

    Примечание : Если вы еще не установили расширение Live Share, вам будут представлены ссылки на рынок расширений. Установите расширение, перезапустите инструмент и повторите попытку.

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

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

    Примечание

    Убедитесь, что вы запустили инструмент хотя бы один раз. после установки расширения Visual Studio Live Share и разрешили завершить установку перед открытием / повторным открытием страницы приглашения. По-прежнему возникают проблемы? См. Присоединиться вручную.

  3. Сотрудничать

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

    Вы увидите переход кнопки «Live Share», чтобы передать «Состояние сеанса». См. Информацию о состоянии сеанса ниже, чтобы узнать, как это выглядит.

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

Присоединиться вручную

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

  1. Войти

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

  2. Используйте команду соединения

    Откройте настраиваемую вкладку Live Share на панели действий VS Code и выберите значок или запись «Присоединиться к сеансу совместной работы …».

  3. Вставьте ссылку для приглашения

    Вставьте URL-адрес приглашения, которое вам было отправлено, и нажмите Enter для подтверждения.

  4. Сотрудничайте!

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

    Вы увидите переход кнопки «Live Share», чтобы передать «Состояние сеанса». См. Информацию о состоянии сеанса ниже, чтобы узнать, как это выглядит.

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

Выйти из сеанса совместной работы

В качестве гостя вы можете выйти из сеанса совместной работы, не прекращая его для других, просто закрыв окно VS Code.Если вы предпочитаете оставить окно открытым, вы можете открыть представление Live Share Explorer или настраиваемую вкладку Live Share и выбрать значок «Завершить сеанс совместной работы».

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

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

Совместное редактирование

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

Примечание

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

Примечание

Совместное редактирование имеет ограничения для некоторых языков.Состояние функций по языкам см. В разделе «Поддержка платформы».

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

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

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

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

Изменение поведения флага участника

По умолчанию Visual Studio Live Share автоматически отображает «флаг» рядом с курсором участника при наведении курсора, а также при редактировании, выделении или перемещении курсора. В некоторых случаях вы можете изменить это поведение.

Просто отредактируйте settings.json (Файл> Настройки> Настройки), добавьте одну из следующих строк и перезапустите VS Code:

Настройка Поведение
"пожизненная доля".nameTagVisibility ":" Никогда " Флаг виден только при наведении курсора.
"livehare.nameTagVisibility": "Активность" Это значение по умолчанию. Флаг виден при наведении курсора, а также при редактировании, выделении или перемещении курсора участником.
"livehare.nameTagVisibility": "Всегда" Флаг всегда виден.

Найти участников и составить список

Быстрый способ узнать, кто участвует в сеансе совместной работы, — это просмотреть список участников в представлении Live Share Explorer или на настраиваемой вкладке.В представлениях будут показаны все участники вашей сессии.

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

В качестве альтернативы вы можете нажать Ctrl + Shift + P / Cmd + Shift + P и выбрать команду «Live Share: List Participants» или щелкнуть на элементе строки состояния, который показывает количество участников в вашем сеансе.

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

Следуйте за соавтором

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

Примечание

По умолчанию Live Share также предоставляет общий доступ к открытым файлам за пределами общей папки. Если вы хотите отключить эту функцию, обновите livehare.shareExternalFiles Live Share до false в settings.json.

Запросить фокус

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

Откройте настраиваемую вкладку Live Share на панели действий VS Code или в представлении Live Share Explorer и выберите значок «Фокус участников».

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

Затем они могут просто щелкнуть «Follow» прямо из уведомления, когда они будут готовы сосредоточить свое внимание на вас.

Начать и прекратить подписку на соавторов

Чтобы начать следить за участником (в качестве организатора или гостя), щелкните его имя в списке участников в представлении Live Share Explorer или на настраиваемой вкладке. Кружок рядом с их именем заполнится, показывая, что вы подписаны на них.

Кроме того, вы можете щелкнуть значок булавки в правом верхнем углу группы редакторов или нажать Ctrl + Alt + F / Cmd + Alt + F .

Примечание

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

Поскольку отслеживание привязано к группе редакторов, вы можете использовать разделенный вид (или макет сетки!), Чтобы иметь группу, которая следует за участником, и группу, которая не является. Это позволяет вам пассивно следовать за кем-то, а также работать над чем-то самостоятельно. Выбрав группу редакторов, вы можете выбрать участника в списке участников, чтобы эта группа подписалась на них.

Чтобы упростить выход из «режима отслеживания» и начать редактирование самостоятельно, вы автоматически прекратите подписку, если произойдет одно из следующих событий:

  1. Вы начинаете редактировать текущий активный файл
  2. Вы открываете другой файл
  3. Вы закрываете текущий активный файл

Кроме того, вы можете явно отказаться от подписки на кого-либо, снова щелкнув значок булавки или нажав Ctrl + Alt + F / Cmd + Alt + F .

Совместная отладка

Функция совместной отладки

Visual Studio Live Share — это мощный и уникальный способ отладки проблемы. Помимо возможности совместной работы для устранения проблем, он также дает вам и другим участникам вашего сеанса возможность исследовать проблемы, которые могут быть специфичными для среды, путем предоставления общего сеанса отладки на хост-машине.

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

Пользоваться просто.

  1. Убедитесь, что и на хосте, и на всех гостях установлено соответствующее расширение отладки.(Технически это не всегда необходимо, но в целом это хорошая идея.)

  2. В качестве хоста, если он еще не настроен для проекта, вы должны настроить launch.json для отладки приложения из VS Code, как обычно. Никакой специальной настройки не требуется.

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

    Подсказка

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

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

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

Примечание

Состояние функций отладки по языку или платформе см. В разделе «Поддержка платформы».

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

Примечание

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

Изменение, когда VS Code присоединяется к сеансам отладки

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

Просто отредактируйте settings.json (Файл> Настройки> Настройки), добавьте одну из следующих строк и перезапустите VS Code:

Настройка Поведение
"пожизненная доля".joinDebugSessionOption ":" Автоматически " По умолчанию. В качестве гостя вы автоматически присоединяетесь к любому общему сеансу отладки, запускаемому хостом.
"livehare.joinDebugSessionOption": "Подсказка" В качестве гостя вам будет предложено указать, хотите ли вы присоединиться к общему сеансу отладки, когда он запускается хостом.
"lifehare.joinDebugSessionOption": "Manual" В качестве гостя вам необходимо вручную присоединиться к любым сеансам отладки.См. Отсоединение и повторное присоединение.

Снятие и установка

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

Если вы обновили настройки и больше не подключаете автоматически, или если вы просто хотите подключиться позже, вы можете сделать это, нажав Ctrl + Shift + P / Cmd + Shift + P или , щелкнув в состоянии сеанса элемент строки состояния и выберите «Присоединиться к общему сеансу отладки».

Совместное использование запущенного приложения в браузере

Visual Studio Code не имеет концепции известного «порта веб-приложения», такого как Visual Studio, для таких типов проектов, как ASP.NET. Однако, если вы присоединяетесь к сеансу совместной работы с узла Visual Studio, вы можете автоматически увидеть, что браузер по умолчанию отображается при запуске отладки, который затем автоматически подключается к запущенным приложениям узла. Дополнительные сведения см. В разделе «Возможности Visual Studio».

В качестве хоста вы можете добиться чего-то подобного, вручную предоставив общий доступ к приложению или другим конечным точкам, например службам RESTful, с помощью функции «Совместное использование локального сервера».Гости Visual Studio и VS Code могут затем открыть браузер на том же порту localhost, чтобы увидеть работающее приложение. См. Раздел «Совместное использование сервера» для более подробной информации.

Совместно используемые серверы или терминалы

Общий доступ к серверу

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

После этого гости смогут получить доступ к серверу, к которому вы поделились на этом порту, со своего собственного локального компьютера на том же самом порту. Например, если вы совместно использовали веб-сервер , работающий на порту 3000 , гость может получить доступ к тому же самому работающему веб-серверу на своем собственном компьютере по адресу http: // localhost: 3000! Это достигается через безопасный SSH или SSL-туннель между хостом и гостями и аутентифицируется через службу, поэтому вы можете быть уверены, что только те, кто участвует в сеансе совместной работы, имеют доступ.

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

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

  1. Откройте настраиваемую вкладку Live Share на панели действий VS Code или в представлении Live Share Explorer и выберите запись «Общий доступ к серверу …» или щелкните значок.

  2. Введите номер порта, на котором работает сервер, и, при необходимости, имя.

Вот и все! Сервер на указанном вами порту теперь будет сопоставлен с локальным хостом каждого гостя на том же порту (если этот порт уже не был занят)!

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

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

Чтобы прекратить использование локального сервера в качестве хоста, наведите указатель мыши на запись сервера в списке общих серверов в представлении Live Share Explorer или на настраиваемой вкладке и щелкните значок «Отменить общий доступ к серверу».

Совместное использование терминала

Современные разработки часто используют широкий спектр инструментов командной строки. К счастью, Live Share позволяет вам, как хосту, при желании «совместно использовать терминал» с гостями. Общий терминал может быть доступен только для чтения или полностью совместим, поэтому и вы, и гости можете запускать команды и видеть результаты.Вы можете предоставить гостям видимость вывода терминала или позволить им поработать и запустить тесты, сборки или даже отсортировать проблемы, связанные с конкретной средой, которые возникают только на вашем компьютере.

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

В качестве хоста вы можете предоставить общий доступ к терминалу, открыв настраиваемую вкладку Live Share на панели действий VS Code или в представлении Live Share Explorer и выбрав запись «Общий доступ к серверу …» или щелкнув значок.

На этом этапе вы можете выбрать в меню терминал только для чтения или чтения / записи. Когда терминал доступен для чтения / записи, каждый может ввести в терминал, включая хост, что позволяет легко вмешаться, если гость делает что-то, что вам не нравится. Однако на всякий случай вам следует предоставлять доступ для чтения / записи гостям только тогда, когда вы знаете, что они действительно нуждаются в нем. и придерживайтесь терминалов только для чтения в сценариях, где вы просто хотите, чтобы гость видел вывод любых команд, которые вы запускаете.Имейте в виду, что доступ для чтения / записи дает гостю такой же доступ к вашему терминалу, что и у вас, и он может запускать любую команду на вашем компьютере, которую вы можете.

Примечание

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

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

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

Чтобы завершить сеанс терминала, просто введите команду exit, закройте окно терминала или щелкните значок «Отменить общий доступ к терминалу» в представлении Live Share Explorer или пользовательской вкладке, и все будут отключены.

Состояния и ограничения сеанса

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

Обычно вы видите следующие состояния:

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

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

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

Возникли проблемы? См. Устранение неполадок или оставьте отзыв.

Как запустить 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.

languageserver — это обычный пакет 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, но вы также можете создать свои собственные.

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

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

 «Заголовок фрагмента»: {
 «префикс»: «what_i_type_to_trigger_snippet», 
 «тело»: [
 «здесь мой код 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 Do More With R.

Copyright © 2021 IDG Communications, Inc.

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

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

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

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

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

Введение в VS Code

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  
    
    
  •  
    • 
    
  •  
    • 
    
  •  
    • 
    
  •  
    • 
    
  •  
    •

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

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

VS Code File Explorer

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

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

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

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

в VS Code

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

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

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

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

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

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

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

VS Code Extensions

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

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

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

Live Server Extension

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

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

VScode Introduction

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

Заключение

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

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

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

__________ 🐣 Обо мне __________

Visual Studio Code — Flutter

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание:

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

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

Вы разрабатываете для macOS или iOS удаленно, используя
Visual Studio Code Remote? Если да, возможно, вам придется вручную
разблокировать брелок. Для получения дополнительной информации см. Это
вопрос по StackExchange.

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

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

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

  1. При желании установите точки останова в исходном коде.

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

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

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

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

  1. Откройте файл launch.json в VS Code.

    Если у вас нет запускай.json перейдите в
    представление Run в VS Code и щелкните , чтобы создать файл launch.json .

  2. В разделе конфигураций измените свойство flutterMode на
    режим сборки, на который вы хотите настроить таргетинг.

    • Например, если вы хотите работать в режиме отладки,
      ваш launch.json может выглядеть так:

        "конфигурации": [
{
  "name": "Flutter",
  "запрос": "запуск",
  "тип": "дротик",
  "flutterMode": "отладка"
}
 ]
  3. Запустите приложение в представлении Выполнить .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фрагменты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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