Developer Tools

VS Code

VS Code

Профессиональная работа и настройка для удобства


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

Источники

Сочетания клавиш, имена настроек и ID расширений приведены по справочным данным автора и могут отличаться в новых версиях: проверяйте их в Settings UI и Marketplace.


Все статьи