Работа в visual studio code на c: Создание консольного приложения .NET в Visual Studio Code — .NET

Содержание

Редактор кода 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 настройка установка плагины на канале "Фрилансер по жизни"

С/С++ на Linux в Visual Studio Code для начинающих / Блог компании Microsoft / Хабр

Давайте начистоту, мало кто использует отладчик GDB на Linux в консольном варианте. Но что, если добавить в него красивый интерфейс? Под катом вы найдёте пошаговую инструкцию отладки кода С/С++ на Linux в Visual Studio Code.



Передаю слово автору.

Относительно недавно я переехал на Linux. Разрабатывать на Windows, конечно, удобнее и приятнее, но и здесь я нашел эффективный способ легко и быстро отлаживать код на С/С++, не прибегая к таким методам как «printf-стайл отладки» и так далее.

Итак приступим. Писать в sublime (или gedit/kate/emacs), а запускать в терминале — так себе решение, ошибку при работе с динамическим распределением памяти вряд ли найдёшь с первого раза. А если проект трудоёмкий? У меня есть более удобное решение. Да и ещё поддержка Git в редакторе, одни плюсы.

Сегодня мы поговорим про Visual Studio Code.

Установка


Ubuntu/Debian
  1. Качаем версию пакета VS Code с расширением .deb
  2. Переходим в папку, куда скачался пакет (cd ~/Загрузки или cd ~/Downloads)
  3. Пишем, где (имя пакета).deb — название файла, который вы только что скачали:
    sudo dpkg -i (имя пакета).deb
    	sudo apt-get install -f

OpenSUSE/SLE Based distrs
  1. Установим репозиторий:
    sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
    sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ntype=rpm-md\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/zypp/repos.d/VScode.repo'

  2. Обновим пакеты и установим VS Code:
    sudo zypper refresh
    sudo zypper install code

Расширения для С/С++

Чтобы VS Code полностью сопровождал нас при работе с файлами С/С++, нужно установить расширение «cpptools». Также полезным будет поставить один из наборов сниппетов.

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

Идём дальше. Открываем любую папку (новую или нет, неважно).

У меня в этой папке уже есть пара файлов для работы с C/C++. Вы можете скопировать одну из своих наработок сюда или создать новый файл.

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

Шаг 1. Открываем файл .c/.cpp, который (обязательно) лежит в вашей папке.

Шаг 2. Нажимаем Ctrl+Shift+B. VS Code вам мягко намекнет, что он не знает как собирать ваш проект.


Шаг 3. Поэтому дальше настраиваем задачу сборки: выбираем «Настроить задачу сборки» -> «Others».

Шаг 4. Прописываем конфигурацию в соответствии с образцом. По сути мы пишем скрипт для консоли, так что всем кто имел дело с ней будет понятно дальнейшее. Прошу заметить, что для сборки исходников в системе должен стоять сам компилятор (gcc или другой, отличаться будет только значение поля command). Поэтому для компиляции .cpp, понадобится в поле command указать g++ или c++, а для .c gcc.

Шаг 5. В args прописываем аргументы, которые будут переданы на вход вашему компилятору. Напоминаю, что порядок должен быть примерно таким: -g, <имя файла>.

Внимание: Если в вашей программе используется несколько файлов с исходным кодом, то укажите их в разных аргументах через запятую. Также обязательным является ключ -g(а лучше даже -g3). Иначе вы не сможете отладить программу.

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


Шаг 6. Далее возвращаемся обратно к нашему исходнику. И нажимаем F5 и выбираем C++.

Шаг 7. Осталось только написать путь к файлу программы. По умолчанию это ${workspaceRoot}/a.out, но я в своем файле сборки указал флаг -o и переименовал файл скомпилированной программы, поэтому у меня путь до программы: ${workspaceRoot}/main.


Шаг 8. Всё, больше нам не нужно ничего для начала использования всех благ VS Code. Переходим к основному проекту.

Отладка

Для начала скомпилируем программу (нет, нет, убери терминал, теперь это делается по нажатию Ctrl+Shift+B).

Как вы видите в проводнике появился main, значит все в порядке и сборка прошла без ошибок. У меня не слишком большая программа, но выполняется она моментально. Одним словом, провал чистой воды, потому что отладка идет в отдельном терминале, который закрывается после того, как программа дошла в main() до "return 0;".


Пришло время для брейкпоинтов. Выберем строчку с "return 0;" и нажимаем F9.


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

Далее нажимаем F5.

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

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


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

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

Важно:

  1. Для каждой папки вам нужно отдельно настроить файлы сборки и путь к программе.
  2. VS Code не решит ваших проблем, но поможет быстрее с ними разобраться. Причем в разы.
  3. После каждого изменения программы, ее нужно компилировать заново, нажимая Ctrl+Shift+B.

Полезные шорткаты можно посмотреть

здесь

.

Об авторе



Максимилиан Спиридонов

— разработчик C#, студент МАИ, Microsoft Student Partner. В профессиональную разработку на .NET пришёл ещё в школе. Около года работал с реальными проектами на WPF(MVVM)+C#, MySQL, более 4-х лет разрабатывал на C#. Основная сфера интересов сейчас — это мобильная разработка на Xamarin. Также, по воле случая в сфере интересов оказались С/С++ и Linux.

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

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

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

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

https://code.visualstudio.com/документы/редактор/задачи

...но обратите внимание на конфликты с:

https://code.visualstudio.com/документы/языки/cpp

