Где кнопка run в visual studio

Обновлено: 08.01.2025

В 2016-м году компания Microsoft представила миру свой новый редактор программного кода. В отличие от старшей сестры — полноценной IDE Visual Studio — VS Code получился куда более компактным и легковесным решением. Он разработан как кроссплатформенное ПО и может быть успешно установлен в системах Windows, Linux и macOS.

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

И хоть, за годы своего существования, VSCode зарекомендовал себя, в основном, как продукт для веб-разработки, в 2018 году появилось расширение " Python ", которое дало программистам многочисленные возможности для редактирования, отладки и тестирования кода на нашем любимом языке.

Установка VSCode

Поистине смешные системные требования Visual Studio Code обязательно порадуют владельцев старых машин.

Для полноценной работы редактору требуется всего лишь 1 ГБ оперативной памяти и процессор с частотой от 1.6 ГГц.

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

Установка редактора никуда не отходит от данной парадигмы и тоже является весьма простым и понятным процессом.

Windows

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

Linux

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

Установить VSCode можно несколькими способами:

Способ №1 : Самый простой способ — воспользоваться менеджером установки "Ubuntu Software".

Откройте "Ubuntu Software" -> введите в поиск "VSCode" -> выберите первую строку и нажмите "Install"

sudo apt install ./<file>.deb

О других способах установки читайте на странице официальной документации в разделе " Setup ";

macOS

Алгоритм установки редактора внутри яблочной операционной системы также не представляет собой ничего сложного:

Сначала нужно скачать Visual Studio Code с официального сайта.
Затем открыть список загрузок браузера и найти там VSCode-Darwin-Stable.zip .
Нажмите на иконку увеличительного стекла, чтобы открыть архив.
Перетащите Visual Studio Code.app в папку приложений, сделав ее доступной на панели запуска.
Щёлкните правой кнопкой мыши по значку и выберете команду " Оставить в Dock ".

Настройка под Python

Установка расширения "Python"

Для начала работы с Python, нужно перейти на вкладку Extensions , что находится на панели слева, либо нажать Ctrl + Shift + X . Сделав это, набираем в строке поиска " Python ".

Для начала работы с Python, установите расширение от Microsoft — "Python".

VS Code поддерживает, как вторую, так и третью версию языка, однако python интерпретатор на свою машину вам придётся поставить самостоятельно.

Если вы новичок и только начинаете работу с Python или же не имеете каких-то особых указаний на этот счёт, то лучшим выбором станет именно актуальная третья версия.

Вот краткий список основных возможностей расширения "Python":

Автодополнение кода.
Отладка.
Поддержка сниппетов.
Написание и проведение тестов.
Использование менеджера пакетов Conda.
Возможность создания виртуальных сред.
Поддержка интерактивных вычисления на Jupyter Notebooks.

Выбор версии интерпретатора Python

После от вас потребуется совершить выбор версии интерпретатора внутри самого редактора (обычно VS code знает, где он расположен). Для этого:

Откройте командную строку VSCode (Command Palette) комбинацией Ctrl + Shift + P .
Начинайте печатать " Python: Select Interpreter ";
После, выберите нужную версию интерпретатора.

Также выбрать версию можно в панели активности в левом нижнем углу:

Выбор версии Python-интерпретатора в панели активности VS Code

Если вы хотите использовать pipenv в своем проекте:

Установите pipenv командой pip install pipenv (или pip3 install pipenv );
Выполните команду pipenv install ;
Откройте " Command Palette ", напечатайте " Python: Select Interpreter " и из списка выберите нужную версию интерпретатор.

Работа в VS Code

Запуск редактора

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

Так как VSCode, в первую очередь — редактор, а не полновесная среда разработки, здесь нет особой привязки к проекту. Вы можете сходу создавать, открывать и редактировать нужные вам файлы. Достаточно, после запуска, нажать Open File или New File и можно начинать работу.

Интерфейс

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

Весь UI VSCode разделился, таким образом, на шесть областей:

