Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>25 окт 2023</li>

3 <li>0</li>

4 </ul>Всё, что нужно знать о самом популярном редакторе кода от Microsoft.

5 Иллюстрация: Image by Freepik / Freepik / Rawpixel / Annie для Skillbox Media

6 Автор статей о программировании, технологиях и гаджетах. Пишет код на JavaScript и Python. Любит веб-технологии, модные приложения и магию Apple.

7 В этой статье мы расскажем, как установить Visual Studio Code (VS Code) и настроить его для комфортной работы. А также подробно рассмотрим графический интерфейс и приведём список незаменимых горячих клавиш.

8 Содержание

9 <ul><li><a>Что такое Visual Studio Code</a></li>

10 <li><a>Где скачать и как установить редактор кода</a></li>

11 <li><a>Русификация</a></li>

12 <li><a>Настройка</a></li>

13 <li><a>Интерфейс программы</a></li>

14 <li><a>Кастомизация</a></li>

15 <li><a>Плагины</a></li>

16 <li><a>Горячие клавиши</a></li>

17 <li><a>Полезные ссылки</a></li>

18 </ul>Visual Studio Code (VS Code) - это кросс-платформенный редактор кода от компании Microsoft, разработанный на базе фреймворка<a>Electron</a>. С его помощью можно разрабатывать кросс-платформенные десктопные приложения, используя веб-технологии.

19 Суперсила VS Code в том, что он не привязан к определённому языку программирования, поэтому с его помощью можно создавать сайты, мобильные приложения, работать с базами данных и тестировать сервисы. Огромная библиотека плагинов позволяет расширять функции редактора, а если не удастся найти подходящий плагин, то всегда можно<a>написать свой</a>.

20 Возможности VS Code:

21 <ul><li>Подсветка синтаксиса - функции, классы, переменные и другие сущности выделяются разными цветами.</li>

22 <li>Автоматическое дополнение - если начать что-то писать, редактор предложит варианты завершения строки.</li>

23 <li>Контроль версий - поддерживаются интеграции с <a>GitHub</a>,<a>GitLens</a>и другими похожими сервисами.</li>

24 <li>Отладка - редактор подсвечивает ошибки и предлагает исправления. Вместе с этим поддерживается и полноценный режим отладки кода. К примеру, для проекта на Python его можно<a>запустить</a>клавишейF5, а для JavaScript<a>запустится</a>новое окно браузера.</li>

25 <li>Рефакторинг - редактор кода выводит советы для улучшения кода и повышения производительности, подсказывая, какие конструкции можно заменить.</li>

26 </ul>Запускать VS Code можно даже на слабых компьютерах. Редактор<a>работает</a>на машинах с 1 ГБ оперативной памяти и процессором с частотой от 1,6 ГГц. Приятная особенность VS Code в том, что он абсолютно бесплатный.

27 VS Code - кросс-платформенный редактор. Его можно установить на Windows, macOS и Linux. Ещё есть веб-версия, в которой можно редактировать файлы, когда нет возможности запустить полноценное приложение.

28 Ниже описан порядок установки VS Code на разные операционные системы.

29 <ul><li>Скачать<a>установочный файл</a>.</li>

30 <li>Открыть папку с загрузками и найти скачанный архив.</li>

31 <li>Извлечь содержимое и запустить приложение.</li>

32 <li>Перетащить Visual Studio Code.app в папку Программы.</li>

33 <li>Теперь приложение можно запускать из меню приложений.</li>

34 </ul><ul><li>Скачать<a>установщик</a>.</li>

35 <li>Открыть загрузки и найти скачанный файл.</li>

36 <li>Запустить двойным кликом VSCodeUserSetup-{version}.exe.</li>

37 <li>По умолчанию приложение появится в папке Programs\Microsoft\VS Code.</li>

38 </ul><ul><li>Скачать<a>установщик</a>, подходящий к дистрибутиву.</li>

39 <li>Запустить файл и следовать инструкции.</li>

40 </ul>Веб-версия VS Code находится по адресу<a>vscode.dev</a>. С её помощью можно изменять локальные файлы с компьютера, открывать удалённые репозитории, устанавливать некоторые расширения и сохранять результат работы на диск компьютера. VS Code запускается даже в мобильных браузерах, но у смартфонов довольно маленькие экраны, поэтому работать на них неудобно.

41 Веб-версия VS CodeСкриншот: Visual Studio Code / Skillbox MediaУ веб-версии Visual Studio Code есть ряд ограничений. К примеру, вы не сможете воспользоваться терминалом и запустить программы на некоторых языках, среди которых Go и Rust.

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