WARNING: ВО ВСЕХ ПРИВЕДЕННЫХ НИЖЕ ОТВЕТАХ ВСЕ, ЧТО НАЧИНАЕТСЯ С ТЕГА "VERSION" НИЖЕ 2.0.0, УСТАРЕЛО.

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

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
    {
        "label": "build project",
        "type": "shell",
        "command": "buildscripts/build-debug.sh",
        "args": [],

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

        // Use the standard MS compiler pattern to detect errors, warnings and infos
        "options": {
            "cwd": "${workspaceRoot}"
        },
        "problemMatcher": {
            "owner": "cpp",
            "fileLocation": ["relative", "${workspaceRoot}/DEBUG"],
            "pattern": {
                "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
                "file": 1,
                "line": 2,
                "column": 3,
                "severity": 4,
                "message": 5
            }
        }
    },
    {
        "label": "rebuild project",
        "type": "shell",
        "command": "buildscripts/rebuild-debug.sh",
        "args": [],
        "group": {
            "kind": "build",
            "isDefault": true
        },
        "presentation": {
            // Reveal the output only if unrecognized errors occur.
            "echo": true,
            "focus": false,
            "reveal": "always",
            "panel": "shared"
        },

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

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

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

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

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

Visual Studio Code: кому и зачем он нужен

Недав­но мы бесе­до­ва­ли с Анной Лео­но­вой о её пути в про­грам­ми­ро­ва­нии. Аня пишет код в редак­то­ре Visual Studio Code и сего­дня поде­лит­ся сво­и­ми настрой­ка­ми. Вы узна­е­те, как уста­но­вить про­грам­му и под­го­то­вить её для ком­форт­ной работы. 

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

👉 Интер­вью с Анной Лео­но­вой 

Что за Visual Studio Code?

Это попу­ляр­ная бес­плат­ная про­грам­ма для раз­ра­бот­чи­ков, кото­рая помо­га­ет писать код. Например:

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

VSCode — один из самых попу­ляр­ных редак­то­ров кода, пото­му что он бес­плат­ный и откры­тый, его мож­но сде­лать каким угод­но под свои зада­чи. Есть и дру­гие: напри­мер, Sublime Text или про­дук­ты ком­па­нии JetBrains. 

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

Установка 

Перей­ди­те на code.visualstudio.com и ска­чай­те акту­аль­ную вер­сию редак­то­ра под свою опе­ра­ци­он­ную систе­му — есть под­держ­ка для Linux, Windows и Mac OS. Далее про­сто сле­дуй­те коман­дам программы-загрузчика и открой­те редактор.

При­вет­ствен­ное окно Visual Studio Code после установки 

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

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

✅ Выби­рай­те редак­тор, кото­рый мож­но как угод­но изме­нять и настра­и­вать. Нра­вит­ся внеш­ний вид Sublime Text, но не хва­та­ет мощи VS Code — нет про­блем: нахо­ди­те тему, меня­е­те шрифт, добав­ля­е­те пару рас­ши­ре­ний и гото­во. Что­бы быст­ро осво­ить VS Code, изу­чай­те интер­фейс по документации. 

Настройка

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

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

Если у вас ещё не было кодо­во­го редак­то­ра, то ниже мы рас­смот­рим несколь­ко базо­вых настро­ек, кото­рые помо­гут пер­со­на­ли­зи­ро­вать интер­фейс VS Code. 

Уста­нав­ли­ва­ем рус­ский язык. На левой боко­вой пане­ли нажми­те Extensios и в стро­ке поис­ка напи­ши­те Russian Language Pack — это язы­ко­вой пакет, кото­рый адап­ти­ру­ет VS Code под рус­ский язык. Выбе­ри­те рас­ши­ре­ния, клик­ни­те Install и пере­за­пу­сти­те редак­тор. У вас дол­жен открыть­ся руси­фи­ци­ро­ван­ный интерфейс.

Язы­ко­вой пакет Russian Language Pack 

Если после пере­за­груз­ки язык не изме­нил­ся — на левой боко­вой пане­ли нажми­те зна­чок шесте­рён­ки и выбе­ри­те раз­дел Command Palette. Появит­ся стро­ка поис­ка: напи­ши­те Display, выбе­ри­те коман­ду Configure Display Language и нажми­те Enter. Сме­ни­те язык с англий­ско­го на рус­ский и повтор­но пере­за­гру­зи­те редактор. 

При­вет­ствен­ное окно Visual Studio Code после уста­нов­ки язы­ко­во­го пакета 

Меня­ем цве­то­вую тему. В левой боко­вой пане­ли нажми­те на зна­чок шесте­рён­ки, перей­ди­те в раз­дел «Цве­то­вая тема» и выбе­ри­те тему, встро­ен­ную в редактор. 

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

Анна Лео­но­ва реко­мен­ду­ет тему Night Owl — ноч­ная сова. Её мы и поста­ви­ли для теста 

Добав­ля­ем люби­мый шрифт. В боко­вой пане­ли нажми­те на шесте­рён­ку, выбе­ри­те раз­дел «Пара­мет­ры» → «Тек­сто­вый редак­тор» → «Шрифт». Перед вами будет вклад­ка Font Family, в кото­рую нуж­но впи­сать назва­ние выбран­но­го шриф­та — если этот шрифт ска­чан или сохра­нён в опе­ра­ци­он­ной систе­ме, то он сра­зу отоб­ра­зит­ся в редак­то­ре. Здесь же мож­но изме­нить раз­мер и жир­ность шрифта. 

Меня­ем стан­дарт­ный шрифт Visual Studio Code на Courier New 

Вклю­ча­ем авто­со­хра­не­ние. В боко­вой пане­ли выбе­ри­те шесте­рён­ку, перей­ди­те в «Пара­мет­ры» → «Тек­сто­вый редак­тор» → «Фай­лы». Вы уви­ди­те вклад­ку Auto Save, в кото­рой нуж­но ука­зать пери­од сохра­не­ния фай­лов. Мы реко­мен­ду­ем режим afterDelay с задерж­кой в одну секун­ду — так вы буде­те сра­зу сохра­нять всё, что запи­ше­те. Если вы выбе­ре­те режим onFocusChange, то изме­не­ния в рабо­чем фай­ле будут сохра­нять­ся каж­дый раз, когда вы буде­те откры­вать дру­гие вклад­ки редак­то­ра. В режи­ме onWindowChange изме­не­ния про­ис­хо­дят сра­зу после того, когда вы сво­ра­чи­ва­е­те VS Code и откры­ва­е­те окна дру­гих программ.

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

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

Горя­чие кла­ви­ши — это помощ­ник про­грам­ми­ста и инстру­мент для быст­ро­го выпол­не­ния рутин­ных задач. Пред­по­ло­жим, нам нуж­но создать новый HTML-файл и напи­сать его струк­ту­ру. Без горя­чих кла­виш этот про­цесс выгля­дит так: 

  1. Пере­хо­дим в меню и откры­ва­ем вклад­ку «Файл». 
  2. Выби­ра­ем коман­ду «Новый файл».
  3. Воз­вра­ща­ем­ся в меню и повтор­но откры­ва­ем вклад­ку «Файл».
  4. Нахо­дим коман­ду «Сохра­нить как». 
  5. Пишем назва­ние фай­ла, выби­ра­ем место хра­не­ние, ука­зы­ва­ем рас­ши­ре­ние (HTML) и нажи­ма­ем кноп­ку «Сохра­нить».
  6. Вруч­ную про­пи­сы­ва­ем ске­лет HTML-документа или тра­тим вре­мя, что­бы най­ти и ско­пи­ро­вать струк­ту­ру из интернета. 

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

  1. Command + N — созда­ём новый файл. 
  2. Shift + Command + S — вклю­ча­ем коман­ду «Сохра­нить как». 
  3. Пишем назва­ние фай­ла, выби­ра­ем место хра­не­ния, ука­зы­ва­ем рас­ши­ре­ние (HTML) и нажи­ма­ем кноп­ку «Сохра­нить».
  4. ! + tab — созда­ём струк­ту­ру HTML-документа и можем работать. 

С горя­чи­ми кла­ви­ша­ми мы сокра­ти­ли коли­че­ство рутин­ных дей­ствий и быст­ро выпол­ни­ли про­стую зада­чу — созда­ли HTML-файл и напи­са­ли струк­ту­ру. В слу­чае с объ­ём­ны­ми про­ек­та­ми горя­чие кла­ви­ши помо­га­ют сэко­но­мить часы работы. 

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

Для про­смот­ра всех горя­чих кла­виш нажми­те в боко­вой пане­ли на шесте­рён­ку и выбе­ри­те раз­дел «Соче­та­ния кла­виш». Или вос­поль­зуй­тесь горя­чи­ми кла­ви­ша­ми и нажми­те Command + K + Command + S. Перед вами появит­ся длин­ный спи­сок с назва­ни­ем команд и ком­би­на­ци­ей кно­пок, кото­рые уста­нов­ле­ны по умол­ча­нию — любую коман­ду мож­но пере­про­грам­ми­ро­вать или най­ти с помо­щью поисковика. 

Что дальше

А даль­ше про­чи­тай­те нашу ста­тью про Vim и под­клю­чи­те его к сво­е­му VSCode 🙂

Текст:

Саша Бабас­кин

Редак­тор:

Мак­сим Ильяхов

Кор­рек­тор:

Ира Михе­е­ва

Иллю­стра­тор:

Даня Бер­ков­ский

Вёрст­ка:

Маша Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев

Настройка Visual Studio Code для работы с Arduino


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

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

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

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

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

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

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

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

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

Приоритет мобильности

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

  • Полноценная мощь языка программирования C# 7, у которого миллионы поклонников
  • Подробные API-интерфейсы .NET для Android, iOS, tvOS, watchOS и macOS
  • Абстракции Xamarin.Forms API, необходимые для доведения до наибольшего значения процесса совместного использование кода
  • Доступ к тысячам библиотек .NET на NuGet.org для ускорения мобильной разработки
  • Платформенно-ориентированный код с высокой оптимизацией при поддержке компилятора LLVM

Но мы знаем: приложения не кончаются на клиентской части, и вот почему я так рад тому, что Visual Studio для Mac, помимо всего прочего, даёт возможность для разработки серверного модуля.

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

VS Code + Python

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

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

  • Поддержка Python 3.4 и выше, а также Python 2.7
  • Автоматическое дополнение кода с помощью IntelliSense
  • Линтинг
  • Отладка
  • Сниппеты
  • Модульное тестирование
  • Автоматическое использование conda и виртуальных сред
  • Редактирование кода в средах Jupyter и Jupyter Notebooks

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

  • Лучшие книги по Python: эффективно, емко, доходчиво
  • Крупнейшая подборка Python-каналов на Youtube

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

  • Наборы горячих клавиш для Atom, Sublime Text, Emacs, Vim, PyCharm и множества других редакторов
  • Настраиваемые темы оформления
  • Языковые пакеты для множества языков, включая русский

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

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

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

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

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

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

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

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

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

Xcode краткое руководство для разработчика Visual Studio

Я хотел бы использовать Apple Xcode IDE для разработки приложений на OS X, но я нахожу UI чрезвычайно запутанным, потому что я так привык к разработке в Visual Studio на Windows.

Кто-нибудь знает какие-нибудь Xcode руководства быстрого запуска для разработчика Visual Studio, которые сопоставляют общие задачи и функциональные возможности от одного к другому?

Например, я даже не могу понять, как запустить средство командной строки C/C++, написанное в новом окне shell (Terminal.app), т. е. что произойдет, если вы нажмете F5 в Visual Studio.

visual-studio xcode macos

Источник xyz
02 декабря 2008 в 19:00

3 Ответа

2

Я нахожусь в аналогичной ситуации — я использую Visual Studio на работе и XCode дома, поэтому различия могут быть довольно неприятными.

Одним из инструментов, который может вас заинтересовать, особенно если вы используете Resharper, является новый проект Jetbrains «AppCode»-см. https://www.infoq.com/news/2011/04/jetbrains-appCode

Это редактор кода IDE, который предлагает значительно улучшенные функции анализа кода, исправления, навигации и рефакторинга. Это не полная замена для XCode — редактирование наконечника все еще нужно сделать там — но IMO стоит смириться с некоторым переключением между ними для тех преимуществ, которые оно приносит.

Как пользователь Visual Studio вы сразу же почувствуете себя как дома, поскольку UI гораздо ближе к VS, чем к XCode.

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

Jonathan Moffatt
06 августа 2011 в 01:52
2

Книга Xcode 3 хороша, я согласен. Специально для изучения среды Xcode.

Но, это цель должна быть совместима с Mac OS Х 10.4, так что нет никакого мусора или свойства и т. д. используется.

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

Вам было бы лучше (на мой взгляд) получить книгу по программированию Hillegass Cocoa и начать оттуда, а не пытаться дублировать свой рабочий процесс VS на Mac.

Abizern
08 декабря 2008 в 10:46
1

Для просмотра shell в приложении командной строки это делается в окне консоли, а не в окне terminal. Это позволяет полностью взаимодействовать с gdb. Чтобы открыть окно консоли, нажмите Shift-Command-R, чтобы увидеть выходные данные вашей программы.

Если вы хотите, чтобы Xcode отображал окно консоли при запуске вашего приложения,перейдите в настройки. На вкладке отладчик есть раскрывающийся список с надписью «On Start:» выберите «Show Console» или «Show Console and Debugger», и они откроются при нажатии кнопки выполнить.

Что касается быстрого старта или учебника, я не уверен в каких-либо конкретных онлайн-учебниках, но вы можете проверить книгу Xcode 3 Unleashed by Fritz Anderson.

Grant Limberg
02 декабря 2008 в 19:06

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sieve = [True] * 101 for i in range(2, 100): if sieve
: print(i) for j in range(i*i, 100, i): sieve[j] = False
Если вы будете вводить его вручную (без copy-paste), то сможете увидеть IntelliSense редактора в действии.


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

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

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

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

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

Виртуальная машина

Советую найти образ с уже установленной системой. Я взял за основу MAC OS X Mountain Lion 10.8.3, для него потребуется VMware Workstation 9.x. Если вы решили его использовать, единственное что нужно сделать перед запуском, это увеличить объем памяти выделяемый системе, нужно минимум 2Gb.

Если VMware ругается на наличие Hyper-V, то его можно легко отключить Hyper-V через консоль:

dism.exe /Online /Disable-Feature:Microsoft-Hyper-V

И включить Hyper-V, если он вам понадобиться:

dism.exe /Online /Enable-Feature:Microsoft-Hyper-V /All

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

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

Установка инструментов на Mac OS

Xcode

Ставим Xcode через App Store, у меня это заняло порядка 20 минут.

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

  1. Запускаем Xcode.
  2. Через главное меню сверху, открываем Preferences.
  3. Открываем вкладку Downloads и нажимаем Check and Install Now.
  4. Ждем порядка 30 минут.

Xcode готов к компиляции нашего кода, больше он нам его трогать не понадобится.

Xamarin.iOS

C xamarin.com скачиваем последнюю версию Xamarin.iOS и устанавливаем ее. На это понадобиться около 10 минут.

Для работы с Visual Studio нужна Business версия.

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

  1. Запустить Xamarin Studio.
  2. Нажать на Login справа и зайти под своей учетной записью или создать новую.
  3. Создать проект на базе любого шаблона приложения под iOS.
  4. В меню выбираем Project -> Profile — Mono…
  5. Появиться окно, которое предложит нам купить или попробовать бизнес версию.

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

Линтинг кода

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

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

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

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

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

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

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

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

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

cd /path/to/project code .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Посмотрите также:
  • Погружаемся в основы и нюансы тестирования Python-кода

От JavaScript к TypeScript

Язык JavaScript сегодня настолько популярен, что вы можете найти проекты, которые содержат сотни тысяч строк кода. Вы можете использовать JavaScript, чтобы создавать веб-сайты, Windows приложения и серверные компоненты. Но в случае действительно сложных проектов у разработчиков появляется проблема с поддержкой кода, ведь в сравнении с C#, C++ и Java, языку JavaScript не хватает статических типов, классов, интерфейсов и других атрибутов современных ООП языков. В результате, классические средства разработки лишены многих полезных возможностей, связанных с IntelliSense и рефакторингом, а любые ошибки найти не очень просто.

Именно поэтому многие разработчики предпочитают настройки над JavaScript, такие как TypeScript, CoffeScript или системы наподобие Dart.

В этом разделе мы посмотрим, как использовать TypeScript, так как этот язык достаточно популярен сегодня и имеет «родную» поддержку в Code, а также в Visual Studio, WebStorm и других редакторах.

Отладка кода

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

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

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

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

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

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

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

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

Посмотрите также:
  • Инструменты для анализа кода Python. Часть 1 и Часть 2

Установка расширений в VS Code

В стандартной комплектации VS Code поддерживает не все языки, но существует большое количество расширений, которые добавляют функциональность для поддержки дополнительных функций. Чтобы включить расширения, щелкните значок «Расширение» (Extension) в левом поле кода VS (см. ниже) или используйте сочетание клавиш «Ctrl-Shift-x».

Установка C++ Tools

Нам нужно установить расширение Microsoft C++ Tools, выполнив следующие шаги:

  1. В строке поиска введите ms-vscode.cpptools
  2. Выберите C/C++ в результатах поиска
  3. Нажмите «Установить» в информационном окне справа

Программирование на C ++ с помощью Visual Studio Code

Поддержка

C / C ++ для Visual Studio Code обеспечивается расширением Microsoft C / C ++, позволяющим кроссплатформенную разработку на C и C ++ в Windows, Linux и macOS.

Установить расширение

  1. Откройте код VS.
  2. Щелкните значок представления расширений на панели действий или воспользуйтесь сочетанием клавиш (⇧⌘X (Windows, Linux Ctrl + Shift + X)).
  3. Найдите 'C ++' .
  4. Выберите Установить .

После установки расширения при открытии или создании файла * .cpp у вас будет выделение синтаксиса (раскрашивание), интеллектуальное завершение и наведение курсора (IntelliSense), а также проверка ошибок.

Установить компилятор

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

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

На некоторых платформах, например Linux или macOS, уже установлен компилятор C ++.В большинстве дистрибутивов Linux установлена ​​коллекция компиляторов GNU (GCC), а пользователи macOS могут получить инструменты Clang с Xcode.

Проверьте, установлен ли у вас компилятор.

Убедитесь, что исполняемый файл компилятора находится в пути к вашей платформе (% PATH в Windows, $ PATH в Linux и macOS), чтобы расширение C / C ++ могло его найти. Вы можете проверить доступность ваших инструментов C ++, открыв интегрированный терминал (⌃` (Windows, Linux Ctrl + `)) в VS Code и попытавшись напрямую запустить компилятор.

Проверка компилятора GCC g ++ :

  g ++ - версия  

Проверка компилятора Clang clang :

  clang - версия  

Примечание : Если вы предпочитаете полную интегрированную среду разработки (IDE) со встроенными шаблонами для компиляции, отладки и проекта («Файл»> «Новый проект»), существует множество доступных вариантов, например, версия Visual Studio Community.

Если у вас не установлен компилятор, в приведенном ниже примере мы описываем, как установить минималистичные инструменты GNU для Windows (MinGW) C ++ (компилятор и отладчик).MinGW - это популярный бесплатный набор инструментов для Windows. Если вы используете VS Code на другой платформе, вы можете прочитать руководства по C ++, в которых рассматриваются конфигурации C ++ для Linux и macOS.

Пример: установка MinGW-x64

Мы установим Mingw-w64 через MSYS2, который предоставляет новейшие собственные сборки GCC, Mingw-w64 и других полезных инструментов и библиотек C ++. Щелкните здесь, чтобы загрузить установщик MSYS2. Затем следуйте инструкциям на веб-сайте MSYS2, чтобы установить Mingw-w64.

Добавьте компилятор MinGW в свой путь

Добавьте путь к папке Mingw-w64 bin в переменную среды Windows PATH , выполнив следующие действия:

  1. В строке поиска Windows введите «настройки», чтобы открыть настройки Windows.
  2. Найдите Измените переменные среды для своей учетной записи .
  3. Выберите переменную Path , а затем выберите Edit .
  4. Выберите New и добавьте путь к целевой папке Mingw-w64 с добавлением \ mingw64 \ bin к системному пути. Точный путь зависит от того, какую версию Mingw-w64 вы установили и где вы ее установили. Если вы использовали указанные выше настройки для установки Mingw-w64, добавьте это в путь: C: \ msys64 \ mingw64 \ bin .
  5. Выберите ОК , чтобы сохранить обновленную ПУТЬ. Вам нужно будет повторно открыть все окна консоли, чтобы новое местоположение PATH стало доступным.

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

