Visual Studio Code: установка, настройка, русификация и работа в VS Code

В этой статье поговорим об одном из самых популярных редакторов кода — Visual Studio Code.

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

Visual Studio Code: что это такое

Visual Studio Code — это бесплатный редактор исходного кода, разработанный для трех операционных систем: Windows, Linux и macOS. Редактор подходит для кросс-платформенной разработки и содержит в себе множество функций, облегчающих процесс написания кода. Это, например, поддержка большинства популярных языков программирования, инструменты для работы с Git, возможности для кастомизации и форматирования, дебаггер и многое другое.

Установка VS Code

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

1. Перейти на официальный сайт Visual Studio Code.
2. Выбрать свою операционную систему и нажать кнопку «Download».
3. После завершения скачивания открыть установочный файл и следовать инструкциям мастера установки.

Дальше можно запустить программу и начать работу.

Как в Visual Studio Code поменять язык на русский

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

1. Запустить редактор.
2. Открыть палитру команд сочетанием Ctrl + Shift + P для Windows и Linux или Cmd + Shift + P для macOS.
3. Ввести команду Configure Display Language и кликнуть на нее.
4. В появившемся списке выбрать «Русский».
5. Перезапустить редактор, после чего интерфейс программы станет русскоязычным.

Настройка VS Code

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

Для изменения параметров необходимо:

1. Открыть палитру команд сочетанием клавиш Ctrl + Shift + P/Cmd + Shift + P.
2. Ввести команду Preferences: Open Settings сочетанием Ctrl + /Cmd +.
3. Отредактировать глобальные пользовательские настройки и настройки рабочей области.
4. Проверить изменения, введя в поисковой строке параметров команду @modified.

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

Алгоритм изменения настроек через settings.json:

1. Открыть палитру команд.
2. Ввести команду Preferences: Open User Settings (JSON).
3. В открывшемся окне записать нужные изменения в формате идентификатор: значение.
4. Сохранить изменения, после чего настройки будут применены.

Примеры изменения параметров через settings.json: все записи вносятся внутри {}:

// Создание вертикальной линии ограничения строки 
"editor.rulers": [80]


// Автоматическое сохранение файлов
"files.autoSave": "afterDelay"


// Время задержки в мс.
"files.autoSaveDelay": 1000


// Автоматическое форматирование при вставке из буфера обмена
"editor.formatOnPaste": true

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

Для включения синхронизации настроек в палитре команд нужно ввести команду Settings Sync: Turn On. Она даст возможность выбрать тип синхронизации: параметры, состояние интерфейса и прочее. После нужно войти в учетную запись, чтобы начать резервное копирование и синхронизацию.

Интерфейс редактора

Рассмотрим пять основных областей интерфейса программы:

1. Панель активности — располагается в левой части экрана, содержит следующие инструменты:
2. Проводник — Ctrl + Shift + E: отображает файловую структуру и позволяет управлять папками.
3. Поиск — Ctrl + Shift + F: позволяет искать и заменять текст как по всему проекту, так и в отдельных файлах.
4. Система управления версиями — Ctrl + Shift + G: обеспечивает интеграцию с Git, позволяет отслеживать изменения и управлять ветками.
5. Запуск отладки — Ctrl + Shift + D.
6. Доступ к библиотеке расширений — Ctrl + Shift + X.
7. Редактор — главная область интерфейса, располагается по центру и позволяет писать код. Можно открыть несколько окон, нажав на иконку разбиения содержимого окна в правом верхнем углу редактора.
8. Мини-карта — находится в правой части и представляет из себя уменьшенную версию текущего окна в редакторе. Полезна для перемещения по длинным файлам.
9. Панель под редактором содержит встроенный терминал, отображает проблемы, выходные данные и информацию об отладке.
10. Нижняя панель — Status Bar: предоставляет информацию о предупреждениях и ошибках, текущем языке программирования и подключенных плагинах.