43 <ul><li>Открыть палитру команд с помощью сочетания клавишCtrl+Shift+Pили⇧+⌘+Pна macOS.</li>

44 <li>Ввести команду Configure Display Language и нажатьEnter.</li>

45 <li>Найти в списке русский язык и выбрать его.</li>

46 <li>Перезапустить приложение.</li>

47 </ul>Пакет русификации надо загружать отдельноСкриншот: Visual Studio Code / Skillbox MediaПредупреждение!

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

49 Visual Studio Code можно полностью подстраивать под рабочие задачи, меняя как параметры самой программы, так и установленные плагины. Меню со всеми настройками можно найти в File → Preferences → Settings на Windows/Linux и в Code → Preferences → Settings на macOS.

50 Начинающим разработчикам и пользователям VS Code лучше не увлекаться изменением базовых параметров. Тем не менее есть несколько настроек, которые сделают работу на старте комфортнее.

51 Автоматическое сохранение.По умолчанию VS Code сохраняет изменения в файле только после нажатия сочетания клавишCtrl+S/⌘+S. Но можно сделать так, чтобы код автоматически сохранялся после определённых действий. Для этого надо перейти в меню настроек и в поле поиска ввести Auto Save.

52 По умолчанию параметр установлен в off, но есть и другие значения:

53 <ul><li>afterDelay - файл сохраняется после задержки в миллисекундах, которую можно установить ниже.</li>

54 <li>onfocusChange - сохранение происходит после переключения на другой файл.</li>

55 <li>onWindowChange - файл сохраняется при переходе в окно другой программы.</li>

56 </ul>Настройка автоматического сохранения в VS CodeСкриншот: Visual Studio Code / Skillbox MediaСемейство шрифта и кегль.Стандартный шрифт очень мелкий, что сильно нагружает глаза при долгой работе с кодом. Поэтому лучше сразу подобрать оптимальные настройки. Сделать это можно в разделе "Шрифт". Параметр Font Family отвечает за семейство шрифта, а Font Size - за его размер. На широкоформатных мониторах лучше выбирать шрифт побольше.

57 Можно выбрать комфортный шрифт и его размерСкриншот: Visual Studio Code / Skillbox MediaФорматирование.Структуры в программном коде разделяются пробелами и отступами для более удобного чтения. Но если скопировать фрагмент кода и вставить его, то все отступы могут съехать. По умолчанию VS Code выравнивает их, только если нажать сочетание клавишShift+Alt+F/⇧+⌥+F. Но можно автоматизировать это.

58 Для этого в настройках переходим к разделу "Форматирование" и выбираем подходящий режим работы:

59 <ul><li>Format On Paste - форматирование применяется автоматически при вставке кода.</li>

60 <li>Format On Save - код форматируется во время сохранения.</li>

61 <li>Format On Type - форматирование применяется при наборе кода.</li>

62 </ul>Автоматическое форматирование в VS Code по умолчанию отключеноСкриншот: Visual Studio Code / Skillbox MediaИнтерфейс программы состоит из нескольких основных частей: окно редактора, карты кода, вкладок, статус-бара и иконок управления. Доступ к остальным функциям можно получить через настройки или системное меню VS Code.

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

64 Окну редактора по умолчанию выделяется самая большая областьСкриншот: Visual Studio Code / Skillbox MediaСправа от редактора - окно с развёрнутой миниатюрой документа. Если в файле много строк, то с помощью него можно быстро перейти к необходимой части и не скроллить весь код.

65 Миниатюра документа полезна для навигацииСкриншот: Visual Studio Code / Skillbox MediaВверху расположены вкладки открытых файлов и окон. С их помощью можно быстро переключаться между несколькими открытыми документами.

66 Вкладки как в браузере, только ведут к открытым файламСкриншот: Visual Studio Code / Skillbox MediaВнизу находится статус-бар с дополнительной информацией о документе: какой язык используется, количество ошибок, имя активной Git-ветки, кодировка и статус работы некоторых плагинов (например,<a>Live Server</a>).

67 Статус-бар с полезной информацией о проектеСкриншот: Visual Studio Code / Skillbox MediaСлева от редактора находится окно инструментов со следующими разделами и функциями:

68 <ul><li>Проводник - выводит все папки и файлы проекта. Их можно открывать двойным кликом.</li>

