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

Я уже достаточно давно использую VS Code для создания веб сайтов. Мне нравится, что это очень легкий, но в то же время, очень мощный редактор с огромным количеством расширений. Благодаря огромному количеству настроек, его можно легко настроить «под себя». Я использую этот редактор для верстки веб страниц (HTML / CSS / SCSS) и программирования на JavaScript. Что не маловажно, у него встроенная поддержка JavaScript и Node.js.

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

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

Страница приветствия

Visual Studio Code Welcome

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

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

Секция Recent содержит быстрые ссылки на файлы и папки, с которыми вы работали ранее.

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

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

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

Элементы интерфейса

Visual Studio Code Interface

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

Слева вертикально расположились:

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

Вверху, выпадающий список с полем поиска – это панель команд, которая содержит все возможные команды для выполнения в редакторе. По умолчанию она закрыта и открывается с помощью комбинации клавиш Ctrl+Shift+P (для Windows).

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

Чуть ниже расположились встроенный терминал, вместе с консолями отладки, вывода и проблем. По умолчанию они закрыты. Быстро закрыть/открыть их можно с помощью комбинации клавиш Ctrl+`.

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

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