Чтобы убедиться, что ваши инструменты Mingw-w64 правильно установлены и доступны, откройте новую командную строку и введите:

  g ++ --версия
gdb - версия  

Если вы не видите ожидаемого вывода или g ++ или gdb не распознанная команда, убедитесь, что ваша запись PATH совпадает с двоичным расположением Mingw-w64, где расположены инструменты компилятора.

Привет, мир

Чтобы убедиться, что компилятор установлен и правильно настроен, мы создадим простейшую программу Hello World C ++.

Создайте папку с именем «HelloWorld» и откройте VS Code в этой папке (код . открывает VS Code в текущей папке):

  мкдир HelloWorld
компакт-диск HelloWorld
код.  

Теперь создайте новый файл с именем helloworld.cpp , нажав кнопку New File в проводнике или команду File > New File .

Добавить исходный код Hello World

Теперь вставьте этот исходный код:

  #include 

используя пространство имен std;

int main ()
{
    cout << "Hello World" << endl;
}  

Теперь нажмите ⌘S (Windows, Linux Ctrl + S), чтобы сохранить файл. Вы также можете включить автосохранение для автоматического сохранения изменений файла, установив флажок Автосохранение в главном меню Файл .

Сборка Hello World

Теперь, когда у нас есть простая программа на C ++, приступим к ее построению. Выберите команду Terminal > Run Build Task (⇧⌘B (Windows, Linux Ctrl + Shift + B)) в главном меню.

Появится раскрывающийся список с различными параметрами задачи компилятора. Если вы используете набор инструментов GCC, например MinGW, вы должны выбрать C / C ++: g ++. Exe build active file .

Это скомпилирует helloworld.cpp и создайте исполняемый файл с именем helloworld.exe , который появится в проводнике.

Запустите Hello World

Теперь из командной строки или нового интегрированного терминала VS Code вы можете запустить свою программу, набрав «. \ Helloworld».

Если все настроено правильно, вы должны увидеть вывод «Hello World».

Это очень простой пример, который поможет вам начать разработку на C ++ в VS Code.Следующий шаг - попробовать одно из руководств, перечисленных ниже, на вашей платформе (Windows, Linux или macOS) с предпочитаемым набором инструментов (GCC, Clang, Microsoft C ++) и узнать больше о языковых функциях расширения Microsoft C / C ++, таких как IntelliSense. , навигация по коду, конфигурация сборки и отладка.

Учебники

Начните работу с C ++ и VS Code с помощью руководств для вашей среды:

Документация

Дополнительную документацию по использованию расширения Microsoft C / C ++ можно найти в разделе C ++ на веб-сайте VS Code, где вы найдете темы по:

Удаленная разработка

VS Code и расширение C ++ поддерживают удаленную разработку, что позволяет работать через SSH на удаленном компьютере или виртуальной машине, внутри контейнера Docker или в подсистеме Windows для Linux (WSL).

Для установки поддержки удаленной разработки:

  1. Установите пакет расширений удаленной разработки VS Code.
  2. Если удаленные исходные файлы размещены в WSL, используйте расширение Remote - WSL .
  3. Если вы подключаетесь к удаленному компьютеру с помощью SSH, используйте расширение Remote - SSH .
  4. Если удаленные исходные файлы размещены в контейнере (например, Docker), используйте расширение Remote - Containers .

Обратная связь

Если у вас возникнут какие-либо проблемы или у вас есть предложения по расширению Microsoft C / C ++, отправьте сообщения о проблемах и предложениях на GitHub. Если вы еще не оставили свой отзыв, примите участие в этом небольшом опросе, чтобы помочь сформировать это расширение для ваших нужд.

15.07.2021

Настроить код Visual Studio для Microsoft C ++

В этом руководстве вы настраиваете Visual Studio Code для использования компилятора и отладчика Microsoft Visual C ++ в Windows.

После настройки VS Code вы скомпилируете и отладите простую программу Hello World в VS Code. В этом руководстве не содержится подробных сведений о наборе инструментов Microsoft C ++ или языке C ++. По этим предметам в Интернете доступно множество хороших ресурсов.

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

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

Чтобы успешно пройти это руководство, вы должны сделать следующее:

  1. Установите код Visual Studio.

  2. Установите расширение C / C ++ для VS Code. Вы можете установить расширение C / C ++, выполнив поиск «c ++» в представлении «Расширения» (⇧⌘X (Windows, Linux Ctrl + Shift + X)).

  3. Установите набор инструментов компилятора Microsoft Visual C ++ (MSVC).

    Если у вас установлена ​​последняя версия Visual Studio, откройте установщик Visual Studio из меню «Пуск» Windows и убедитесь, что рабочая нагрузка C ++ отмечена. Если он не установлен, установите флажок и нажмите кнопку Изменить в программе установки.

    Вы также можете установить только C ++ Build Tools без полной установки Visual Studio IDE. На странице загрузок Visual Studio прокрутите вниз, пока не увидите инструменты для Visual Studio в разделе Все загрузки , и выберите загрузку для инструментов сборки для Visual Studio .

    Это запустит установщик Visual Studio, который вызовет диалоговое окно, показывающее доступные рабочие нагрузки Visual Studio Build Tools.Проверьте рабочую нагрузку инструментов сборки C ++ и выберите Установить .

Примечание : вы можете использовать набор инструментов C ++ из Visual Studio Build Tools вместе с Visual Studio Code для компиляции, сборки и проверки любой кодовой базы C ++, если у вас также есть действующая лицензия Visual Studio (Community, Pro или Enterprise. ), который вы активно используете для разработки этой кодовой базы C ++.

Проверьте установку Microsoft Visual C ++

Чтобы использовать MSVC из командной строки или VS Code, необходимо запустить из командной строки разработчика для Visual Studio .Обычная оболочка, такая как PowerShell, Bash или командная строка Windows, не имеет необходимых переменных среды пути.

Чтобы открыть командную строку разработчика для VS, начните вводить «разработчик» в меню «Пуск» Windows, и оно должно появиться в списке предложений. Точное имя зависит от того, какую версию Visual Studio или Visual Studio Build Tools вы установили. Щелкните элемент, чтобы открыть подсказку.

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

Если командная строка разработчика использует расположение BuildTools в качестве начального каталога (вы не хотите помещать туда проекты), перейдите в свою папку пользователя ( C: \ users \ {ваше имя пользователя} \ ), прежде чем начинать создание новые проекты.

Создать Hello World

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

  мкдир проектов
CD проекты
mkdir helloworld
cd helloworld
код.  

"Код". Команда открывает VS Code в текущей рабочей папке, которая становится вашей «рабочей областью». По мере прохождения руководства вы увидите три файла, созданные в папке .vscode в рабочей области:

  • tasks.json (инструкция по сборке)
  • launch.json (настройки отладчика)
  • c_cpp_properties.json (путь к компилятору и настройки IntelliSense)

Добавить файл исходного кода

В строке заголовка проводника нажмите кнопку New File и назовите файл helloworld.cpp .

Добавить исходный код hello world

Теперь вставьте этот исходный код:

  #include 
#include <вектор>
#include <строка>

используя пространство имен std;

int main ()
{
    vector  msg {"Hello", "C ++", "World", "from", "VS Code", "и расширение C ++!"};

    для (константная строка и слово: сообщение)
    {
        cout << word << "";
    }
    cout << endl;
}  

Теперь нажмите ⌘S (Windows, Linux Ctrl + S), чтобы сохранить файл.Обратите внимание, как только что добавленный файл отображается в представлении проводника (⇧⌘E (Windows, Linux Ctrl + Shift + E)) на боковой панели VS Code:

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

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

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

Изучите IntelliSense

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

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

Сборка helloworld.cpp

Затем вы создадите файл tasks.json , чтобы сообщить VS Code, как построить (скомпилировать) программу. Эта задача вызовет компилятор Microsoft C ++ для создания исполняемого файла на основе исходного кода.

В главном меню выберите Терминал > Настроить задачу сборки по умолчанию . В раскрывающемся списке, в котором будет отображаться раскрывающийся список задач, в котором перечислены различные предопределенные задачи сборки для компиляторов C ++. Выберите cl.exe строит активный файл , который будет строить файл, который в данный момент отображается (активен) в редакторе.

Это создаст файл tasks.json в папке .vscode и откроет его в редакторе.

Ваш новый файл tasks.json должен выглядеть примерно так, как показано ниже в формате JSON:

  {
  "версия": "2.0.0",
  "задачи": [
    {
      "тип": "оболочка",
      "label": "cl.exe построить активный файл",
      "команда": "кл.EXE",
      "аргументы": [
        "/ Zi",
        "/ EHsc",
        "/ Fe:",
        "$ {fileDirname} \\ $ {fileBasenameNoExtension} .exe",
        "$ {файл}"
      ],
      "проблемаМатчер": ["$ msCompile"],
      "группа": {
        "вид": "строить",
        "isDefault": true
      }
    }
  ]
}  

Команда Параметр указывает программу для запуска; в данном случае это "cl.exe". Массив args определяет аргументы командной строки, которые будут переданы cl.EXE. Эти аргументы должны быть указаны в порядке, ожидаемом компилятором. Эта задача сообщает компилятору C ++ взять активный файл ( $ {file} ), скомпилировать его и создать исполняемый файл (переключатель / Fe: ) в текущем каталоге ( $ {fileDirname} ) с то же имя, что и у активного файла, но с расширением .exe ( $ {fileBasenameNoExtension} .exe ), что в нашем примере дает helloworld.exe .

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

Ярлык Значение - это то, что вы увидите в списке задач; Вы можете называть это как хотите.

Значение problemMatcher выбирает выходной синтаксический анализатор, который будет использоваться для поиска ошибок и предупреждений в выходных данных компилятора. Для cl.exe вы получите наилучшие результаты, если используете средство сопоставления задач $ msCompile .

Значение «isDefault»: true в объекте группы указывает, что эта задача будет запущена при нажатии ⇧⌘B (Windows, Linux Ctrl + Shift + B).Это свойство предназначено только для удобства; если вы установите для него значение false, вы все равно можете запустить его из меню «Терминал» с помощью «Задачи : Выполнить задачу сборки ».

Запуск сборки

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

  2. Чтобы запустить задачу сборки, определенную в tasks.json , нажмите ⇧⌘B (Windows, Linux Ctrl + Shift + B) или в главном меню Terminal выберите Tasks: Run Build Task .

  3. При запуске задачи вы должны увидеть панель «Интегрированный терминал» под редактором исходного кода. После завершения задачи терминал показывает вывод компилятора, который указывает, успешно ли завершилась сборка. Для успешной сборки C ++ результат выглядит примерно так:

  4. Создайте новый терминал с помощью кнопки + , и у вас будет новый терминал (с запущенным PowerShell) с папкой helloworld в качестве рабочего каталога.Запустите ls , и теперь вы должны увидеть исполняемый файл helloworld.exe вместе с различными промежуточными файлами вывода и отладки C ++ ( helloworld.obj , helloworld.pdb ).

  5. Вы можете запустить helloworld в терминале, набрав . \ Helloworld.exe .

Примечание : вам может потребоваться несколько раз нажать Enter, чтобы увидеть командную строку PowerShell в терминале.Эта проблема должна быть исправлена ​​в будущем выпуске Windows.

Изменение tasks.json

Вы можете изменить свой tasks.json для создания нескольких файлов C ++, используя аргумент типа "$ {workspaceFolder} \\ *. Cpp" вместо $ {file} . Это создаст все файлы .cpp в вашей текущей папке. Вы также можете изменить имя выходного файла, заменив "$ {fileDirname} \\ $ {fileBasenameNoExtension} .exe" жестко заданным именем файла (например, "$ {workspaceFolder} \\ myProgram.exe ").

Отладка helloworld.cpp

Затем вы создадите файл launch.json для настройки VS Code для запуска отладчика Microsoft C ++ при нажатии клавиши F5 для отладки программы. В главном меню выберите Выполнить > Добавить конфигурацию ... , а затем выберите C ++ (Windows) .

Затем вы увидите раскрывающийся список для различных предопределенных конфигураций отладки. Выберите сборку cl.exe и выполните отладку активного файла .

VS Code создает запуск .json , открывает его в редакторе, создает и запускает helloworld.

  {
  "версия": "0.2.0",
  "конфигурации": [
    {
      "name": "cl.exe построить и отладить активный файл",
      "тип": "cppvsdbg",
      "запрос": "запуск",
      "program": "$ {fileDirname} \\ $ {fileBasenameNoExtension} .exe",
      "аргументы": [],
      "stopAtEntry": ложь,
      "cwd": "$ {workspaceFolder}",
      "среда": [],
      "externalConsole": ложь,
      "preLaunchTask": "cl.EXE, активный файл сборки "
    }
  ]
}  