Область редактора — основная область для написания и редактирования вашего кода.
Боковая панель — здесь содержатся различные представления (например проводник).
Строка состояния — визуализирует рабочую информацию об открытом в данный момент файле.
Командная панель — классическая главная панель с вкладками file, edit, go, run и так далее.
Панель активности — область в крайнем левом углу, где находятся важные вспомогательные вкладки, вроде контроля версий, дебаггера и магазина расширений.
Мультипанель — панель на которой располагается вывод отладку, информация об ошибках и предупреждениях, а также встроенный в VS Code терминал.

Запуск Python-кода (run)

Выполнить код можно несколькими способами. Самый простой — комбинацией Ctrl + Alt + N .

Для запуска python-кода выполните комбинацию "Ctrl + Alt + N"

Также можно вызвать скрипт контекстным меню, выбрав строку " Run Python File in Terminal ".

Или нажав иконку " Run " в правом верхнем углу.

Иконка "Run" в правом верхнем углу запустит Python-код на выполнение

Отладка (debugger)

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

Для перехода в режим отладки, установите breakpoint и нажмите "F5"

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

Слева откроется панель дебаггера с информацией о состоянии переменных (Variables), отслеживаемых переменных (Watch) и стеке вызова (Call stack).

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

Рассмотрим команды (слева направо):

continue ( F5) — перемещает между breakpoint-ами;
step over ( F10) — построчное (пошаговое) перемещение;
step into ( F11) — построчное (пошаговое) перемещение c заходом в каждую вызываемую функцию;
step out ( Shift + F11) — работает противоположно step into — выходит из вызванной функции, если в данный момент вы находитесь внутри неё. Далее работает как continue .
restart ( Ctrl + Shift + F5) — начинаем отладку с начала.
stop ( Shift + F5) — остановка и выход из режима отладки.

Чаще всего для отладки используются continue ( F5 ) и step over ( F10 ).

С отладкой разобрались 👌.

Тестирование (testing)

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

Сначала следует нажать комбинацию клавиш Ctrl + Shift + P и в так называемой палитре команд выбрать Python: Configure Tests .

Для выбора фреймворка для тестов, выполните комбинацию "Ctrl + Shift + P" и наберите "Python: Configure Tests"

Редактор предложит вам определить фреймворк (мы выбрали "pytest") и папку, содержащую тесты (мы выбрали ". Root directory").

Создадим новый файл с тестами ( test_app.py ) и запустим его, кликнув правой кнопкой мыши на этом файле и выбрав пункт " Run Current Test File ".

Также тесты можно запускать по нажатию на кнопку Run Tests в нижней строке состояния

Запуск тестов в VSCode с использованием фреймворка pytest.

Чтобы увидеть результаты, необходимо открыть вкладку Output на панели, и в выпадающем меню выбрать пункт PythonTestLog .

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

Для удобства работы с тестами, установим расширение " Python Test Explorer for Visual Studio Code ".

Расширение для VSCode "Python Test Explorer for Visual Studio Code"

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

Вкладка "test" (иконка с колбой в панели слева) откроет удобный проводник для запуска тестов и просмотра их состояния.

Для начала работы с системами контроля версий обратимся к вкладке Source Control , что находится на панели активности слева (или Ctrl + Shift + G ).

По умолчанию VS Code дружит с Git и GitHub

Поддержку других систем возможно настроить самостоятельно, установив соответствующие расширения.

Чтобы связать проект с github (или gitlab), сперва необходимо скачать на ваш ПК git (если ещё не скачан). VSCode автоматически определит его местоположение, и затем у вас появится возможность синхронизации.

Для работы с git, зайдите в меню слева "Source Control"

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

Все необходимые команды для работы в git находятся в меню панели "Source Control" (3 точки)

А для удобного просмотра изменений в git, советую установить расширение " Git Graph ". После его установки, на панели " Source Control " появится новая кнопка, которая отобразит граф состояния (git log).

