Знакомство с Visual Studio Code
Visual Studio Code или коротко VS Code это очень хороший и популярный редактор кода от компании Microsoft, который можно скачать с официального сайта. Он доступен для Windows, macOS и Linux и является бесплатным с открытым исходным кодом, любой разработчик, имеющий аккаунта на GitHub может внести свой вклад в развитие данного приложения.
Я уже достаточно давно использую VS Code для создания веб сайтов. Мне нравится, что это очень легкий, но в то же время, очень мощный редактор с огромным количеством расширений. Благодаря огромному количеству настроек, его можно легко настроить «под себя». Я использую этот редактор для верстки веб страниц (HTML / CSS / SCSS) и программирования на JavaScript. Что не маловажно, у него встроенная поддержка JavaScript и Node.js.
В этой статье я бы хотел познакомить вас с Visual Studio Code и возможно убедить начать его использовать в своей работе. Как я уже упоминал ранее его можно совершенно бесплатно скачать с официального сайта установить и начать работу. Думаю, не стоит описывать процесс установки, предполагаю, что вы это прекрасно знаете.
Итак, вы скачали и установили. Познакомимся с интерфейсом.
Страница приветствия
После запуска VS Code мы видим окно приветствия. Оно содержит быстрый доступ к некоторым функциям и очень полезные ссылки.
В секции Start вы можете создать новый файл, открыть папку или создать рабочую папку.
Секция Recent содержит быстрые ссылки на файлы и папки, с которыми вы работали ранее.
В Help вы найдете полезные ссылки на справочную и обучающую информацию. Например, тут вы можете найти горячие клавиши VS Code, или полезные советы по ускорению работы.
Если вы до этого работали в другом редакторе и привыкли к нему, то в секции Customize, вы сможете настроить цветовую схему и комбинации клавиш, от вашего старого редактора, чтобы переход к VS Code был максимально простым и комфортным. В этой же секции, вы сможете добавить поддержку вашего языка программирования и установить необходимые для работы инструменты.
Последняя секция на странице приветствия, это Learn. Тут вы имеете быстрый доступ к командам, справку по главным элементам интерфейса, а также, на мой взгляд самое интересное, это песочницу, где вы можете попробовать в действие главные возможности редактора.
Элементы интерфейса
Как и у большинства программ вверху Visual Studio Code располагается главное меню, содержащее основные функции и команды программы.
Слева вертикально расположились:
- Эксплорер, который содержит файлы и папки вашего проекта;
- Панель поиска, где вы можете вести поиск по вашим файлам;
- Встроенная система контроля версий, которая поможет мониторить изменения;
- Панель отладки, где вы можете запускать скрипты и отлавливать баги;
- Панель с расширениями, которая поможет найти и быстро установить недостающий функционал.
Вверху, выпадающий список с полем поиска – это панель команд, которая содержит все возможные команды для выполнения в редакторе. По умолчанию она закрыта и открывается с помощью комбинации клавиш Ctrl+Shift+P (для Windows).
Под палитрой команд находится основное поле для редактирования, где и происходит вся магия.
Чуть ниже расположились встроенный терминал, вместе с консолями отладки, вывода и проблем. По умолчанию они закрыты. Быстро закрыть/открыть их можно с помощью комбинации клавиш Ctrl+`.
В самом низу расположился Статус бар. Слева он показывает количество ошибок и предупреждений, справа – некоторую информацию о текущем документе.
Это были главные элементы интерфейса VS Code. Конечно, я их описал весьма поверхностно, но, пожалуй, если детально все описать, то выйдет целая книга. Надеюсь, я хотя бы слегка вас заинтересовал и подтолкнул попробовать его в действии.