Программа Настройка определяет программу, которую нужно отлаживать. Здесь установлена ​​активная файловая папка $ {fileDirname} и активное имя файла с расширением .exe $ {fileBasenameNoExtension} .exe , которое, если helloworld.cpp является активным файлом, будет helloworld. exe .

По умолчанию расширение C ++ не будет добавлять точки останова в исходный код, а для значения stopAtEntry установлено значение false .Измените значение stopAtEntry на true , чтобы отладчик останавливался на методе main при запуске отладки.

Начать сеанс отладки

  1. Вернитесь к helloworld.cpp , чтобы он стал активным файлом.
  2. Нажмите F5 или в главном меню выберите Выполнить> Начать отладку . Прежде чем приступить к пошаговому рассмотрению исходного кода, давайте заметим несколько изменений в пользовательском интерфейсе:
  • Интегрированный терминал появляется в нижней части редактора исходного кода.На вкладке Debug Output вы видите выходные данные, указывающие, что отладчик запущен и работает.

  • Редактор выделяет первый оператор в методе main . Это точка останова, которую расширение C ++ автоматически устанавливает для вас:

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

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

Введите код

Теперь вы готовы приступить к пошаговому выполнению кода.

  1. Щелкните или нажмите значок Step over на панели управления отладкой, пока не будет выделен оператор for (const string & word: msg) .

    Команда Step Over пропускает все внутренние вызовы функций в классах vector и string , которые вызываются при создании и инициализации переменной msg .Обратите внимание на изменение в окне Variables слева. В этом случае ожидаются ошибки, потому что, хотя имена переменных для цикла теперь видны отладчику, оператор еще не выполнен, поэтому читать здесь нечего. Однако содержимое сообщения msg видно, поскольку этот оператор завершен.

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

  3. Нажмите Перейдите по еще раз, чтобы выполнить оператор cout . Примечание Начиная с версии расширения от марта 2019 г., выходные данные не отображаются до завершения цикла.

  4. Если хотите, можете продолжать нажимать Step over , пока все слова в векторе не будут напечатаны на консоли. Но если вам интересно, попробуйте нажать кнопку Step Into , чтобы просмотреть исходный код в стандартной библиотеке C ++!

    Чтобы вернуться к своему собственному коду, один из способов - продолжать нажимать Шаг за .Другой способ - установить точку останова в коде, переключившись на вкладку helloworld.cpp в редакторе кода, поместив точку вставки где-нибудь в операторе cout внутри цикла и нажав F9. Красная точка появляется в желобе слева, чтобы указать, что на этой строке установлена ​​точка останова.

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

Набор наручных

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

  1. Поместите точку вставки внутрь петли. В окне Watch щелкните значок «плюс» и в текстовом поле введите слово , которое является именем переменной цикла. Теперь просмотрите окно Watch по мере прохождения цикла.

  2. Добавьте еще одно наблюдение, добавив этот оператор перед циклом: int i = 0; .Затем внутри цикла добавьте этот оператор: ++ i; . Теперь добавьте часы для i , как вы это делали на предыдущем шаге.

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

Конфигурации C / C ++

Если вам нужен больший контроль над расширением C / C ++, вы можете создать файл c_cpp_properties.json , который позволит вам изменять такие настройки, как путь к компилятору, включать пути, стандарт C ++ (по умолчанию C ++ 17) и многое другое.

Пользовательский интерфейс конфигурации C / C ++ можно просмотреть, выполнив команду C / C ++: Edit Configurations (UI) из палитры команд (⇧⌘P (Windows, Linux Ctrl + Shift + P)).

Откроется страница Конфигурации C / C ++ . Когда вы вносите здесь изменения, VS Code записывает их в файл с именем c_cpp_properties.json в папке .vscode .

Visual Studio Code помещает эти параметры в .vscode \ c_cpp_properties.json . Если вы откроете этот файл напрямую, он должен выглядеть примерно так:

  {
  "конфигурации": [
    {
      "name": "Win32",
      "includePath": ["$ {workspaceFolder} / **"],
      "определяет": ["_DEBUG", "UNICODE", "_UNICODE"],
      "windowsSdkVersion": "10.0.18362.0",
      "compilerPath": "C: / Program Files (x86) / Microsoft Visual Studio / 2019 / BuildTools / VC / Tools / MSVC / 14.24.28314 / bin / Hostx64 / x64 / cl.exe",
      "cStandard": "c11",
      "cppStandard": "c ++ 17",
      "intelliSenseMode": "msvc-x64"
    }
  ],
  «версия»: 4
}  

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

Путь к компилятору

Параметр compilerPath является важным параметром в вашей конфигурации. Расширение использует его для определения пути к файлам заголовков стандартной библиотеки C ++. Когда расширение знает, где найти эти файлы, оно может предоставить полезные функции, такие как интеллектуальное завершение и навигацию Go to Definition .

Расширение C / C ++ пытается заполнить compilerPath местоположением компилятора по умолчанию в зависимости от того, что оно находит в вашей системе.Расширение ищет в нескольких распространенных местах компилятора.

Порядок поиска compilerPath :

  • Первая проверка компилятора Microsoft Visual C ++ Ope
  • Затем найдите g ++ в подсистеме Windows для Linux (WSL)
  • Затем g ++ для Mingw-w64.

Если у вас установлен g ++ или WSL, вам может потребоваться изменить compilerPath , чтобы он соответствовал предпочтительному компилятору для вашего проекта. Для Microsoft C ++ путь должен выглядеть примерно так, в зависимости от того, какая конкретная версия у вас установлена: «C: / Program Files (x86) / Microsoft Visual Studio / 2017 / BuildTools / VC / Tools / MSVC / 14.16.27023 / bin / Hostx64 / x64 / cl.exe ".

Повторное использование конфигурации C ++

VS Code теперь настроен на использование компилятора Microsoft C ++. Конфигурация применяется к текущему рабочему пространству. Чтобы повторно использовать конфигурацию, просто скопируйте файлы JSON в папку .vscode в новой папке проекта (рабочей области) и при необходимости измените имена исходного файла (ов) и исполняемого файла.

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

Термин cl.exe не распознается

Если вы видите ошибку "Термин" п.exe 'не распознается как имя командлета, функции, файла сценария или работающей программы. ", это обычно означает, что вы используете VS Code вне командной строки разработчика для Visual Studio , а VS Code не знает путь к компилятору cl.exe .

Вы всегда можете проверить, что вы используете VS Code в контексте командной строки разработчика, открыв новый терминал (⌃⇧` (Windows, Linux Ctrl + Shift + `)) и набрав 'cl', чтобы проверить cl.exe доступен для VS Code.

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

19.02.2020

Отладка C ++ в Visual Studio Code

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

Visual Studio Code поддерживает следующие отладчики для C / C ++ в зависимости от используемой операционной системы:

  • Linux : GDB
  • macOS : LLDB или GDB
  • Windows : отладчик Windows Visual Studio или GDB (с использованием Cygwin или MinGW)

Отладка Windows с помощью GDB

Вы можете отлаживать приложения Windows, созданные с помощью Cygwin или MinGW, с помощью VS Code.Чтобы использовать функции отладки Cygwin или MinGW, путь отладчика должен быть установлен вручную в конфигурации запуска ( launch.json ). Для отладки приложения Cygwin или MinGW добавьте свойство miDebuggerPath и установите его значение в расположение соответствующего gdb.exe для среды Cygwin или MinGW.

Например:

  "miDebuggerPath": "c: \\ mingw \\ bin \\ gdb.exe"  
Отладка

Cygwin / MinGW в Windows поддерживает сценарии отладки как с подключением, так и с запуском.

Дополнительные сведения см. В разделе «Настройка отладки C / C ++».

Если вы отлаживаете с помощью GDB в Windows, см. Раздел «Отладка Windows с помощью MinGW64».

Условные точки останова

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

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

Точки останова функции

Точки останова функции позволяют прервать выполнение в начале функции, а не в определенной строке кода. Чтобы установить точку останова функции, в представлении Run щелкните правой кнопкой мыши в разделе Breakpoints , затем выберите Add Function Breakpoint и введите имя функции, выполнение которой вы хотите прервать.

Оценка выражений

VS Code поддерживает оценку выражений в нескольких контекстах:

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

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

Многопоточная отладка

Расширение C / C ++ для VS Code позволяет отлаживать многопоточные программы. Все потоки и их стеки вызовов появляются в разделе Call Stack :

Отладка дампа памяти

Расширение C / C ++ для VS Code также может выполнять отладку дампов памяти.Чтобы отладить дамп памяти, откройте файл launch.json и добавьте свойство coreDumpPath (для GDB или LLDB) или dumpPath (для отладчика Windows Visual Studio) в конфигурацию C ++ Launch , установите его значение быть строкой, содержащей путь к дампу памяти. Это будет работать даже для программ x86, отлаживаемых на машине x64.

Дополнительные символы

Если есть дополнительные каталоги, в которых отладчик может найти файлы символов (например, .pdb для отладчика Windows Visual Studio), их можно указать, добавив additionalSOLibSearchPath (для GDB или LLDB) или symbolSearchPath (для Windows Debugger Visual Studio).

Например:

  "additionalSOLibSearchPath": "/ путь / к / символы; / другой / путь / к / символы"  

или

  "symbolSearchPath": "C: \\ путь \\ к \\ символам; C: \\ другой \\ путь \\ к \\ символам"  

Найти исходные файлы

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

Например:

  "sourceFileMap": {
    "/build/gcc-4.8-fNUjSI/gcc-4.8-4.8.4/build/i686-linux-gnu/libstdc++-v3/include/i686-linux-gnu": "/ usr / include / i686-linux-gnu /c++/4.8 ",
    "/build/gcc-4.8-fNUjSI/gcc-4.8-4.8.4/build/i686-linux-gnu/libstdc++-v3/include": "/usr/include/c++/4.8"
}  

Команды GDB, LLDB и LLDB-MI (GDB / LLDB)

Для среды отладки C ++ (GDB / LLDB) вы можете выполнять команды GDB, LLDB и LLDB-MI непосредственно через консоль отладки с помощью команды -exec , но будьте осторожны, выполнение команд непосредственно в консоли отладки непроверенный и в некоторых случаях может привести к сбою VS Code.

Другие функции отладки

  • Безусловные точки останова
  • Окно просмотра
  • Стек вызовов
  • Шаг

Для получения дополнительной информации об отладке с помощью VS Code см. Это введение в отладку в VS Code.

Дополнительные способы настройки файла launch.json для отладки приложения C / C ++ см. В разделе Настройка отладки C / C ++.

Фреймворк Natvis

Вы создаете пользовательские представления объекта C ++ в отладчике с помощью платформы Natvis.Подробную информацию об использовании Natvis с расширением C / C ++ вы можете прочитать в разделе «Пользовательские представления для собственных объектов».

Отладка удаленно

Для получения информации о подключении к удаленному процессу, например об отладке процесса в контейнере Docker, см. Транспорт по конвейеру.

Отладка отладчика

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

Известные ограничения

Символы и код навигации

Всего платформ:

  • Поскольку расширение не анализирует тела функций, Peek Definition и Go to Definition не работают для символов, определенных внутри тела функции.

Отладка

Windows:

  • GDB на Cygwin и MinGW не может прервать запущенный процесс.Чтобы установить точку останова, когда приложение запущено (не остановлено под отладчиком), или приостановить отлаживаемое приложение, нажмите Ctrl-C в терминале приложения.
  • GDB на Cygwin не может открывать дампы ядра.

Linux:

  • Вы можете увидеть сообщение об ошибке: ptrace: Operation not allowed . Это связано с тем, что GDB требует повышенных разрешений для присоединения к процессу. Это можно решить, используя следующие решения:
    1. При использовании подключения к процессу вам необходимо предоставить свой пароль до начала сеанса отладки.

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

      echo 0 | sudo tee / proc / sys / kernel / yama / ptrace_scope

    3. Чтобы удалить ошибку навсегда, добавьте файл с именем 10-ptrace.conf в /etc/sysctl.d/ и добавьте следующий kernel.yama.ptrace_scope = 0 .

macOS:

  • LLDB:
    • При отладке с помощью LLDB, если окно Терминала закрывается в режиме прерывания, отладка не останавливается.Отладку можно остановить, нажав кнопку Stop .
    • Когда отладка остановлена, окно Терминала не закрывается.
  • ГБД:
    • Для использования GDB в macOS требуются дополнительные действия по установке вручную. См. Ручная установка GDB для OS X в README.
    • При присоединении к процессу с помощью GDB отлаживаемое приложение не может быть прервано. GDB будет связывать только точки останова, установленные, когда приложение не запущено (либо до присоединения к приложению, либо пока приложение находится в остановленном состоянии).Это связано с ошибкой в ​​GDB.
    • Дампы ядра не могут быть загружены при отладке с помощью GDB, поскольку GDB не поддерживает формат дампа ядра, используемый в macOS.
    • При подключении к процессу с помощью GDB команда break all завершит процесс.

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