Для отладки определенной веб-страницы в Visual Studio выберите эту веб-страницу в окне Solution Explorer и щелкните на кнопке Start Debugging (Начать отладку) в панели инструментов. (Если вы в данный момент редактируете веб-страницу, которую собираетесь тестировать, то выбирать ее нет необходимости — просто щелкните на кнопке Start Debugging для ее запуска.)

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

Если вы использовали приложение файловой системы, Visual Studio запускает свой встроенный веб-сервер на динамически выбранном порту (который предотвращает конфликт с IIS, если он установлен). Затем Visual Studio запускает браузер по умолчанию и передает ему URL, указывающий на локальный веб-сервер. В каждом случае реальная работа — компиляция страницы и создание объектов страницы — передается рабочему процессу ASP NET.

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

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

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

Пошаговая отладка

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

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

Теперь запустите свою программу обычным образом. Когда программа достигнет точки останова, выполнение приостановится, и вы переключитесь обратно в окно кода Visual Studio. Оператор, на котором установлена точка останова, не выполнится.

На этом этапе доступно несколько возможностей. Вы можете выполнить текущую строку, нажав клавишу <F11>. Следующая строка кода будет помечена желтой стрелкой, указывая на то, что именно она будет выполнена. Вы можете продолжать это на протяжении всей программы, запуская по одной строке за раз нажатием <F11> и следуя пути выполнения кода. Или же вы можете выйти из этого режима и возобновить нормальное выполнение кода, нажав клавишу <F5>.

Вместо клавиш быстрого вызова команд вроде <F11> и <F5> можно использовать кнопки панели инструментов Debug (Отладка) в Visual Studio. В качестве альтернативы можно щелкнуть правой кнопкой мыши в окне кода и выбрать опцию из контекстного меню.

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

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

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

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

Перевести программу в режим паузы можно в любой момент, щелкнув на кнопке паузы в панели инструментов или выбрав в меню Debug (Отладка) команду Break All (Остановить все).

Слежение за переменными

В некоторых случаях может понадобиться отслеживать состояние переменной без постоянного переключения в режим паузы. В таких ситуациях более полезными оказываются окна Locals (Локальные), Autos (Автоматические) и Watch (Слежение), которые позволяют отслеживать переменные во всем приложении:

Окна для слежения за переменными

Окно	Описание
Locals	Автоматически отображает все переменные в пределах текущей процедуры, предлагая быстрый обзор важных переменных
Autos	Автоматически отображает переменные, которые система Visual Studio определила как важные для текущего оператора в коде. Сюда могут входить, например, переменные, к которым получается доступ или которые изменяются в предыдущей строке
Watch	Отображает добавленные вами переменные. Установки слежения сохраняются вместе с проектом, чтобы можно было продолжить слежение за переменными позже. Для добавления слежения щелкните правой кнопкой мыши на переменной в коде и выберите в контекстном меню пункт Add Watch (Добавить слежение); в качестве альтернативы дважды щелкните на последней строке в окне Watch и введите имя переменной

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

Например, в окне Locals вы увидите переменную this, которая является ссылкой на текущий объект страницы. Если вы щелкнете на знаке "плюс" возле нее, появится полный список свойств страницы (и некоторые системные значения):

Окна Locals, Autos и Watch позволяют изменять переменные или свойства во время нахождения программы в режиме паузы. Дважды щелкните на текущем значении в столбце Value (Значение) и введите новое значение. Если не хватает какого-то окна слежения, отобразите его вручную, выбрав его в подменю Windows меню Debug.

Расширенные точки останова

Выберите в меню Debug (Отладка) команду Windows --> Breakpoints для отображения окна, в котором перечислены все точки останова в текущем проекте. Окно Breakpoints (Точки останова) предоставляет счетчик попаданий в точку останова. Дважды щелкнув на точке останова, можно переместиться в соответствующее место кода:

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

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

Location

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

Condition

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

Hit Count

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

Filter

When Hit

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