Кастомизация

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

1. Изменение темы — VS Code поддерживает разные виды светлых и темных оформлений. Для того чтобы выбрать и установить подходящую, нужно предпринять следующие шаги:
2. Открыть палитру команд сочетанием клавиш Ctrl + Shift + P/Cmd + Shift + P.
3. Ввести команду Preferences: Color Theme.
4. Выбрать из списка нужную тему.
5. Еще список можно открыть последовательным нажатием Ctrl + K и Ctrl + T.
6. Скачивание пользовательских тем — редактор позволяет установить различные вариант оформления из списка расширений, для этого нужно:
7. Открыть панель расширений сочетанием клавиш Ctrl + Shift + X/Cmd + Shift + X.
8. В поисковой строке ввести @category:"themes" и выполнить установку нужного оформления.
9. Изменить тему по инструкции выше.

Кастомизацию можно осуществить и через команду settings.json.

Плагины для Visual Studio Code

Расширения и плагины позволяют расширить функциональность редактора. Более того, для написания кода на определенных языках программирования плагины будут попросту необходимы. Разберемся, как искать и устанавливать плагины:

1. Открыть панель расширений сочетанием клавиш Ctrl + Shift + X/Cmd + Shift + X или нажать на значок расширений на боковой панели.
2. В поисковой строке ввести название нужного плагина и скачать его.
3. Для управления плагинами можно пользоваться вкладкой «Установленные» в панели расширений.

Рассмотрим некоторые популярные плагины:

• самый популярный плагин для форматирования кода — Prettier. Он поддерживает большую часть известных языков программирования. Его основная функция — автоформатирование кода;
• полезный инструмент для разработчиков на JavaScript — ESLint. Это анализатор кода, который позволяет искать и исправлять синтаксические ошибки и нестандартный код. Его также можно настроить под определенный проект, указав необходимые требования;

• плагин для работы с Git — GitLens. Позволяет отслеживать историю изменений в Git, осуществлять поиск по автору коммита, описанию и прочее;
• плагины, поддерживающие языки программирования — Python, C/C++, Java Extension Pack, PHP Intelephense и другие. Они обеспечивают автодополнение, форматирование, подсветку синтаксиса и отладку кода. Помимо этого, есть и дополнительные плагины со своим набором функций.
• интересный плагин, разработанный GitHub и OpenAI, — GitHub Copilot. Этот плагин использует ИИ для помощи в разработке. Он способен генерировать код на основе комментариев и предлагать варианты автодополнения, исходя из контекста. Он не сделает проект за программиста, но позволит значительно ускорить работу.

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

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

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

• Ctrl + P/Cmd + P — поиск файла по имени;
• Ctrl + O/Cmd + O — открыть файл;
• Ctrl + N/Cmd + N — создать новый файл;
• Ctrl + S/Cmd + S — сохранить;
• Ctrl + /Cmd + — сделать выделенный текст комментарием;
• Ctrl + Shift + T/Cmd + Shift + T — открыть последнюю закрытую вкладку;
• Ctrl + Shift + N/Cmd + Shift + N — открыть новое окно.

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

1. Открыть палитру команд сочетанием клавиш Ctrl + Shift + P/Cmd + Shift + P.
2. Ввести команду Preferences: Open Keyboard Shortcuts, здесь можно посмотреть весь список горячих клавиш.
3. Найти в появившемся списке нужную команду и нажать на значок карандаша слева от нее.
4. Ввести новое сочетание для этой команды.

Преимущества и недостатки VSC

В заключение мы рассмотрим основные достоинства и недостатки редактора.

Начнем с плюсов:

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

Минусы программы:

• при большом количестве расширений и открытых вкладок может потреблять значительное количество ресурсов. На слабых ПК это приводит к замедлению работы;
• малое количество встроенных функций в сравнении с популярными IDE (например, Visual Studio или IntelliJ IDEA) — интегрированными средами разработки.