69 <li>Поиск - позволяет искать все вхождения слова в файле. С его помощью можно найти строки исходника, в которых используется переменная или функция.</li>

70 <li>Git и GitHub - тут можно отслеживать историю изменений, переключаться между ветками Git и синхронизировать обновления проекта с удалённым репозиторием.</li>

71 <li>Запуск кода - VS Code позволяет запускать код, как в профессиональной IDE. Для каждого языка необходимо настроить параметры запуска.</li>

72 <li>Расширения - это большой магазин плагинов, тем и языковых пакетов. В нём можно управлять установленными расширениями и искать новые.</li>

73 <li>Тестирование - в этом окне удобно запускать тесты и подключать фреймворки для тестирования.</li>

74 </ul>Ниже могут быть и другие иконки, их наличие зависит от установленных плагинов. К примеру, с помощью PlatformIO можно управлять инструментами для разработки под микроконтроллеры, а если через плагин Docker - контейнерами.

75 Справа от иконок есть поле, в которое выводятся элементы управления выбранным инструментом. Если выбрать "Проводник", то в окне появится список файлов.

76 Панель инструментов в VS CodeСкриншот: Visual Studio Code / Skillbox MediaПользователи Visual Studio Code могут менять оформление интерфейса с помощью сторонних цветовых схем. Вот как установить новую тему:

77 <ul><li>Перейти в меню Расширения.</li>

78 <li>Кликнуть на иконку фильтрации и выбрать Категория → Темы.</li>

79 <li>В открывшемся списке можно выбрать и установить понравившееся оформление.</li>

80 </ul>Список всех доступных тем можно посмотреть в маркетплейсеСкриншот: Visual Studio Code / Skillbox MediaКак изменить тему в VS Code:

81 <ul><li>Перейти в палитру команд (Ctrl+Shift+Pна Windows/Linux или⇧+⌘+Pна macOS).</li>

82 <li>Ввести команду Color Theme.</li>

83 </ul>С помощью стрелок выбрать в списке нужную тему и нажатьEnter.

84 VS Code - своеобразный швейцарский нож для разработчиков, возможности которого можно расширять с помощью плагинов. Часть из них выпускает Microsoft, но есть решения и от сторонних разработчиков.

85 Все плагины можно условно разделить на полезные и забавные. Первые помогают добавить в VS Code новые функции и поддержку дополнительных языков программирования. Так, для Python есть<a>одноимённый плагин</a>, который содержит линтеры, инструменты рефакторинга и правила подсветки синтаксиса. А если установить<a>GitHub Copilot</a>, то у вас появится собственный ИИ-помощник.

86 Вторая группа плагинов просто добавляет в VS Code что-то весёлое или милое. К примеру,<a>VS Code Pets</a>позволяет завести в пиксельного питомца прямо в окне редактора, а <a>Power Mode</a>отображает рядом с курсором фейерверк, если долго печатать без остановки. Больше таких плагинов можно найти в специальном<a>маркетплейсе</a>.

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

88 Полный список сочетаний клавиш для быстрого доступа к функциям можно узнать в File → Preferences → Keyboard Shortcuts на Windows/Linux или в Code → Preferences → Keyboard Shortcuts на macOS. В этом же окне можно настроить собственные горячие клавиши или переназначить базовые.

89 Некоторые полезные сочетания, которые разработчики часто используют:

90 Ctrl+S/⌘+SСохранитьCtrl+O/⌘+OОткрыть файлCtrl+N/⌘+NСоздать новый файлCtrl+P/⌘+PПерейти к файлу по названиюCtrl+//⌘+/Закомментировать выделениеCtrl+F/⌘+FПоиск в файле по словуCtrl+Shift+N/⌘+⇧+NОткрыть новое окноCtrl+Shift+P/⌘+⇧+PОткрыть палитру командCtrl+Shift+S/⌘+⇧+SСохранить как<ul><li><a>Официальная документация Visual Studio Code</a></li>

91 <li><a>Магазин расширений</a></li>

92 <li><a>Магазин тем</a></li>

93 <li><a>Руководство по разработке и публикации собственной темы</a></li>

94 <li><a>Видео о настройке VS Code для продуктивной работы от freeCodeCamp</a></li>

95 <li>Таблицы со всеми горячими клавишами для<a>Windows</a>,<a>macOS</a>и <a>Linux</a></li>

96 <li><a>Урок по созданию своего расширения с помощью JavaScript</a></li>

97 </ul><a>Курс с трудоустройством: "Веб-разработчик" Узнать о курсе</a>