Visual Studio Code — популярный редактор кода, бесплатный и с открытым исходным кодом. Но я уверен: каждый из нас, кто пытался настроить Visual Studio Code для разработки приложений на C++, Java или Python, прошел через стадию: “О Боже! Почему нельзя как-нибудь попроще?” Я сам пробовал настроить VS Code пару раз и в итоге закончил тем, что использовал CodeBlocks. 🙁

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

Сегодня я покажу, как настроить среду разработки для спортивного программирования на C++, Java и Python в VS Code с нуля. Мы также посмотрим, какие расширения больше всего пригодятся, чтобы начать работу с VS Code. В конечном счете, ваша среда разработки будет выглядеть примерно так:

1. Устанавливаем Visual Studio Code

Скачайте последнюю версию Visual Studio Code с официального сайта. Рекомендуется загрузить системный установщик (System Installer), но если у вас нет прав администратора, то пользовательский установщик (User Installer) тоже подойдет. Выполните все обычные шаги по установке и обязательно проставьте все следующие чекбоксы:

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

2. Настраиваем расширения

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

от Microsoft — [Важно] Для корректной работы этого расширения нам понадобится установленный и добавленный в PATH компилятор MinGW. Если у вас его нет, следуйте этому руководству. от austin. от Microsoft — вам нужно будет настроить Python для работы этого расширения. Загрузите и установите последнюю версию отсюда. от Microsoft — [Важно] Перед установкой убедитесь, что в вашей системе настроены Java 8 JDK и JRE и указаны все необходимые переменные среды для Java. Если нет, посмотрите это видео о том, как настроить Java на вашем компьютере. от Jun Han — мы будем использовать это расширение для запуска всех наших программ. Для этого необходимо выполнить некоторые шаги по настройке. Мы увидим эти шаги в следующих разделах.

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

(Необязательно)Material Theme от Mattia Astronio — это расширение содержит множество приятных глазу тем. Вы можете выбрать любую, какая понравится. Лично я предпочитаю Monokai, которая доступна в VS Code по умолчанию, без каких-либо расширений.

Чтобы выбрать тему, нажмите Ctrl + Shift + P. Откроется палитра команд. Осуществите поиск по слову “theme” и выберите опцию Color Theme. Чтобы настроить иконки, можете выбрать опцию File Icon Theme.

Расширения для тех, кто интересуется FrontEnd-фреймворками для веб-разработки, такими как Angular и React:

(Необязательно) Angular Language Service от Angular.
(Необязательно) Angular Snippets от John Papa.
(Необязательно) ES7 React / Redux / GraphQL / React-Native snippets от dsznajder.
(Необязательно) React Native Tools от Microsoft.
(Необязательно) Live Server от Ritwick Dey.

3. Настраиваем внешний вид редактора

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

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

Пройдитесь по файлам main.cpp, Main.java и main.py и посмотрите на записанный в них образец кода. По сути, шаблонный код, предоставленный в образцах для каждого из этих трех языков, принимает входящие данные из файла input.txt и обеспечивает вывод в файл output.txt. Для каждой программистской задачи, которую вы хотите решить, просто создайте копию этого шаблона и напишите свой код в функции solve().

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

Откройте файлы в следующем порядке: main.cpp, input.txt, output.txt. Порядок, в каком были открыты файлы, можно видеть сверху на панели инструментов. Убедитесь, что порядок именно такой, как указано выше.
Откройте input.txt. Выберите в меню View -> Editor Layout -> Split Right. Вы должны увидеть что-то подобное:

У вас получится две группы. Перетащите output.txt из левой группы в правую. Закройте тот input.txt, что остался слева. Должно выйти примерно так:

Далее откройте output.txt в правой группе. Выберите View -> Editor Layout -> Split Down. Уберите output.txt из верхней группы. После этого вы увидите:

Готово! Мы настроили внешний вид редактора. А теперь давайте запускать код.

4. Запускаем код!

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

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