Читайте дальше, чтобы узнать о:

Если у вас есть другие вопросы или вы столкнетесь с какими-либо проблемами, напишите о проблеме на GitHub.

21.05.2020

Cpp - vscode

Поддержка

C / C ++ для Visual Studio Code обеспечивается расширением Microsoft C / C ++, позволяющим кроссплатформенную разработку на C и C ++ с использованием VS Code в Windows, Linux и macOS.Расширение все еще находится в стадии предварительного просмотра, и наше внимание уделяется поддержке редактирования кода, навигации и отладки для кода C и C ++ везде, где выполняется VS Code.

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

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

Примечание для пользователей Linux : Расширение C / C ++ работает в 64-битных дистрибутивах Linux, на которых установлена ​​glibc 2.18 или новее.

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

Для установки расширения Microsoft C / C ++:

  • Откройте код VS.
  • Щелкните значок «Просмотр расширений» на боковой панели.
  • Найдите c ++ .
  • Щелкните Установить , затем щелкните Перезагрузить .

Установив расширение C / C ++, откройте папку, содержащую исходный код C / C ++. VS Code поместит различные файлы настроек в подпапку .vscode .

Примечание : Расширение C / C ++ не включает компилятор C ++ или отладчик. Вам нужно будет установить эти инструменты или использовать те, которые уже установлены на вашем компьютере. Популярные компиляторы C ++ - MinGW для Windows, XCode для macOS и GCC для Linux. Также убедитесь, что исполняемый файл вашего компилятора находится на пути к вашей платформе, чтобы VS Code мог его найти.

IntelliSense

