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

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

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

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

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

по нему статья тут

Содержание:

Удаление

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

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

Установка

Отлично, теперь мы можем установить программу. Переходим на сайт

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

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

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

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

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

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

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

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

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

Боковую панель я пока скрою, мы еще не раз к ней вернемся.

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

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

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

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

Лень читать?

видео версия.

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

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

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

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

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

Проблемы

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

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

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

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

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

Вывод

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

Терминал

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

.

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

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

Уведомления

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

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

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

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

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

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

По умолчанию в левой части редактора расположилась панель действий с 6 элементами:

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

Проводник

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

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск

Поиск (

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

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

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

Открыть вкладку можно кликнув на иконку либо зажав

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

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

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

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

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

Расширения

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

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

• Включено — выводятся все установленные расширения;
• Рекомендуемые;
• Расширения, которые установлены, но отключены.

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

Настройки

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

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

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

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

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

Лень читать?

видео версия.

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

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

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

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

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

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

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

. Здесь есть куча вариантов, например две строки и мы можем какой-то файл переместить сюда и работать так. Также есть вариант Сетка 2х2. То есть, можно работать одновременно с 4 файлами.

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

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

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

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

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

Сверху есть полноэкранный режим при нажатии на

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

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

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

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

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

Далее в самом меню Вид мы можем включить или выключить перенос текста, это можно сделать зажав

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

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

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

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

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

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

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

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

Иконки

Также мы можем изменить вид иконок для файлов в нашем проводнике. Для этого переходим в

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

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

Параметры

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

или зажимаем

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

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

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

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

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

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

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

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

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

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

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

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

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

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

. Галочку можно снять и подсказки пропадут.

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

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

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

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

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

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

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

у нас все выстроится как надо.

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

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. Мы с тобой его установим, настроим, а также применим плагины, которые существенно упростят нам работу.

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

по нему статья тут

Содержание:

Удаление

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

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

Установка

Отлично, теперь мы можем установить программу. Переходим на сайт

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

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

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

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

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

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

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

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

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

Боковую панель я пока скрою, мы еще не раз к ней вернемся.

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

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

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

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

Лень читать?

видео версия.

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

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

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

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

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

Проблемы

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

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

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

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

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

Вывод

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

Терминал

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

.

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

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

Уведомления

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

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

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

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

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

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

По умолчанию в левой части редактора расположилась панель действий с 6 элементами:

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

Проводник

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

.

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

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

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

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

Поиск

Поиск (

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

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

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

Открыть вкладку можно кликнув на иконку либо зажав

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

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

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

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

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

Расширения

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

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

• Включено — выводятся все установленные расширения;
• Рекомендуемые;
• Расширения, которые установлены, но отключены.

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

Настройки

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

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

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

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

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

Лень читать?

видео версия.

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

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

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

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

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

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

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

. Здесь есть куча вариантов, например две строки и мы можем какой-то файл переместить сюда и работать так. Также есть вариант Сетка 2х2. То есть, можно работать одновременно с 4 файлами.

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

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

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

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

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

Сверху есть полноэкранный режим при нажатии на

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

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

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

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

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

Далее в самом меню Вид мы можем включить или выключить перенос текста, это можно сделать зажав

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

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

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

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

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

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

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

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

Иконки

Также мы можем изменить вид иконок для файлов в нашем проводнике. Для этого переходим в

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

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

Параметры

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

или зажимаем

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

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

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

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

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

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

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

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

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

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

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

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

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

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

. Галочку можно снять и подсказки пропадут.

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

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

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

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

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

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

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

у нас все выстроится как надо.

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

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. Мы с тобой его установим, настроим, а также применим плагины, которые существенно упростят нам работу.

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

по нему статья тут

Содержание:

Удаление

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

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

Установка

Отлично, теперь мы можем установить программу. Переходим на сайт

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

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

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

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

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

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

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

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

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

Боковую панель я пока скрою, мы еще не раз к ней вернемся.

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

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

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

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

Лень читать?

видео версия.

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

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

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

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

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

Проблемы

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

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

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

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

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

Вывод

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

Терминал

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

.

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

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

Уведомления

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

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

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

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

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

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

По умолчанию в левой части редактора расположилась панель действий с 6 элементами:

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

Проводник

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

.

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

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

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

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

Поиск

Поиск (

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

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

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

Открыть вкладку можно кликнув на иконку либо зажав

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

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

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

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

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

Расширения

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

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

• Включено — выводятся все установленные расширения;
• Рекомендуемые;
• Расширения, которые установлены, но отключены.

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

Настройки

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

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

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

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

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

Лень читать?

видео версия.

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

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

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

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

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

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

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

. Здесь есть куча вариантов, например две строки и мы можем какой-то файл переместить сюда и работать так. Также есть вариант Сетка 2х2. То есть, можно работать одновременно с 4 файлами.

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

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

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

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

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

Сверху есть полноэкранный режим при нажатии на

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

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

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

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

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

Далее в самом меню Вид мы можем включить или выключить перенос текста, это можно сделать зажав

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

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

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

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

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

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

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

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

Иконки

Также мы можем изменить вид иконок для файлов в нашем проводнике. Для этого переходим в

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

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

Параметры

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

или зажимаем

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

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

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

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

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

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

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

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

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

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

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

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

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

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

. Галочку можно снять и подсказки пропадут.

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

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

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

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

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

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

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

у нас все выстроится как надо.

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

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.

Установка

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

   sudo dpkg -i (имя пакета).deb
   	sudo apt-get install -f

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).

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

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

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

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

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

Что за Visual Studio Code?

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

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

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

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

Установка 

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

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

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

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

Настройка

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

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

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

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

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

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

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

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

Вклю­ча­ем авто­со­хра­не­ние. В боко­вой пане­ли выбе­ри­те шесте­рён­ку, перей­ди­те в «Пара­мет­ры» → «Тек­сто­вый редак­тор» → «Фай­лы». Вы уви­ди­те вклад­ку 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

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. Автосохранение (File — Auto 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"  

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

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

  "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"
}  

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

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

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

  

  {
    "версия": "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": "построить привет, мир"
        }
    ]
}
  

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

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

  "miDebuggerPath": "c: \\ mingw \\ bin \\ gdb.exe"
  

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

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

  "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"
}
  

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

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

.
 

 {
    "конфигурации": [
        {
            "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
}
 

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

 {
    "версия": "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"
            ]
        }
    ]
}
 

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

  язык: 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
}
  

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

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

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

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

  язык: 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": истина
            },
            "проблемаМатчер": []
        }
    ]
}
  

  язык: 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 ПРИМЕР = Example1_BasicReadings
  

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

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