Выберите File -> Preferences -> Settings.
Введите “code runner run in terminal” в поле поиска и установите галку в чекбоксе:

По умолчанию Code Runner не добавляет флаг -std=c++14 при компиляции кода. Это ограничивает ваши возможности как программиста. Например, если вы попытаетесь сделать так:

То это вызовет предупреждение: “Расширенные списки инициализаторов доступны только с -std=c++11 или -std=gnu++11”.

Выполните следующие действия, чтобы добавить флаг:

Выберите File -> Preferences -> Settings.
Введите в поиске “Run Code Configuration”.
Определите местонахождение “Code-runner: Executor Map” и выберите “Edit in settings.json”. Это откроет файл settings.json. Добавьте туда следующий код:

Наконец-то всё настроено для запуска ваших программ на C++, Java и Python.

Откройте файл main.cpp. Нажмите правую кнопку мыши и выберите опцию Run Code. Попробуйте напечатать что-нибудь в функции solve(), чтобы проверить, происходит ли у вас вывод в файл output.txt или нет.

Следуйте той же процедуре с файлами Main.java и main.py. Расширение Code Runner возьмет на себя выполнение каждого из них.

Я надеюсь, что эта статья помогла вам настроить Visual Studio Code. Счастливого программирования!

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

Настраиваем отладку клиентского кода на уровне редактора. Альтернативный подход к запуску npm-скриптов, который предоставляет VSCode вместо обычного ввода команд в терминал. Общая информация по сниппетам и описание процесса работы с ними в VSCode. Встроенные возможности автосаджеста и способы увеличения отдачи редактора по написанному вами коду. Добавление поддержки линтеров на уровне редактора и форматирование кода. Использование новомодной технологии от Microsoft для шаринга кода. Использование возможностей VSCode для упрощения управления версиями подключаемых библиотек. Улучшение внешнего стиля редактора через применение кастомных цветовых / иконочных тем и шрифта. Правим распознавание редактором файлов экзотических расширений. Несколько полезных плагинов, не попавших под остальные категории.

Процесс отладки клиентской части с расширением Debugger for Chrome

Из коробки VSCode позволяет отлаживать Node.js. Как фронтенд-разработчика, меня всё же интересует отладка клиентских скриптов. Обычно это делается указанием точек останова через debugger и обращение к инструментам разработчика в Chrome. Однако VSCode позволяет управлять процессом отладки клиентского кода прямо из редактора по аналогии с отладкой Ноды. Реализуется это через расширение, которое мы сейчас рассмотрим.

Debugger for Chrome

Подх о д к отладке через данное расширение сводит к минимуму переключение контекста, что способствует общему повышению производительности. Более того подобный подход стимулирует людей, привыкших к отладке через вывод логов в консоль, наконец начать использовать полноценные средства отладки. Для тех же, кто ставит debugger внутри кода или брейкпоинты в Chrome Devtools, предоставляет более комфортные условия для работы. Раньше в простых случаях хотелось просто написать console.log(), теперь же такого желания нет, т.к. щёлкнуть по полю и нажать F5 будет даже быстрее.

Чтобы отладка работала, на проекте должны быть определены sourcemaps и корректно работать, т.к. отладчик использует их для навигации по исходному коду. На старых рабочих проектах с gulp-file-include, например, заставить работать отладку мне не удалось. На новом проекте Webpack с ES-модулями и прописанными соурсмапами, всё работает идеально. Если это условие соблюдено, то единственное, что нужно здесь сделать — это прописать корректный конфиг отладки. Сделав это один раз под проект, к нему уже не придётся возвращаться.

Конфигурации запуска бывают 2-х видов: launch и attach. Разница в том, что launch запускает Chrome, а attach привязывается к уже запущенному процессу. В целом, при работе с Webpack attach звучит лучше, однако для этого нужно изначально открывать браузер с флагом --remote-debugging-port, что возможно только через консоль, но это максимально неудобно. Так что я остановился на варианте с launch — при запуске дебага открывается отдельное окно для отладки — небольшой tradeoff, т.к. хотелось бы всё делать в одном окне, но всё же удобнее, чем запускать Chrome из консоли.

