VS Code: профессиональная работа и настройка для удобства
23.10.2026
VS Code превращается в рабочий инструмент профессионала за три шага: освоить клавиатуру, зафиксировать настройки в settings.json и подключить небольшой проверенный набор расширений.
Интерфейс: пять зон и палитра команд
Окно VS Code состоит из пяти зон, и почти всё остальное — вариации на их тему.
| Зона | Назначение | Показать или скрыть |
|---|---|---|
| Activity Bar | Переключение между проводником, поиском, Git, отладкой и расширениями | Правый клик по панели |
| Side Bar | Содержимое выбранного раздела | Ctrl+B |
| Editor | Файлы, разделение на группы | Ctrl+\ — разделить |
| Panel | Терминал, проблемы, вывод, консоль отладки | Ctrl+J |
| Status Bar | Ветка Git, язык, кодировка, отступы, число ошибок | Клик по элементу |
Главный инструмент — Command Palette: Ctrl+Shift+P (на macOS Cmd+Shift+P). Это адресная строка браузера для редактора: вы не ищете кнопку в меню, а называете действие. Рядом с каждой командой показано её сочетание клавиш, так что палитра заодно учит горячим клавишам.
Ctrl+P открывает быстрый переход к файлу по части имени. Префиксы превращают его в другие инструменты: > — команды, @ — символы текущего файла, # — символы проекта, : — номер строки.
Горячие клавиши: основной выигрыш в скорости
Десять-пятнадцать сочетаний закрывают большую часть повседневной работы; остальные подтягиваются через палитру команд.
| Действие | Windows / Linux | macOS |
|---|---|---|
| Палитра команд | Ctrl+Shift+P | Cmd+Shift+P |
| Переход к файлу | Ctrl+P | Cmd+P |
| Поиск по проекту | Ctrl+Shift+F | Cmd+Shift+F |
| Символы текущего файла | Ctrl+Shift+O | Cmd+Shift+O |
| К определению | F12 | F12 |
| Все ссылки на символ | Shift+F12 | Shift+F12 |
| Переименовать символ везде | F2 | F2 |
| Быстрое исправление | Ctrl+. | Cmd+. |
| Следующее вхождение выделенного | Ctrl+D | Cmd+D |
| Выделить все вхождения | Ctrl+Shift+L | Cmd+Shift+L |
| Дополнительный курсор | Alt+клик | Option+клик |
| Переместить строку | Alt+↑ / ↓ | Option+↑ / ↓ |
| Дублировать строку | Shift+Alt+↑ / ↓ | Shift+Option+↑ / ↓ |
| Удалить строку | Ctrl+Shift+K | Cmd+Shift+K |
| Закомментировать | Ctrl+/ | Cmd+/ |
| Форматировать документ | Shift+Alt+F | Shift+Option+F |
| Терминал | Ctrl+` | Ctrl+` |
|
| Режим дзен | Ctrl+K Z | Cmd+K Z |
| Настройки | Ctrl+, | Cmd+, |
| Переназначить клавиши | Ctrl+K Ctrl+S | Cmd+K Cmd+S |
Три приёма окупаются сразу. Ctrl+D заменяет ручную правку одинаковых имён. F2 заменяет поиск с заменой при переименовании переменной или функции. Ctrl+P с префиксом @ заменяет прокрутку длинного файла.
На некоторых Linux-окружениях Alt+клик перехватывает оконный менеджер. Тогда переключите модификатор: "editor.multiCursorModifier": "ctrlCmd" — дополнительные курсоры будут ставиться по Ctrl+клик.
Как устроены настройки
Настройки работают как каскад стилей CSS: общее правило пользователя перекрывается правилом проекта, а оно — правилом для конкретного языка.
| Уровень | Где хранится | Что туда класть |
|---|---|---|
| User | Windows: %APPDATA%\Code\User\settings.json; macOS: ~/Library/Application Support/Code/User/settings.json; Linux: ~/.config/Code/User/settings.json |
Шрифт, тема, поведение курсора, личные предпочтения |
| Workspace | .vscode/settings.json в корне проекта |
Форматтер, отступы, исключения из поиска — всё, что должно совпадать у всей команды |
| Язык | Блок "[python]": { … } в любом из файлов выше |
Отступ и форматтер для конкретного языка |
Настройки редактируются двумя способами. Ctrl+, открывает графический редактор с поиском — он удобен для знакомства. Команда Preferences: Open User Settings (JSON) открывает файл settings.json: его можно копировать, комментировать и хранить в репозитории. Файл написан в формате JSON с комментариями, поэтому // внутри него допустимы.
Правило разделения простое: личный вкус — в User, договорённости проекта — в .vscode/settings.json, и этот файл коммитится в репозиторий.
Базовый settings.json
Ниже — стартовый набор для веб-разработки. Скопируйте его в пользовательский settings.json и уберите лишнее.
{
// --- Редактор ---
"editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
"editor.fontSize": 14,
"editor.fontLigatures": true,
"editor.lineHeight": 1.6,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"editor.stickyScroll.enabled": true,
"editor.guides.bracketPairs": "active",
"editor.renderWhitespace": "boundary",
"editor.linkedEditing": true,
"editor.smoothScrolling": true,
"editor.rulers": [100],
// --- Сохранение и форматирование ---
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "explicit"
},
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
// --- Интерфейс ---
"workbench.startupEditor": "none",
"workbench.iconTheme": "material-icon-theme",
"explorer.compactFolders": false,
"breadcrumbs.enabled": true,
// --- Меньше шума, быстрее поиск ---
"files.exclude": { "**/.git": true, "**/.DS_Store": true },
"search.exclude": { "**/node_modules": true, "**/dist": true, "**/build": true },
"files.watcherExclude": { "**/node_modules/**": true, "**/.git/objects/**": true },
// --- Git и терминал ---
"git.autofetch": true,
"git.confirmSync": false,
"terminal.integrated.scrollback": 10000,
// --- Приватность ---
"telemetry.telemetryLevel": "off"
}
Комментарии к ключевым строкам:
editor.lineHeight: 1.6— значения меньше 8 трактуются как множитель размера шрифта, а не как пиксели.editor.linkedEditing— при переименовании открывающего HTML-тега закрывающий меняется синхронно.files.autoSave: onFocusChange— сохраняет файл при переходе в другое окно или вкладку. Форматирование при сохранении надёжно срабатывает при ручном сохранении и при этом режиме, но не приafterDelay.source.fixAll.eslintиeditor.defaultFormatterтребуют установленных расширений ESLint и Prettier — см. раздел о расширениях.workbench.iconThemeуказывает на тему иконок, которую нужно установить отдельно (Material Icon Theme).
Внешний вид: меньше шума, больше читаемости
Глаза устают раньше головы, поэтому внешний вид — это настройка продуктивности, а не украшательство.
- Тема. Выбирается через
Preferences: Color Theme(Ctrl+K Ctrl+T). Встроенные Dark Modern и Light Modern подходят для старта; из сторонних популярны One Dark Pro, GitHub Theme, Catppuccin и Tokyo Night. Главный критерий — контраст текста с фоном при вашем освещении. - Шрифт. Моноширинный, с лигатурами и чётким различием
0иO,1иl: JetBrains Mono, Fira Code, Cascadia Code. Размер 14–16 пунктов, межстрочный интервал 1.5–1.7. Если пишете на русском в комментариях, проверьте, что в шрифте есть кириллица. - Иконки. Material Icon Theme или vscode-icons: по значку файла тип узнаётся быстрее, чем по расширению.
- Шум. Выключите миникарту, оставьте хлебные крошки и закреплённые заголовки (sticky scroll): они показывают, в какой функции вы находитесь. Для сосредоточенной работы включайте режим дзен (Ctrl+K Z).
- Масштаб. Ctrl+= и Ctrl+- меняют масштаб всего окна; для показа с экрана добавьте команду
Developer: Toggle Screencast Mode— она выводит нажатые клавиши на экран. - Язык интерфейса. Расширение Russian Language Pack и команда
Configure Display Languageпереключают меню и сообщения на русский.
Расширения: минимум, который окупается
Начните с девяти расширений ниже и добавляйте остальные только под конкретную задачу.
| Расширение | ID в Marketplace | Зачем |
|---|---|---|
| Prettier | esbenp.prettier-vscode |
Единое автоформатирование |
| ESLint | dbaeumer.vscode-eslint |
Ошибки и антипаттерны в JS/TS |
| EditorConfig for VS Code | editorconfig.editorconfig |
Одинаковые отступы и переводы строк у всей команды |
| GitLens | eamodio.gitlens |
Автор и история строки, сравнение веток |
| Error Lens | usernamehw.errorlens |
Ошибки подсвечиваются прямо в строке |
| Path Intellisense | christian-kohler.path-intellisense |
Автодополнение путей к файлам |
| Code Spell Checker | streetsidesoftware.code-spell-checker |
Опечатки в идентификаторах и комментариях |
| Live Server | ritwickdey.liveserver |
Перезагрузка страницы при сохранении |
| Material Icon Theme | pkief.material-icon-theme |
Иконки файлов и папок |
По задаче: Python — ms-python.python; контейнеры — Docker (ms-azuretools.vscode-docker) и Dev Containers (ms-vscode-remote.remote-containers); работа на сервере по SSH — Remote - SSH (ms-vscode-remote.remote-ssh).
Правила отбора:
- Смотрите на издателя, число установок и дату последнего обновления. Расширение выполняет код с вашими правами, поэтому проверка издателя — вопрос безопасности.
- Отключайте и удаляйте то, чем не пользуетесь: каждое расширение потенциально замедляет запуск.
- Группируйте расширения по профилям (см. ниже), а не держите всё сразу.
Для командной работы добавьте в проект файл .vscode/extensions.json: при открытии папки VS Code предложит установить перечисленные расширения.
{
"recommendations": [
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"editorconfig.editorconfig"
]
}
Форматирование и линтинг
Prettier и ESLint решают разные задачи: Prettier — корректор, расставляющий пробелы и переносы, ESLint — редактор смысла, находящий ошибки и опасные конструкции. Не заставляйте один инструмент делать работу другого.
Правила хранятся в файлах проекта, а не в личных настройках, поэтому результат одинаков у всей команды. Если в проекте есть .prettierrc, Prettier берёт параметры оттуда, а не из настроек редактора.
Файл .prettierrc:
{
"singleQuote": true,
"semi": true,
"printWidth": 100,
"trailingComma": "all"
}
Файл .editorconfig задаёт базовые правила, которые понимают почти все редакторы:
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
Если для языка нужен другой форматтер или отступ, задайте его блоком языка в settings.json:
{
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter",
"editor.tabSize": 4
}
}
При конфликте двух форматтеров VS Code спрашивает, какой использовать. Чтобы вопрос не повторялся, всегда указывайте editor.defaultFormatter явно.
Терминал, Git, отладка, задачи и сниппеты
Встроенные инструменты избавляют от переключения между окнами: код, команды, история и отладчик живут в одном месте.
Терминал
Ctrl+` (клавиша слева от цифры 1) показывает и скрывает панель терминала, Ctrl+Shift+` создаёт новый терминал. Оболочку по умолчанию задаёт настройка terminal.integrated.defaultProfile.windows (например, "Git Bash"); для macOS и Linux есть аналоги .osx и .linux. Shell integration помечает выполненные команды и позволяет переходить между ними сочетанием Ctrl+↑ / ↓.
Git
Панель Source Control открывается по Ctrl+Shift+G. В ней можно добавлять в индекс отдельные строки и блоки изменений, а не только файлы целиком, и просматривать построчный diff. Конфликты слияния разрешаются во встроенном редакторе слияния; представление Timeline показывает локальную историю файла. GitLens добавляет автора и историю прямо над строкой.
Отладка
F5 запускает отладку, F9 ставит точку останова, F10 — шаг через вызов, F11 — шаг внутрь, Shift+F11 — выход из функции. Правый клик по точке останова позволяет сделать её условной или превратить в logpoint — вывод в консоль без правки кода. Конфигурация запуска хранится в .vscode/launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Запуск app.js",
"program": "${workspaceFolder}/app.js"
}
]
}
Задачи
Повторяющиеся команды оформляются в .vscode/tasks.json и запускаются из палитры команд. Задача с группой test и признаком isDefault вызывается командой Tasks: Run Test Task:
{
"version": "2.0.0",
"tasks": [
{
"label": "test",
"type": "shell",
"command": "npm test",
"group": { "kind": "test", "isDefault": true }
}
]
}
Сниппеты
Команда Snippets: Configure Snippets открывает файл пользовательских шаблонов. Сниппет cl разворачивается в console.log с именем переменной, а курсор встаёт в нужные точки ($1, $0):
{
"Console log": {
"prefix": "cl",
"body": ["console.log('$1:', $1);", "$0"],
"description": "console.log с именем переменной"
}
}
Профили, Workspace Trust и Settings Sync
Эти три механизма отвечают на три вопроса: как держать разные конфигурации под разные задачи, как безопасно открывать чужой код и как не настраивать всё заново на каждом компьютере.
Профили
Профиль — это отдельный набор расширений, настроек, сочетаний клавиш, задач, сниппетов и состояния интерфейса. Создаётся через значок шестерёнки (Manage) → Profiles или командой Profiles: Create Profile. Разные папки можно открывать с разными профилями одновременно.
Типичные профили:
- Web — Prettier, ESLint, Live Server, Tailwind и другие расширения для фронтенда.
- Python — интерпретатор, Pylance, форматтер, отладчик.
- Демонстрация — крупный шрифт, минимум расширений, выключенные уведомления: ничего не отвлекает аудиторию.
Профиль можно экспортировать и отправить коллегам или студентам: получатель сможет просмотреть его в VS Code для веба и импортировать к себе.
Workspace Trust
Открытая папка может содержать задачи, конфигурации отладки и настройки, которые исполняют код. Поэтому VS Code при первом открытии спрашивает, доверяете ли вы автору. Без доверия включается Restricted Mode: выполнение задач, отладка и часть расширений и настроек отключены. Правило: незнакомые репозитории открывайте в ограниченном режиме, доверяйте только известным источникам. Баннер и стартовый запрос настраиваются параметрами security.workspace.trust.banner и security.workspace.trust.startupPrompt.
Settings Sync
Синхронизация переносит пользовательские настройки, сочетания клавиш, сниппеты, пользовательские задачи, расширения, состояние интерфейса и профили на другие устройства. Включается пунктом Backup and Sync Settings… в меню шестерёнки или меню учётной записи в левой нижней части окна. Там же выбирается, какие категории данных синхронизировать. Поддерживаются учётные записи Microsoft и GitHub. Расширения не синхронизируются в удалённые окна — SSH, контейнеры и WSL.
Производительность и типичные ошибки
Медленный редактор почти всегда вызван расширениями или огромными папками в наблюдении. Сначала диагностика, потом настройка.
Для диагностики есть три команды палитры. Help: Start Extension Bisect методом деления пополам находит расширение, которое вызывает проблему. Developer: Show Running Extensions показывает время активации каждого расширения. Open Process Explorer показывает, какие процессы потребляют память и процессор.
| Симптом | Вероятная причина | Что сделать |
|---|---|---|
| Форматирование не срабатывает при сохранении | Не задан editor.defaultFormatter или стоит автосохранение afterDelay |
Указать форматтер явно; использовать onFocusChange |
| Редактор тормозит на большом проекте | Папки node_modules и dist попадают в наблюдение и поиск |
Добавить их в files.watcherExclude и search.exclude |
| Окно долго запускается | Слишком много активных расширений | Extension Bisect; разнести расширения по профилям |
| У коллег другое форматирование | Правила лежат только в пользовательских настройках | Вынести в .vscode/settings.json, .prettierrc, .editorconfig |
| Alt+клик не ставит курсор (Linux) | Alt перехватывает оконный менеджер | "editor.multiCursorModifier": "ctrlCmd" |
| После смены настроек ничего не изменилось | Окно держит старое состояние | Developer: Reload Window |
Источники
- Visual Studio Code, January 2023 (version 1.75) — Profiles
- Visual Studio Code, June 2021 (version 1.58) — Workspace Trust
- Settings Sync — документация VS Code
Сочетания клавиш, имена настроек и ID расширений приведены по справочным данным автора и могут отличаться в новых версиях: проверяйте их в Settings UI и Marketplace.