Чтобы включить автозавершение кода и навигацию, вам необходимо создать файл c_cpp_properties.json :

  • Найдите любую зеленую волнистую линию в исходном файле (например, оператор #include) и установите курсор на строку.
  • Щелкните лампочку, которая появляется в левом желобе.
  • Щелкните Обновить параметр «browse.path» .

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

Ниже вы можете видеть, что путь включения MinGW C ++ был добавлен в browse.path для Windows:

  {
    "name": "Win32",
    "includePath": [
        "$ {workspaceRoot}"
    ],
    "определяет": [
        "_ОТЛАЖИВАТЬ",
        "UNICODE"
    ],
    "intelliSenseMode": "msvc-x64",
    "browse": {
        "дорожка": [
            "$ {workspaceRoot}",
            "C: \\ MinGW \\ lib \\ gcc \\ mingw32 \\ 6.3.0 \ include \ c ++ "
        ],
        "limitSymbolsToIncludedHeaders": true,
        "databaseFilename": ""
    }
}
  

Примечание: Вы также можете сгенерировать или отредактировать файл c_cpp_properties.json с помощью команды C / Cpp: Edit Configurations из палитры команд ( kb (workbench.action.showCommands) ).

Создание вашего кода

Если вы хотите собрать свое приложение из VS Code, вам нужно будет сгенерировать задач.json файл:

  • Откройте палитру команд ( КБ (workbench.action.showCommands) ).
  • Выберите «Задачи : Настроить средство запуска задач », и вы увидите список шаблонов средства запуска задач.
  • Выберите Others , чтобы создать задачу, запускающую внешнюю команду.
  • Измените команду на выражение командной строки, которое вы используете для сборки приложения (например, g ++ ).
  • Добавьте необходимые аргументы (например, -g для сборки для отладки).
  • Вы также можете изменить taskName , чтобы оно было более информативным.

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

  {
    "версия": "2.0.0",
    "задачи": [
        {
            "taskName": "построить привет мир",
            "тип": "оболочка",
            "команда": "g ++",
            "аргументы": [
                "-g", "helloworld.cpp"
            ]
        }
    ]
}
  

Если вы хотите создать свое приложение с помощью задач : запустите задачу сборки ( КБ (workbench.action.tasks.build) ), вы можете добавить его в группу build .

  {
    "версия": "2.0.0",
    "задачи": [
        {
            "taskName": "построить привет мир",
            "тип": "оболочка",
            "команда": "g ++",
            "аргументы": [
                "-g", "helloworld.cpp"
            ],
            "группа": {
                "вид": "строить",
                "isDefault": true
            }
        }
    ]
}

  

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

Отладка вашего кода

Чтобы включить отладку, вам необходимо сгенерировать файл launch.json :

  • Перейдите в представление «Отладка», щелкнув значок «Отладка» на боковой панели.
  • В представлении Debug щелкните значок Configure .
  • Выберите C ++ (GDB / LLDB) (для использования GDB или LLDB) или C ++ (Windows) (для использования отладчика Windows Visual Studio) из раскрывающегося списка Select Environment .Это создает файл launch.json для редактирования с двумя конфигурациями:
  • C ++ Launch определяет свойства для запуска вашего приложения при запуске отладки.
  • C ++ Attach определяет свойства для присоединения к уже запущенному процессу.
  • Обновите свойство программы , указав путь к отлаживаемой программе.
  • Если вы хотите, чтобы ваше приложение собиралось при запуске отладки, добавьте свойство preLaunchTask с именем задачи сборки, которую вы создали в задачах .json («построить привет, мир» в примере выше).

Ниже приведен пример использования отладчика MinGW GDB:

  {
    "версия": "0.2.0",
    "конфигурации": [
        {
            "name": "(gdb) Запуск",
            "тип": "cppdbg",
            "запрос": "запуск",
            "program": "$ {workspaceRoot} /a.exe",
            "аргументы": [],
            "stopAtEntry": ложь,
            "cwd": "$ {workspaceRoot}",
            "среда": [],
            "externalConsole": правда,
            "MIMode": "gdb",
            "miDebuggerPath": "C: \\ mingw \\ bin \\ gdb.EXE",
            "setupCommands": [
                {
                    "description": "Включить красивую печать для gdb",
                    "text": "-enable-pretty-Printing",
                    "ignoreFailures": true
                }
            ],
            "preLaunchTask": "построить привет, мир"
        }
    ]
}
  

Дополнительные сведения см. В разделе Настройка launch.json для отладки C / C ++.

Если вы отлаживаете с помощью GDB в Windows, см. Отладка Windows с помощью GDB.

Код редактирования

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

Расширение C / C ++ для Visual Studio Code поддерживает форматирование исходного кода с использованием формата clang, который включен в расширение.

Вы можете отформатировать весь файл с помощью Format Document ( kb (editor.action.formatDocument) ) или только текущего выделения с помощью Format Selection ( kb (editor.action.formatSelection) ), щелкнув правой кнопкой мыши контекстное меню. Вы также можете настроить автоматическое форматирование со следующими параметрами:

  • C_Cpp.clang_format_formatOnSave - для форматирования при сохранении файла.
  • editor.formatOnType - для форматирования по мере ввода (запускается по символу kbstyle (;) ).

По умолчанию для стиля clang-формата установлено значение «file», что означает поиск файла .clang-формата внутри вашей рабочей области. Если найден файл .clang-format , форматирование применяется в соответствии с настройками, указанными в файле. Если в вашей рабочей области не найден файл .clang-format , вместо этого применяется форматирование на основе стиля по умолчанию, указанного в настройке C_Cpp.clang_format_fallbackStyle . В настоящее время стиль форматирования по умолчанию - «Visual Studio».Использование форматирования «Visual Studio» гарантирует, что форматирование исходного кода будет совместимо как в VS Code, так и в Visual Studio Community.

Стиль clang-формата "Visual Studio" еще не является официальным стилем clang-формата OOTB, но подразумевает следующие настройки clang-формата:

  UseTab: (Текущая настройка VS Code)
IndentWidth: (текущая настройка VS Code)
BreakBeforeBraces: AllMan
AllowShortIfStatementsOnASingleLine: false
IndentCaseLabels: false
ColumnLimit: 0
  

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

Например, на платформе Windows:

  "C_Cpp.clang_format_path": "C: \\ Program Files (x86) \\ LLVM \\ bin \\ clang-format.exe"
  

Нечеткое автозаполнение

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

В частности, возможности этой функции дают хороший опыт работы с кодом C.

Код навигации

Функции навигации по исходному коду, предоставляемые расширением C / C ++, являются мощными инструментами для понимания и обхода вашей кодовой базы. Эти функции поддерживаются тегами, хранящимися в автономной базе данных символьной информации. При установленном расширении C / C ++ эта база данных создается всякий раз, когда папка, содержащая файлы исходного кода C ++, загружается в VS Code.Индикатор платформы (Win32 на рисунке ниже) становится красным и появляется рядом со значком пламени, пока анализатор тегов генерирует эту информацию.

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

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

Для обеспечения наилучшего взаимодействия расширение C / C ++ для VS Code должно знать, где он может найти каждый файл заголовка, на который имеется ссылка в вашем коде.По умолчанию расширение ищет текущий исходный каталог, его подкаталоги и некоторые зависящие от платформы местоположения. Если указанный файл заголовка не может быть найден, VS Code отображает зеленую волнистую линию под каждой директивой #include, которая ссылается на него.

Чтобы указать дополнительные каталоги include для поиска, наведите курсор на любую директиву #include, отображающую зеленую волнистую линию, а затем щелкните действие с лампочкой, когда оно появится. Откроется файл c_cpp_properties.json для редактирования; здесь вы можете указать дополнительные подключаемые каталоги для каждой конфигурации платформы индивидуально, добавив дополнительные каталоги в его свойство includePath.

Поиск символов

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

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

Чтобы найти символ в текущей рабочей области, начните с нажатия kb (workbench.action.showAllSymbols) вместо этого, затем введите имя символа. Список возможных совпадений появится, как и раньше. Если вы выберете совпадение, которое было найдено в файле, который еще не открыт, файл будет открыт до перехода к местоположению совпадения.

Кроме того, вы можете искать символы, открывая эти команды через палитру команд , если хотите. Используйте Quick Open ( kb (workbench.action.quickOpen) ), затем введите команду «@» для поиска в текущем файле или команду «#» для поиска в текущей рабочей области. kb (workbench.action.gotoSymbol) и kb (workbench.action.showAllSymbols) - это просто ярлыки для команд «@» и «#» соответственно, поэтому все работает одинаково.

Peek Definition

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

Чтобы просмотреть определение символа, поместите курсор на символ в любом месте исходного кода, а затем нажмите kb (editor.action.previewDeclaration) . Кроме того, вы можете выбрать Peek Definition из контекстного меню (щелкните правой кнопкой мыши, затем выберите Peek Definition ).

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

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

Перейти к определению

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

Чтобы перейти к определению символа, поместите курсор на символ в любом месте кода, а затем нажмите kb (editor.action.goToDeclaration) . В качестве альтернативы вы можете выбрать Перейти к определению из контекстного меню (щелкните правой кнопкой мыши, затем выберите Перейти к определению ). Когда есть только одно определение символа, вы перейдете непосредственно к его местоположению, в противном случае конкурирующие определения отображаются в окне просмотра, как описано в предыдущем разделе, и вы должны выбрать определение, к которому хотите перейти.

Отладка

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

VS Code поддерживает следующие отладчики для C / C ++ в зависимости от используемой операционной системы:

  • Linux : GDB
  • macOS : LLDB или GDB
  • Windows : отладчик Windows Visual Studio или GDB (с использованием Cygwin или MinGW)

Отладка Windows с помощью GDB

Вы можете отлаживать приложения Windows, созданные с помощью Cygwin или MinGW, с помощью VS Code. Чтобы использовать функции отладки Cygwin или MinGW, путь отладчика должен быть установлен вручную в конфигурации запуска ( launch.json ). Для отладки приложения Cygwin или MinGW добавьте свойство miDebuggerPath и установите его значение в расположение соответствующего gdb.exe для среды Cygwin или MinGW.

Например:

  "miDebuggerPath": "c: \\ mingw \\ bin \\ gdb.exe"
  
Отладка

Cygwin / MinGW в Windows поддерживает сценарии отладки как с подключением, так и с запуском.

Условные точки останова

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

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

Точки останова функции

Точки останова функции позволяют прервать выполнение в начале функции, а не в определенной строке кода.Чтобы установить точку останова функции, на панели Debug щелкните правой кнопкой мыши в разделе Breakpoints , затем выберите Add Function Breakpoint и введите имя функции, выполнение которой вы хотите прервать.

Оценка экспрессии

VS Code поддерживает оценку выражений в нескольких контекстах:

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

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

Многопоточная отладка

Расширение C / C ++ для VS Code позволяет отлаживать многопоточные программы.Все потоки и их стеки вызовов появляются в разделе Call Stack :

Отладка дампа памяти

Расширение C / C ++ для VS Code также может выполнять отладку дампов памяти. Чтобы отладить дамп памяти, откройте файл launch.json и добавьте свойство coreDumpPath (для GDB или LLDB) или dumpPath (для отладчика Windows Visual Studio) в конфигурацию C ++ Launch , установите его значение быть строкой, содержащей путь к дампу памяти.Это будет работать даже для программ x86, отлаживаемых на машине x64.

Дополнительные символы

Если есть дополнительные каталоги, в которых отладчик может найти файлы символов (например, файлы .pdb для отладчика Windows Visual Studio), их можно указать, добавив additionalSOLibSearchPath (для GDB или LLDB) или symbolSearchPath (для отладчика Windows Visual Studio).

Например:

  "additionalSOLibSearchPath": "/ путь / к / символам; / другому / пути / к / символам"
  

или

  "symbolSearchPath": "C: \\ путь \\ к \\ символам; C: \\ другой \\ путь \\ к \\ символам"
  

Найдите исходные файлы

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

Например:

  "sourceFileMap": {
    "/build/gcc-4.8-fNUjSI/gcc-4.8-4.8.4/build/i686-linux-gnu/libstdc++-v3/include/i686-linux-gnu": "/ usr / include / i686-linux-gnu /c++/4.8 ",
    "/build/gcc-4.8-fNUjSI/gcc-4.8-4.8.4/build/i686-linux-gnu/libstdc++-v3/include": "/usr/include/c++/4.8"
}
  

Команды GDB, LLDB и MI (GDB / LLDB)

Для среды отладки C ++ (GDB / LLDB) вы можете выполнять команды GDB, LLDB и MI непосредственно через консоль отладки с помощью команды -exec , но будьте осторожны, выполнение команд непосредственно в консоли отладки не проверено и в некоторых случаях может привести к сбою VS Code.

Другие функции отладки

  • Безусловные точки останова
  • Окно просмотра
  • Стек вызовов
  • Шаг

Для получения дополнительной информации об отладке с помощью VS Code см. Это введение в отладку в VS Code.

Известные ограничения

Символы и навигация по коду

Всего платформ:

  • Поскольку расширение не анализирует тела функций, Peek Definition и Go to Definition не работают для символов, определенных внутри тела функции.

Отладка

Windows:

  • GDB на Cygwin и MinGW не может прервать запущенный процесс. Чтобы установить точку останова, когда приложение запущено (не остановлено под отладчиком), или приостановить отлаживаемое приложение, нажмите kbstyle (Ctrl-C) в терминале приложения.
  • GDB на Cygwin не может открывать дампы ядра.

Linux:

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

macOS:

  • LLDB:
    • При отладке с LLDB, если окно Терминала закрывается в режиме прерывания, отладка не останавливается. Отладку можно остановить, нажав кнопку Stop .
    • Когда отладка остановлена, окно Терминала не закрывается.
  • GDB:
    • Для использования GDB в macOS необходимо выполнить дополнительные шаги по установке вручную. См. Ручная установка GDB для OS X в README.
    • При присоединении к процессу с помощью GDB отлаживаемое приложение не может быть прервано. GDB будет связывать только точки останова, установленные, когда приложение не запущено (либо до присоединения к приложению, либо пока приложение находится в остановленном состоянии). Это связано с ошибкой в ​​GDB.
    • Дампы ядра не могут быть загружены при отладке с помощью GDB, поскольку GDB не поддерживает формат дампа ядра, используемый в macOS.
    • При подключении к процессу с помощью GDB команда break all завершит процесс.

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

Читайте дальше, чтобы узнать о:

  • Базовое редактирование - узнайте о мощном редакторе VS Code.
  • Навигация по коду - быстро перемещайтесь по исходному коду.
  • Задачи - используйте задачи для сборки своего проекта и многое другое
  • Отладка - узнайте, как использовать отладчик с вашим проектом

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

В: Мой проект не загружается.

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

Q: Как мне собрать / запустить мой проект?

A: VS Code поддерживает задачи, которые можно настроить для создания приложения, и изначально понимает выходные данные MSBuild, CSC и XBuild. Для получения дополнительной информации см. Документацию по Задачам.

Если у вас есть другие вопросы или вы столкнетесь с какими-либо проблемами, напишите о проблеме на GitHub.

Удаленная работа с кодом Visual Studio и SSH - CMSC 15200

Windows 10

Эти инструкции относятся к Windows 10.Если вы используете Windows 7 или Windows 8, свяжитесь с нами через Ed для получения инструкций.

На этом шаге вы установите Windows OpenSSH Client.

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

Проверка вашей версии Windows 10

У вас должна быть установлена ​​последняя версия Windows 10. Чтобы проверить текущую версию, откройте меню «Пуск», начните набирать О вашем ПК и щелкните соответствующий параметр, когда он появится.

Прокрутите вниз до заголовка Технические характеристики Windows . Рядом с Edition вы должны увидеть Windows 10 Home или Windows 10 Pro (или аналогичный).

Ниже вы должны увидеть версии и число вроде 2004. Если это число меньше 1803, вам необходимо обновить Windows 10.

Обновление Windows 10

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

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

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

Установка клиента Windows OpenSSH

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

Вы должны увидеть следующее окно с заголовком Дополнительные функции .

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

Затем нажмите кнопку с надписью Установить (1) . Подождите, пока заполнится индикатор выполнения.

Установка завершена.

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

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

Обратите внимание, что Windows PowerShell похож на терминал Linux, хотя не совпадает с терминалом Linux. В командной строке введите

 ssh имя пользователя@linuxX.cs.uchicago.edu
 

, где X следует заменить цифрами от 1 до 5, а имя пользователя следует заменить вашим CNetID.У отдела CS есть пять серверов ( linux1 , linux2 и т. Д.), На которые вы можете войти. Выберите число от 1 до 5 и используйте его постоянно в течение квартала.

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

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

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

, где имя пользователя заменяется вашим CNetID, а X заменяется числом от 1 до 5 (число, которое вы выбрали ранее). Теперь вы подключены к компьютерам Linux в кампусе. Попробуйте выполнить несколько команд терминала, например pwd , ls и cd .

Введите logout и нажмите Enter, чтобы закрыть соединение с компьютерами Linux кампуса.Вы также можете закрыть сеанс SSH с помощью сочетания клавиш CTRL + d . Введите exit еще раз и нажмите клавишу ВВОД, чтобы выйти из Windows PowerShell.

macOS

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

Нажмите Command-Пробел, чтобы открыть Поиск Spotlight. Начните вводить Терминал и щелкните по опции, когда она появится.

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

 ssh имя пользователя @ linuxX.cs.uchicago.edu
 

, где X следует заменить цифрами от 1 до 5, а имя пользователя следует заменить вашим CNetID. У отдела CS есть пять серверов ( linux1 , linux2 и т. Д.), На которые вы можете войти. Выберите число от 1 до 5 и используйте его постоянно в течение квартала.

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

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

, где имя пользователя заменяется вашим CNetID, а X заменяется числом от 1 до 5 (число, которое вы выбрали ранее). Теперь вы подключены к компьютерам Linux в кампусе. Попробуйте выполнить несколько команд терминала, например pwd , ls и cd .

Введите logout и нажмите Enter, чтобы закрыть соединение с компьютерами Linux кампуса и вернуться в окно терминала вашего собственного компьютера.Вы также можете закрыть сеанс SSH с помощью сочетания клавиш CTRL + d .

Использование кода Visual Studio для разработки FreeRTOS

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

Если вы новичок в VS Code, вы можете найти обзор его общих возможностей и загрузок для вашей операционной системы на сайте VS Code. VS Code - это легкий редактор, который вы адаптируете под свои нужды, добавляя расширения для поддержки дополнительных языков или других возможностей.Он поддерживает отладку и имеет интеграцию с Git для управления версиями. VS Code работает с вашим кодом как есть, формат файла проекта отсутствует. Просто откройте папку на вашем компьютере, в которой находится ваш исходный код, File> Open Folder (Ctrl + K, Ctrl + O). VS Code предложит расширения, относящиеся к коду в открытой папке, если они еще не установлены. VS Code также имеет множество расширенных возможностей редактирования, таких как использование нескольких курсоров. Чтобы узнать больше об этих основных возможностях из меню «Справка», откройте интерактивную площадку, которая проведет вас через эти функции.

Поскольку FreeRTOS написан на C, вы захотите установить расширение C ++ для VS Code. Если ваш проект FreeRTOS использует CMake, вам также следует установить расширение CMake Tools. Если вы хотите развернуть и отладить на целевом устройстве из VS Code, расширение Cortex-Debug - хороший выбор. Это расширения, которые я покажу вам, как настроить для проекта FreeRTOS.

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

Получение проекта FreeRTOS

FreeRTOS предоставляет руководство по началу работы с примерами для многих плат и множества различных интегрированных сред разработки (IDE), компилятора и вариантов сборки. Документация здесь хороша, но вы все равно можете столкнуться с проблемой не найти что-то, что соответствует устройству, которое вы используете.Если вы найдете тот, который работает, сосредоточьтесь на тех GCC, которые используют make-файлы для попытки с VS Code. Адаптировать проект, предназначенный для другой IDE, будет сложно, поскольку он, вероятно, использует собственный файл проекта для IDE.

Альтернативой этому будет начать с поставщика микросхем, многие из них предоставляют инструменты конфигурации, которые могут генерировать проект FreeRTOS, настроенный для их плат, что является отличной отправной точкой. Чтобы использовать сгенерированный проект с VS Code, при выборе GCC в качестве целевого компилятора обычно предоставляется возможность создания проекта на основе make или CMake, который можно легко использовать в VS Code.У Шона Хаймела есть отличный обзор того, как начать работу с FreeRTOS с инструментами ST. В своей демонстрации он показывает STM32CubeIDE, но есть автономный инструмент конфигурации под названием STM32CubeMX, который может генерировать проект, как он показывает, но без прямой интеграции с IDE. Этот инструмент работает так же, как он демонстрирует. Единственное, что вам нужно сделать иначе, - это на вкладке Project Manager выбрать Makefile в качестве параметра Toolchain / IDE, затем выбрать Generate Code.

NXP MCUXpresso Config Tools и Espressif IDF tool также могут создавать проекты FreeRTOS на основе CMake для своих устройств.Еще один подход к началу работы с FreeRTOS - использовать проект FreeRTOS AWS, в котором есть демонстрации для многих плат.

Использование make-файлов

После создания проекта FreeRTOS откройте корневую папку проекта в VS Code. Из VS Code вы можете открыть свою папку через File> Open Folder (Ctrl + K, Ctrl + O) или через командную строку перейти в корень вашего проекта и ввести:

Код
.
 

Расширение C ++ позволяет использовать IntelliSense для файлов C и C ++.IntelliSense делает больше, чем просто подсветку синтаксиса, поскольку он обеспечивает интеллектуальное завершение кода на основе типов переменных, определений функций и т. Д. Чтобы настроить IntelliSense для расширения C ++, нам нужно сообщить ему, где находятся наши заголовки, каковы параметры компиляции и т. Д. нет никакой автоматической обработки этой информации для make-файлов, но ее относительно легко добавить. Откройте файл .vscode / c_cpp_properties.json. Первое, что вам нужно сделать, это обновить переменную intelliSenseMode до gcc-arm и указать свой кросс-компилятор в переменной compilerPath.Теперь откройте свой make-файл и найдите список включенных. Скопируйте это в массив includePath в файле c_cpp_properties.json. Для каждого местоположения папки используйте префикс $ {workspaceFolder}, чтобы указать путь относительно папки вашего проекта. Уловка здесь заключается в использовании многострочного курсора VS Code (перейдите в раздел «Справка», «Интерактивная игровая площадка», чтобы узнать об этой функции). Вы также можете добавить определения в массив define и флаги компилятора в массив compilerArgs для дальнейшего улучшения результатов.

Ниже приведен пример c_cpp_properties.json для базового проекта FreeRTOS, созданного STM32CubeMX.

 {
    "конфигурации": [
        {
            "name": "Linux",
            "includePath": [
                "$ {workspaceFolder} / **",
                "$ {workspaceFolder} / Core / Inc",
                "$ {workspaceFolder} / Drivers / STM32F7xx_HAL_Driver / Inc",
                "$ {workspaceFolder} / Drivers / STM32F7xx_HAL_Driver / Inc / Legacy",
                "$ {workspaceFolder} / Middlewares / Third_Party / FreeRTOS / Source / include",
                "$ {workspaceFolder} / Middlewares / Third_Party / FreeRTOS / Source / CMSIS_RTOS_V2",
                "$ {workspaceFolder} / Middlewares / Third_Party / FreeRTOS / Source / portable / GCC / ARM_CM7 / r0p1",
                "$ {workspaceFolder} / Drivers / CMSIS / Device / ST / STM32F7xx / Include",
                "$ {workspaceFolder} / Драйверы / CMSIS / Включить"
            ],
            "определяет": [
                "USE_HAL_DRIVER",
                "STM32F767xx"
            ],
            "compilerPath": "/ opt / arm-none-eabi / gcc-arm-none-eabi-9-2020-q2-update / bin / arm-none-eabi-gcc",
            "compilerArgs": [
                "-mcpu = cortex-m7",
                "-mthumb",
                "-mfpu = fpv5-d16",
                "-mfloat-abi = жесткий"
            ],
            "cStandard": "gnu11",
            "cppStandard": "GNU ++ 14",
            "intelliSenseMode": "gcc-arm"
        }
    ],
    «версия»: 4
}
 

Чтобы создать приложение, если все ваши инструменты доступны на вашем пути, перейдите в окно терминала VS Code и запустите make.Если терминал не отображается, его можно открыть через меню «Вид»> «Терминал» (Ctrl + `).

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

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

Одна из проблем, с которой вы столкнетесь с CMake и встроенным, - это попытка скомпилировать простую программу на C, чтобы убедиться, что у вас есть работающий компилятор C. Это не будет работать с кросс-компилятором, поскольку скомпилированная программа предназначена для другой системы. Вы можете передать параметр, чтобы CMake не пробовал это делать. Откройте .vscode / settings.json и добавьте cmake.configureSettings, если его нет. Внутри этой структуры добавьте пару «имя-значение» CMAKE_C_COMPILER_WORKS TRUE, чтобы сообщить CMake, что эта проверка не требуется. Вы также можете передать CMake дополнительные параметры через эту структуру, например, любые, которые имеют префикс -D в инструкциях по сборке, которые вы видите.

Ниже приведен пример settings.json для компиляции демонстрационного проекта FreeRTOS AWS. Обратите внимание, что параметры компилятора, поставщика и платы зависят от того, какую демонстрацию вы запускаете, и рассматриваются как часть командной строки для сборки проекта с использованием CMake.Здесь они были сопоставлены с массивом cmake.configureSettings, поэтому мы можем построить проект из VS Code.

Settings.json
 {
    "cmake.configureOnOpen": правда,
    "cmake.configureSettings": {
        "КОМПИЛЯТОР": "xtensa-esp32",
        "CMAKE_C_COMPILER_WORKS": "ИСТИНА",
        "ПРОДАВЦ": "эспресси",
        "ДОСКА": "esp32_wrover_kit"
    },
    "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools"
}
 

После обновления этих настроек вы можете щелкнуть правой кнопкой мыши CMakeLists.txt или используйте палитру команд с F1 и выберите CMake Удалить кеш и перенастройте его. Это удалит все артефакты из-за неудачного создания кеша при первом открытии папки до того, как мы передадим в CMake правильные флаги. Теперь вы можете построить проект, и IntelliSense должен работать повсюду.

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

Отладка

Расширение Cortex-Debug - хороший способ начать развертывание и отладку приложения FreeRTOS на устройстве. Это расширение работает с несколькими различными аппаратными отладчиками и соответствующим программным обеспечением. Вам необходимо настроить среду для использования с имеющимся у вас зондом, а затем настроить расширение для его использования. Лучшее место для начала работы с вашей конкретной конфигурацией - это вики для расширения.

Чтобы начать, перейдите в перспективу «Отладка» в VS Code и выберите «Создать запуск».json файл. Это запросит список параметров в палитре команд, там выберите Cortex Debug. Это сгенерирует базовый файл launch.json, который вы можете настроить для своего аппаратного зонда и целевого устройства.

В приведенном ниже примере launch.json настроен для использования OpenOCD с платой STM32. Здесь то, что нужно было настроить, указывало на исполняемый файл в моих выходных данных сборки и файлы конфигурации для оборудования отладки и цели. Вам нужно будет обновить эти настройки для вашей собственной среды.Cortex-Debug поддерживает другие зонды, конфигурация которых будет отличаться, см. Вики для получения дополнительной информации.

 {
    "версия": "0.2.0",
    "конфигурации": [
        {
            "name": "Отладка Cortex",
            "cwd": "$ {workspaceRoot}",
            "исполняемый файл": "./build/nucleo-f767zi-freertos-blink.elf",
            "запрос": "запуск",
            "тип": "отладка коры",
            "servertype": "openocd",
            "configFiles": [
                "/ usr / share / openocd / scripts / interface / stlink-v2-1.cfg ",
                "/usr/share/openocd/scripts/target/stm32f7x.cfg"
            ]
        }
    ]
}
 

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

 {
     "cortex-debug.armToolchainPath": "/ opt / arm-none-eabi / gcc-arm-none-eabi-9-2020-q2-update / bin"
}
 

Другие добавочные номера

VS Code имеет множество расширений и часто будет запрашивать вас, когда вы впервые открываете файлы, для которых есть зарегистрированные расширения.В контексте разработки FreeRTOS вы можете встретить ассемблер в файлах .S и сценарии компоновщика в файлах .ld. Расширения x86 и x86_64 Assembly и LinkerScript могут обеспечивать подсветку синтаксиса для каждого из этих соответствующих типов файлов.

Получение помощи

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

Заключение

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

Эффективное программирование Arduino с помощью Arduino CLI и Visual Studio Code

Добавлено в избранное Любимый 22

Введение

Arduino IDE (интегрированная среда разработки) отлично справляется со своим предназначением: это простая однофайловая среда разработки приложений.Он имеет достаточно интегрированных инструментов, чтобы помочь в достижении этой цели. Но для разработки более крупных приложений - проектируете ли вы библиотеки Arduino или разрабатываете новые ядра Arduino - это не сравнится с полнофункциональной IDE C / C ++.

VS Код, используемый для редактирования файла эскиза Arduino при просмотре файла .h библиотеки

В Arduino IDE отсутствует ряд «профессиональных» функций поддержки кода, например:

  • Навигация по коду - будь то поиск по ссылке (мгновенный переход к определению используемой функции), поиск по символу (быстрая навигация к функциям или определениям символов в файле) или быстрая ссылка на ошибку компиляции, навигация по коду имеет решающее значение для управления большими базами кода.
  • Автозаполнение - Эта функция, конечно, может помочь завершить длинные имена констант, но она также может дать представление о параметрах, которые может ожидать функция.
  • Интеграция управления версиями - Независимо от того, используете ли вы git или SVN, многие современные IDE предоставляют интеграцию с системой управления версиями, которая может построчно отображать изменения, внесенные вами с момента последней фиксации.
  • Рефакторинг - Требуется пересмотреть схему именования функций? Или преобразовать общий блок кода в функцию, которую можно будет шире использовать во всем приложении? Похоже на рефакторинг! В этом может помочь современная IDE.
  • Интегрированный терминал - Независимо от того, используете ли вы bash или Windows CMD, интегрированный терминал может сэкономить вам массу времени. Этот инструмент позволяет запускать «make», «grep» или любую из ваших любимых команд терминала, не меняя местами окна.

Если вы потратите время на изучение этих инструментов, они сделают программирование на C / C ++ (или на любом другом языке) намного более эффективным. Они помогают быстрее создавать лучший код.

В этом руководстве мы сосредоточимся на использовании бесплатного редактора VS Code с открытым исходным кодом от Microsoft, но многие концепции должны быть переведены на другие IDE, такие как Eclipse, Netbeans или что-то еще, что вы можете предпочесть.В этом уроке мы не шиллинг за VS Code, но иногда может быть трудно скрыть наше восхищение хорошо выполненным инструментом редактирования.

Также важным для этого руководства является недавно (предварительно) выпущенный Arduino Arduino CLI . Интерфейс командной строки Arduino предоставляет интерфейс командной строки для таких задач, как:

  • Эскизы сборки Arduino
  • Загрузка скетчей Arduino
  • Скачивание библиотек
  • Загрузка новых файлов определения платы.

Arduino CLI - это «клей», который мы будем использовать для объединения VS Code IDE с общими инструментами компиляции и загрузки Arduino.Arduino CLI предоставляет нам интерфейс командной строки, который можно передать таким инструментам, как make или оболочка, через IDE.

, описанное в этом учебном пособии

В этом руководстве будет продемонстрировано, как использовать VS Code для сборки и программирования Arduino - и все это без открытия удобной, но ограниченной Arduino IDE. Мы постараемся, насколько это возможно, подробно рассказать, как пару VS Code / Arduino CLI можно использовать для разработки библиотеки Arduino , но многое из того, что мы рассмотрим, можно адаптировать к разработке нового ядра Arduino или даже простой набросок Arduino.

Предпосылки

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

Или, честно говоря, просто возьмите Raspberry Pi и погрузитесь с головой в установку Headless Raspberry Pi

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

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

Начало работы с VS Code

Microsoft Visual Studio (VS) Code IDE - это универсальный, бесплатный редактор кода с открытым исходным кодом.Его можно использовать для разработки любого приложения, которое вы задумали - будь то кодовая база C, C ++, Python, Javascript или что-то еще, в чем вы программируете.

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

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

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

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

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

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

Вы также можете использовать браузер «Расширения» в среде IDE («Просмотр» -> «Расширения» или щелкнуть квадратный значок на левой панели) для поиска или просмотра дополнительных расширений.

Установка расширения должна быть такой же простой, как щелчок установки на странице Visual Studio Marketplace или из браузера расширений IDE.

VS Код для разработки библиотеки Arduino

Если вы знакомы с VS Code, то поймете, что его гибкость означает, что IDE можно использовать практически для любого языка программирования.Этот раздел поможет вам настроить VS Code для разработки C, C ++ или других исходных файлов в библиотеке Arduino.

Открытие библиотеки Arduino в VS Code

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

Загрузите библиотеку в папку «библиотеки» Arduino Sketchbook. Мы рекомендуем использовать git для загрузки. Это особенно продемонстрирует возможности управления версиями VS Code.Ознакомьтесь с нашим руководством по использованию GitHub, чтобы узнать, как использовать git для загрузки библиотеки. Кроме того, вы можете использовать кнопки «Клонировать или Загрузить»> «Загрузить ZIP» в веб-интерфейсе GitHub, чтобы загрузить библиотеку.

Откройте VS Code, затем откройте папку библиотеки Arduino, перейдя в File > Open Folder ... . (или нажмите CTRL + K, затем CTRL + O.)

Затем выберите папку библиотеки Arduino, которую вы хотите открыть в среде IDE. Это должен быть каталог верхнего уровня библиотеки, в котором содержатся каталоги «src» и «examples».

Это откроет новое окно VS Code. Важно отметить, что слева вы должны заметить файловый навигатор, показывающий стандартную файловую структуру библиотеки Arduino («examples», «src», «kewords.txt» и т. Д.). Вы можете щелкнуть папку «src» и дважды щелкнуть файлы «cpp» и / или «h», чтобы открыть их. Вы также можете разделить ваше окно на . Мне нравится, когда мой файл «h» находится справа, а файл «cpp» - слева. Чтобы переместить файл, просто перетащите его вкладку на другую сторону окна.

Изменение

c_cpp_properties.JSON

Когда вы впервые открываете папку библиотеки Arduino, если вы выберете вкладку «Проблемы» в нижней части окна, вы увидите несколько ошибок. Большинство из них, вероятно, будет связано с тем, что среда VS Code не знает, где установлены ваши основные файлы Arduino. Поиск этих файлов позволит вам углубиться в определения Arduino, чтобы точно узнать, как определены классы и функции String, Serial, digitalRead и т. Д.

Чтобы установить эти местоположения, нажмите CTRL + SHIFT + P, затем введите: «C / CPP: Edit Configurations» - или, по крайней мере, начните вводить это, затем нажмите Enter, когда будет выделена правильная настройка.

Это создаст файл с именем «c_cpp_properties.json», который будет сохранен в папке «.vscode». Этот файл сообщает VS Code IDE, где искать ссылки на функции, определения и многое другое. Если вы укажете ему расположение ядер, библиотек и компилятора Arduino, вы сможете выполнить обратное отслеживание с помощью функции IDE Go to Definitions .

Это мой файл c_cpp_properties.json при использовании Arduino Uno с установленными стандартными библиотеками:

  язык: Javascript
{
    "конфигурации": [
        {
            "name": "Win32",
            "includePath": [
                "$ {workspaceFolder} / **",
                "C: / Program Files (x86) / Arduion / hardware / arduino / avr / cores / arduino",
                "C: / Program Files (x86) / Arduino / hardware / arduino / avr / libraries / EEPROM / src",
                "C: / Program Files (x86) / Arduino / hardware / arduino / avr / libraries / HID / src",
                «C: / Program Files (x86) / Arduino / hardware / arduino / avr / libraries / SoftwareSerial / src»,
                "C: / Program Files (x86) / Arduino / hardware / arduino / avr / libraries / SPI / src",
                "C: / Program Files (x86) / Arduino / hardware / arduino / avr / libraries / Wire / src",
                «C: / Program Files (x86) / Arduino / hardware / arduino / avr / libraries / SPI / src»
            ],
            "определяет": [
                "_ОТЛАЖИВАТЬ",
                "UNICODE",
                "_UNICODE",
                "F_CPU = 16000000L",
                "ARDUINO = 10805",
                "ARDUINO_AVR_UNO",
                "ARDUINO_ARCH_AVR"
            ],
            "compilerPath": "C: / Program Files (x86) / Arduino / hardware / tools / avr / bin / avr-gcc.EXE",
            "cStandard": "c11",
            "cppStandard": "c ++ 17",
            "intelliSenseMode": "clang-x64"
        }
    ],
    «версия»: 4
}
  

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

С этим набором попробуйте перейти к вызову функции ядра или библиотеки Arduino. Щелкните его правой кнопкой мыши и скажите «Перейти к определению».

Это невероятно мощный инструмент, если вы хотите использовать все преимущества ядра / библиотек Arduino при разработке библиотек Arduino.

Открытие терминала

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

Вы можете открыть терминал, выбрав «Просмотр»> «Терминал» (или CTRL + `).

Использование терминала для поиска текста. Обратите внимание на функцию CTRL + Click! Такой сильный.

Определение терминала

Вы можете изменить исполняемый файл терминала, перейдя в окно Settings , затем в Features > Terminal > ** External **. Исполняемый файл здесь должен совпадать с исполняемым файлом терминала, который вы хотите использовать.

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

  • Windows CMD: C: \ Windows \ System32 \ cmd.exe - для многих исполняемых файлов Windows по-прежнему требуется Windows CMD. Это должно быть вашим значением по умолчанию, если вы используете установку VS Code для Windows.
  • Git Bash: C: \ Program Files \ Git \ bin \ bash.exe - мне нравится установка git для Windows. В основном потому, что мне нравится Unix-ish bash, который он устанавливает на мою машину с Windows. Я могу использовать это для "grep", "find", "rm", "cp" или для выполнения всевозможных других команд Unix в моей номинальной системе Windows.

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

Введение в Arduino CLI

Теперь, когда вы прошли ускоренный курс по объединению VS Code с библиотекой Arduino, пришло время погрузиться во второй инструмент этого руководства: интерфейс командной строки Arduino.

Arduino CLI - это интерфейс командной строки, который объединяет все, что вы ожидаете от Arduino IDE, в простой текстовый инструмент. С помощью интерфейса командной строки Arduino вы можете создавать эскизы, загружать программы, загружать библиотеки или описания плат и делать многое, многое другое.Что наиболее важно, интерфейс командной строки Arduino предоставляет нам интерфейс командной строки, который можно запускать из VS Code для создания и загрузки эскизов Arduino.

Скачать Arduino CLI

Arduino CLI все еще находится в зачаточном состоянии. Вы можете скачать последнюю «альфа-версию» из репозитория GitHub здесь: https://github.com/arduino/arduino-cli#download-the-latest-unstable-alpha-preview.

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

Создание файла конфигурации интерфейса командной строки Arduino

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

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

  язык: оболочка
arduino-cli.exe config init
  

(Обратите внимание, что arduino-cli.exe , возможно, потребуется переименовать во что-то вроде arduino-cli-0.2.2-alpha.preview-windows.exe или любую другую версию, которую вы, возможно, загрузили.)

Эта команда создаст новый файл с именем .cli-config.yml . Среди наиболее важных параметров, которые необходимо изменить в этом файле конфигурации:

  • sketchbook_path - должен совпадать с каталогом вашего альбома для набросков Arduino . Здесь устанавливаются все ваши ручные библиотеки и описания оборудования.
  • arduino_data - должно соответствовать месту установки вашей платы Arduino и менеджера библиотеки. В большинстве случаев менять это не нужно.

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

Использование Arduino CLI

README в репозитории Arduino CLI GitHub включает в себя большое изложение функций и возможностей инструмента. Мы настоятельно рекомендуем просканировать README, прежде чем продолжить. Попробуйте Arduino CLI! Ознакомьтесь с его возможностями.

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

Создание нового эскиза

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

  язык: оболочка
новый эскиз arduino-cli cli_test
  

Это должно создать новую папку и файл в вашем альбоме для эскизов Arduino с именем "cli_test.«

Скомпилировать эскиз

arduino-cli Функция compile может использоваться для компиляции скетча для любой поддерживаемой платы. Критический параметр, необходимый для этой функции, - это плата типа , которая может быть снабжена опцией --fqbn (полное имя платы).

Поддерживаемые fqbn зависят от установленных вами плат, но есть несколько распространенных вариантов:

Как вы заметите, значение fqbn принимает формат производитель : архитектура : плата .

В этом примере команда компилирует скетч, который мы только что создали для Arduino Uno:

  язык: оболочка
компиляция arduino-cli --fqbn arduino: avr: uno C: /Users/user.name/Documents/Arduino/cli_test
  

(Примечание: в приведенном выше примере вам необходимо заменить каталог вашего альбома для набросков Arduino на "C: /Users/user.name/Documents/Arduino/".)

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

  • подробный : -v - полезно, если вы хотите увидеть все параметры и файлы, которые компилируются в ваш эскиз.
  • Путь сборки : --build-path [строка] - Полезно, если вы хотите сохранить скомпилированный объект и шестнадцатеричные файлы.
    • Примечание. По крайней мере, на моем компьютере с Windows значение этого параметра должно быть полным путем (без родственников).
Загрузить эскиз

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

Вот команда, построенная на последнем примере, загрузка в COM-порт Windows на COM18:

  язык: оболочка
arduino-cli upload -p COM18 --fqbn -v arduino: avr: uno C: /Users/user.name/Documents/Arduino/cli_test
  

Если все идет хорошо, ваш Arduino должен начать мигать светодиодами RX / TX и вскоре должен начать запускать пустой скетч.

Оснащение кода VS с помощью Arduino CLI

Теперь, когда вы вооружены VS Code и Arduino CLI, пришло время объединить их в единую Arduino IDE без Arduino! Мы будем использовать пример библиотеки Arduino из раздела VS Code, чтобы создать интерфейс с Arduino, если вы хотите присоединиться к нему.

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

Вариант 1. Изменение tasks.json

В открытом окне VS Code перейдите к Terminal > Run Build Task .Вам будет предложено создать новый файл - «tasks.json» - нажав пару раз Enter в верхнем окне фокуса.

Замените содержимое этого файла на что-то вроде этого:

  язык: JSON
{
    // См. Https://go.microsoft.com/fwlink/?LinkId=733558
    // для документации по формату tasks.json
    "версия": "2.0.0",
    "задачи": [
        {
            "label": "Example1",
            "тип": "оболочка",
            "command": "arduino-cli compile -v -b arduino: avr: uno examples / Example1_BasicReadings",
            "группа": "строить",
            "isBackground": ложь,
            "презентация": {
                "эхо": правда,
                "раскрыть": "всегда",
                «фокус»: ложь,
                "панель": "общий",
                "showReuseMessage": истина
            },
            "проблемаМатчер": []
        },
        {
            "label": "Пример1-программа",
            "тип": "оболочка",
            "command": "arduino-cli upload -p COM18 -v --fqbn arduino: avr: uno examples / Example1_BasicReadings",
            "группа": "тест",
            "isBackground": ложь,
            "презентация": {
                "эхо": правда,
                "раскрыть": "всегда",
                «фокус»: ложь,
                "панель": "общий",
                "showReuseMessage": истина
            },
            "проблемаМатчер": []
        }
    ]
}
  

В приведенном выше примере файла задачи создаются две новые задачи: одна для сборки и одна для тестирования (программа).Ключом к обеим задачам являются их параметры «метка», «группа» и «команда».

Вы увидите знакомые структуры командной строки arduino-cli в параметрах «command» для обеих опций. Один - «Example1» - компилирует код, а другой, «Example1-program», загружает его.

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

С задачами.json, попробуйте вернуться к Terminal > Run Build Task - вы должны увидеть параметр «Example1». Щелкните по нему, и должен быть вызван интерфейс командной строки Arduino и начнется компиляция. Вы увидите всплывающее окно терминала в нижней части редактора, и, надеюсь, вы не столкнетесь с какими-либо ошибками.

Вы также можете загрузить код, перейдя в Terminal > Run Task > Example1-program . Это вызовет вторую задачу, которую мы определили в файле задач выше.

Вариант 2: Настройка Makefile

Если в вашей системе установлена ​​программа GNU make (пользователи Windows: ознакомьтесь с Make for Windows), создание пользовательского make-файла обеспечивает более гибкое решение для разработки.

Чтобы попробовать, создайте файл с именем Makefile в верхнем каталоге вашей библиотеки Arduino. В этот файл вставьте что-то вроде этого:

  язык: Makefile
# Базовая папка библиотеки Arduino и пример структуры
EXAMPLES_BASE = примеры
ПРИМЕР? = Example1_BasicReadings

# Имя исполняемого файла Arduino CLI и расположение каталога
ARDUINO_CLI = arduino-cli
ARDUINO_CLI_DIR =.# Тип платы Arduino CLI
BOARD_TYPE? = Arduino: avr: uno

# Порт по умолчанию для загрузки
ПОСЛЕДОВАТЕЛЬНЫЙ ПОРТ? = COM18

# Необязательный подробный триггер компиляции / загрузки
V? = 0
ГЛАГОЛ =

# Путь сборки - используется для хранения встроенных двоичных и объектных файлов
BUILD_DIR = _build
BUILD_PATH = $ (PWD) / $ (EXAMPLES_BASE) / $ (ПРИМЕР) / $ (BUILD_DIR)

ifneq ($ (V), 0)
    ГЛАГОЛ = -v
endif

.PHONY: все примерные программы чистые

все: пример

пример:
    $ (ARDUINO_CLI_DIR) / $ (ARDUINO_CLI) compile $ (VERBOSE) --build-path = $ (BUILD_PATH) --build-cache-path = $ (BUILD_PATH) -b $ (BOARD_TYPE) $ (EXAMPLES_BASE) / $ (ПРИМЕР )

программа:
    $ (ARDUINO_CLI_DIR) / $ (ARDUINO_CLI) загрузить $ (VERBOSE) -p $ (SERIAL_PORT) --fqbn $ (BOARD_TYPE) $ (EXAMPLES_BASE) / $ (ПРИМЕР)

чистый:
    @rm -rf $ (BUILD_PATH)
    @rm $ (ПРИМЕР_БАЗА) / $ (ПРИМЕР) / *.эльф
    @rm $ (EXAMPLES_BASE) / $ (EXAMPLE) / *. шестнадцатеричный
  

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

В качестве самого простого примера попробуйте выполнить:

  make ПРИМЕР = Example1_BasicReadings
  

Это должно построить первый пример в этой библиотеке. Вы также можете добавить триггеры, такие как V = 1 для подробной компиляции / загрузки или BOARD_TYPE , чтобы указать, для какой платы Arduino вы компилируете.

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

  сделать программу ПРИМЕР = Example1_BasicReadings SERIAL_PORT = COM18
  

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

Создание файла Makefile

Основываясь на первом варианте, вы можете использовать задачи VS Code для быстрого вызова команд Makefile. Вместо строки «command» попробуйте добавить вызов make или make программу для запуска «test».«

  язык: JSON
{
    // См. Https://go.microsoft.com/fwlink/?LinkId=733558
    // для документации по формату tasks.json
    "версия": "2.0.0",
    "задачи": [
        {
            "label": "сделать текущий пример",
            "тип": "оболочка",
            "команда": "сделать ПРИМЕР = $ {fileBasenameNoExtension}",
            "группа": "строить",
            "isBackground": ложь,
            "презентация": {
                "эхо": правда,
                "раскрыть": "всегда",
                «фокус»: ложь,
                "панель": "общий",
                "showReuseMessage": истина
            },
            "проблемаМатчер": []
        },
        {
            "label": "текущий пример программы",
            "тип": "оболочка",
            "command": "сделать программу EXAMPLE = $ {fileBasenameNoExtension}",
            "группа": "тест",
            "isBackground": ложь,
            "презентация": {
                "эхо": правда,
                "раскрыть": "всегда",
                «фокус»: ложь,
                "панель": "общий",
                "showReuseMessage": истина
            },
            "проблемаМатчер": []
        }
    ]
}
  

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

Что особенно важно в утилите задач VS Code, так это ее быстрый доступ с помощью привязки клавиш. Вы можете нажать CTRL + SHIFT + B , затем ввести (или ввести задачу, которую вы хотите запустить), и сразу же приступить к созданию примера. По умолчанию тестовые задачи не привязаны, но вы можете воспользоваться сочетаниями клавиш VS Code (CTRL + K CTRL + S) и изменить «Выполнить тестовую задачу», чтобы это изменить.

Привязки клавиш - это истинная сила VS Code - вы можете сделать так много, даже не касаясь мыши!

Ресурсы и дальнейшее развитие

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

Дополнительные ресурсы по VS Code и Arduino CLI можно найти по ссылкам:

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

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

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