Конфигурации можно задавать как на уровне проектов (.vscode > launch.json), так и глобально в настройках. Практика показывает, что удобнее задавать их на уровне отдельных проектов, т.к. в каждом проекте могут быть свои особенности. Допустим, где-то удобнее поменять корневую директорию, где-то прописать специфические файлы в blacklist и т.д. Хотя ничто не мешает иметь нейтральный глобальный конфиг, который будет переопределяться по необходимости.

Для отладки предоставлена отдельная вкладка Debug панели управления. Из неё же можно перейти к файлу конфигурации при необходимости. При первом запуске отладки (F5) этот конфиг создастся сам и откроется на редактирование — нужно только выбрать Chrome в появившемся меню (этот вариант как раз и добавляет плагин). Конфигурация очень простая: в поле url нужно указать порт, на котором у вас запускается проект, а в поле webRoot адрес рабочей директории. В моём случае:

Переменная workspaceFolder — это абсолютный путь до корневой директории вашего проекта (та, где лежит папка .vscode).

Также расширение поддерживает blackboxing, как и оригинальные Chrome Devtools, т.е. исключение ненужных файлов/директорий, чтобы при отладке перемещаться только по своему коду, а не проваливаться постоянно в скрипты внешних библиотек. Делается это через указание массива skipFiles в настройках. Здесь нужно поиграться, т.к. путь до файлов зависит от того, как на вашем проекте настроены соурсмапы.

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

Список определённых на уровне package.json yarn скриптов и их автоматическое определение на уровне VSCode

VSCode поддерживает исполнение тасков через палитру команд. В качестве тасков могут идти, например, npm скрипты или gulp таски. VSCode автоматически определяет такие команды и предоставляет их список при выполнении команды Tasks: Run Task. После выбора таска из списка в первый раз информация по нему пропишется в tasks.json в вашей директории .vscode, в следующий раз же будет запускаться сразу. Запущенному таску выделяется отдельный терминал, который открывается после запуска, а список запущенных тасков отображается в нижнем баре. По нажатию на кнопку выведется список тасков, выбор таска перекинет на соответствующий терминал. Здесь можно прекратить выполнение нажатием Ctrl + C.

Лично я пользуюсь yarn скриптами, что по сути те же npm скрипты — VSCode их так и определяет. В package.json в поле script у меня прописан набор тасков, после чего в консоли я просто пишу, например, yarn dev и выполняется development сборка (через npm писалось бы npm run dev).

Используя механизм тасков из VSCode я могу сделать то же самое через палитру команд. По сути это просто модная альтернатива: открыть палитру команд, далее Run Task и выбрать npm:dev не быстрее, чем открыть консоль и прописать yarn dev. К тому же терминал всё равно открывается после выполнения команды через механизм тасков, так что места мы здесь не выигрываем. Другое дело, если бы терминал не открывался, а команда исполнялась в фоне — тогда бы экономилась одна консоль под watch, и не нужно было бы делить терминал надвое.

Однако таски имеют одно преимущество над обычным запуском (помимо пафосности) — их можно привязывать к горячим клавишам. Так можно определить основной build и test таски через соответствующие команды и запускать build-таск через Ctrl + Shift + B, а для теста придётся привязать свою комбинацию, по умолчанию её нет. Но что если у меня не только build и test? Как видно из списка скриптов на скриншоте, я, как минимум, широко использую команду для development-сборки, команду для production-сборки, запуск статического сервера для тестирования production-сборки и запуск анализатора. Не проблема, т.к. VSCode позволяет привязать к каждому таску свою комбинацию.

Чтобы этого добиться, нужно в tasks.json дать имена таскам, которым мы собираемся присвоить шорткаты. Делается это через поле label. Например, таск yarn dev в tasks.json будет выглядеть следующим образом (group здесь добавлен, т.к. этот таск сделан основным build таском):

Далее переходим в keybindings.json (Preferences: Open Keyboard Shortcuts File) и добавляем в список пользовательских команд новую по типу:

Здесь значение args совпадает со значением label вашего таска. В качестве комбинаций я решил выбрать Ctrl + K с последующей F-клавишей. Так эти 4 основных таска распределены у меня по клавишам F1-F4. Только нужно проследить за тем, что клавиша после Ctrl + K сама по себе не является шорткатом. По этой причине пришлось отвязать F1.

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

Немного о сниппетах, о том, как с ними работать в VSCode. Для тех, кто никогда не пользовался сниппетами, пару слов пояснения. Сниппеты — это фрагменты кода, спрятанные за кодовым словом. При вводе этого слова и нажатии Tab или Enter ассоциированный с ним код раскрывается, и кроме того предоставляется набор позиций для курсора, по которым мы можем пройти по Tab, пока не окажемся на конечной позиции — так называемые табстопы (tab stops). Система сниппетов есть в любом уважающем себя редакторе, есть она и в VSCode, так что остаётся понять как ей здесь пользоваться.

При написании кода сниппеты будут предлагаться в автосаджесте. Как пример, for: начинаем вводить “for” — видим сниппет в списке, нажимаем Tab или Enter, после чего код разворачивается и располагает курсоры на всех вхождениях индексов, чтобы мы задали им имя (при этом там уже есть предустановленное значение — плейсхолдер). Tab и мы на вхождениях имени массива, Tab и мы на имени переменной элемента внутри цикла, Tab и мы внутри цикла продолжаем писать код. Ни одного переключения на мышь за весь процесс, никаких повторений засчёт множественного выделения, никаких повторений статичных частей конструкций из раза в раз.

Сниппеты делятся на глобальные и локальные для отдельных типов файлов. Из коробки VSCode предоставляет небольшой перечень сниппетов для js, покрывающий основные типовые команды. Чтобы наглядно посмотреть список доступных сниппетов, введите в палитре команд Insert Snippet. Также если вы собираетесь активно ими пользоваться, будет полезно поставить эту команду на горячую клавишу. Обращаю внимание, что это локальные сниппеты только для js, так что вы не увидите их при написании разметки или стилей.

Из встроенного набора могут быть особенно полезны log для вывода лога, сниппеты для циклов (for, foreach, forin), switch, settimeout. Не сказать, что я пользуюсь forin, но обращаю на него здесь внимание, из-за интересного момента, что он сразу идёт с обёрткой в hasOwnProperty. switch я использую редко, поэтому раньше всегда проверял как он пишется — теперь никуда лезть не нужно.

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

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

Набор сниппетов можно расширять добавлением готовых пакетов сниппетов на маркетплейсе и прописыванием своих. На данный момент я не пользуюсь готовыми решениями, но может вы найдёте для себя подходящие. Для ES6 например очень популярен этот пакет. Также популярны паки для основных фреймворков. Когда наконец переберусь на React, опробую их в деле 👍

Написать свой сниппет несложно и делается это вызовом команды Preferences: Configure User Snippets, которая также доступна через кнопку настроек в нижнем левом углу редактора (иконка шестерёнки). После вызова выбираете язык, для которого предназначается этот сниппет — откроется JSON-файл, куда вы прописываете свои сниппеты. Каждый сниппет — это объект с 3 свойствами: prefix, body и description. prefix — команда, триггерящая ваш сниппет, body — непосредственно код сниппета и description — описание в автосаджесте. Внутри body для табстопов используются символы с долларами вроде $1, для последнего используется $0. Плейсхолдер указывается следующим образом: $ . В общем-то это всё, что вам нужно. Например так выглядит мой сниппет для PostCSS, вставляющий свойство с calc из размера единицы сетки:

Как видите, всё предельно просто. Привыкните оформлять утомляющие вас фрагменты кода, повторяемые из раза в раз, в виде сниппетов, и жизнь станет проще.

Читайте также: