VS Code — современная среда разработки

1. Что такое VS Code и зачем он нужен

VS Code — это редактор исходного кода от Microsoft на основе Chromium. В отличие от «тяжёлых» IDE вроде IntelliJ IDEA, он стартует за секунды, но умеет почти всё то же самое благодаря расширениям (extensions).

• подсветка синтаксиса для десятков языков «из коробки»;
• IntelliSense — автодополнение и подсказки по коду;
• встроенный терминал, отладчик и поддержка Git;
• настройка под себя: темы, сниппеты, горячие клавиши.

2. Установка и первый запуск

Скачай установщик с официального сайта code.visualstudio.com и установи как обычную программу. Полезные опции при установке:

• Add to PATH — запуск из терминала командой code .;
• Open with Code — пункт в контекстном меню Windows.

# Открыть текущую папку из терминала
code .
# Открыть конкретный файл
code index.html index.css
# Сравнить два файла
code --diff a.js b.js

После запуска VS Code предлагает открыть папку (Folder) или файл, а также показывает приветственный Welcome-экран.

3. Интерфейс: панели и расположение

Основные части окна:

Панели можно перетаскивать, скрывать и разделять редактор на группы: Ctrl + \ — вертикальное разделение.

4. Рабочее пространство (workspace) и файлы

Workspace — это папка (или несколько папок), с которой работает проект. Открой File → Open Folder. Слева появится дерево файлов:

• клик — открыть файл;
• двойной клик по имени вкладки — закрепить (pin);
• Ctrl + P — быстрый переход по имени файла;
• Ctrl + B — скрыть боковую панель (больше места для кода).

my-project/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
└── .vscode/          # настройки проекта (settings.json)

5. Умный редактор: IntelliSense

IntelliSense — автодополнение на основе языка и твоего кода. Начни печатать — появится список вариантов. Клавиши: Ctrl + Space вручную вызвать подсказку, Tab или Enter принять.

// печатаешь
document.addEvent
// VS Code предлагает
document.addEventListener(event, callback, options) // Enter

Полезные команды редактирования:

6. Палитра команд и горячие клавиши

Command Palette открывается клавишей Ctrl + Shift + P — это строка поиска по всем командам VS Code. Запомни эти команды:

Ctrl + Shift + P   # открыть палитру команд
> Format Document  # отформатировать файл
> Preferences: Color Theme # сменить тему
> Toggle Side Bar  # скрыть/показать панель
> Settings         # открыть настройки

Частая ошибка новичка — искать функции мышью. Палитра команд и Ctrl + P — главный способ навигации, его стоит выучить первым.

7. Мультикурсор, выделения и поиск

VS Code позволяет редактировать несколько мест одновременно:

• Alt + клик — добавить курсор;
• Ctrl + D — выделить следующее вхождение слова;
• Ctrl + Shift + L — выделить все вхождения;
• Ctrl + F — поиск в файле, Ctrl + H — замена.

// Было
color: red; width: red; border: red;
// Ctrl+Shift+L выделяет слово red → печатаем #ff0000
color: #ff0000; width: #ff0000; border: #ff0000;

8. Сниппеты и фрагменты кода

Сниппет — это готовый блок кода, который подставляется по аббревиатуре. Создать свой: File → Preferences → User Snippets и выбрать язык.

// Пример сниппета для JavaScript
"console.log": {
  "prefix": "clg",
  "body": ["console.log('$1')"],
  "description": "Вывести значение в консоль"
}

Теперь набери clg и нажми Tab — появится console.log(''), а курсор встанет внутрь кавычек.

9. Терминал и задачи

Встроенный терминал открывается Ctrl + ~. Он запускается в корне рабочей папки — можно сразу выполнять npm install, писать git status или запускать сервер, не выходя из редактора.

Ctrl + ~          # показать терминал
Ctrl + Shift + 5  # разделить терминал на два
+ (кнопка)        # новый терминал (например, PowerShell и bash)

Tasks (Ctrl + Shift + B) позволяют назначить команду на клавишу. Создай файл .vscode/tasks.json с задачей запуска сборки, и она будет появляться в меню Terminal → Run Task.

10. Git внутри редактора

Раздел Source Control (Ctrl + Shift + G) — это панель Git. Основные действия:

• видеть изменённые файлы (M — modified, U — untracked);
• написать сообщение коммита и нажать Commit;
• кнопка Publish Branch — отправить репозиторий на GitHub;
• Sync — pull + push.

# Полезные команды в палитре
> Git: Commit All
> Git: Push
> Git: Discard All Changes
> Source Control...

11. Отладка (Debug)

Отладчик ставит точки останова (breakpoints) и запускает код с паузой. Перейди на вкладку Run and Debug (Ctrl + Shift + D) и нажми create a launch.json file — VS Code предложит конфигурацию под язык.

// .vscode/launch.json для Node.js
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Запустить app.js",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

Клик по номеру строки ставит красную точку. При запуске отладки выполнение остановится, и ты увидишь переменные во вкладке Variables. Клавиши: F5 — запуск, F10 — шаг без входа в функцию, F11 — шаг с заходом, Shift + F5 — остановить.

12. Расширения и настройка

Магазин расширений — вкладка Extensions (Ctrl + Shift + X). Обязательный набор для веб-разработчика:

ESLint               # проверка JavaScript (курс: ESLint)
Prettier             # автоформатирование
Live Server          # локальный сервер с автоперезагрузкой
Volar                # поддержка Vue (курс: Vue 3)
ES7+ React snippets  # сниппеты React (курс: React)
Docker               # контейнеры (курс: Docker)
GitLens              # расширенная навигация по Git

Настройки в JSON: Ctrl + , → иконка {} справа сверху. Примеры полезных настроек:

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "files.autoSave": "onFocusChange",
  "workbench.colorTheme": "Default Dark+"
}

13. Горячие клавиши и сниппеты на скорость

Свои комбинации задаются в File → Preferences → Keyboard Shortcuts. Записи хранятся в keybindings.json:

[
  { "key": "ctrl+shift+1", "command": "editor.foldAll" },
  { "key": "ctrl+shift+2", "command": "editor.unfoldAll" },
  { "key": "ctrl+alt+d",   "command": "workbench.action.terminal.split" }
]

А скорость ввода дают сниппеты с полями-табуляторами: Tab прыгает по $1, $2, курсор заканчивает в $0:

"fetchJson": {
  "prefix": "fe",
  "body": ["const res = await fetch('$1');", "const data = await res.json();", "$0"],
  "description": "Fetch с JSON"
}

14. Совместная работа и Remote

Расширение Live Share позволяет редактировать один файл одновременно с коллегой: видно чужие курсоры, есть общий терминал и чат, управление можно передавать. Работая не с локальными файлами, подключай пакет Remote (Remote-SSH, WSL, Containers): проект живёт на сервере, интерфейс — локально.

• Live Share удобен для парного программирования и ревью в реальном времени;
• Remote-SSH рекомендован при работе с Linux-сервером или Docker-окружением;
• приглашённый пользователь открывает сессию даже в браузере — VS Code устанавливать не нужно.

15. Производительность на больших проектах

На крупных кодовых базах VS Code может подтормаживать. Быстрые проверки:

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

// settings.json
"files.exclude": { "**/node_modules": true },
"search.exclude": { "**/dist": true, "**/build": true },
"editor.formatOnSave": true

16. Профили и синхронизация настроек

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

// палитра команд
> Profiles: Create Profile
> Preferences: Sync Turn On   // синхронизация через GitHub
> Profiles: Backup Profile

• настройки бывают user и workspace — workspace переопределяет user в проекте;
• профиль хранит только нужные расширения, поэтому запуск редактора быстрее;
• Settings Sync сохраняет профили в вашем GitHub-аккаунте — перенос на новую машину занимает минуту.

17. Безопасность: доверие к папкам и расширениям

Workspace Trust — механизм, который запрещает файлам и расширениям выполнять код без вашего согласия. При открытии чужой папки VS Code переходит в режим ограничений и предупреждает.

// settings.json
"security.workspace.trust.enabled": true,
"security.workspace.trust.untrustedFiles": "newWindow"

• не добавляй в список доверенных папок чужие скрипты и marketplace-проекты;
• перед установкой расширения изучай его описание, авторство и количество установок;
• секреты (токены, ключи) храни в переменных окружения или встроенном секретном хранилище, а не в settings.json.

18. Рефакторинг и навигация по коду

Языковые серверы дают интеллектуальную навигацию. Главные инструменты:

Ctrl + Shift + L   // выделить все вхождения слова
F2                 // переименовать функцию во всех файлах
Ctrl + .           // исправить по подсказке линтера

19. ИИ-помощники в редакторе

Расширения на базе больших языковых моделей превращают VS Code в среду с автодополнением намерений. Популярные варианты: GitHub Copilot (автодополнение и чат), ChatGPT-плагины, Continue.

• автодополнение предсказывает следующую строку или целый блок по контексту;
• чат объясняет ошибку, рефакторит выделенный фрагмент и пишет тесты;
• inline-подсказки: «объясни», «найди баг», «перепиши на TypeScript».

// трюк: выдели функцию и попроси чат
// «напиши юнит-тесты, покрой граничные и падающие кейсы»

20. Базы данных в редакторе

Работа с базами в VS Code — это не отдельная программа: расширения подключаются к SQLite, PostgreSQL и MySQL прямо из боковой панели. Посмотри на SQLite Viewer для лёгких файлов и PostgreSQL-клиенты для серверных баз:

SQLite Viewer     # открыть .db и .sqlite в табличном виде
PostgreSQL Driver # подключение по строке соединения
MySQL Client      # запросы и структура БД

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

-- файл queries.sql: наведи курсор и выполни
SELECT name, price FROM products WHERE price > 100;

21. Тесты из редактора: Test Explorer

VS Code научился запускать тесты как единый поток: отдельная панель, зелёные/красные кружки у файлов, запуск одного теста кликом. Для этого нужны расширения-интеграции

Vitest Runner / Jest Runner   # фронтенд-тесты (курс Vitest)
Python Test Explorer          # pytest и unittest
Java Test Runner              # JUnit 5

• панель Testing (иконка колбы слева) показывает дерево тестов проекта;
• debug-иконка рядом с тестом запускает его под отладчиком с точками останова;
• после прогона полоска статуса показывает секунды и число упавших.

// .vscode/settings.json
"vitest.enable": true,
"jest.autoRun": { "off": true }   # не гонять авто на каждое сохранение

22. JSON и конфиги: схемы и валидация

Опечатка в package.json или tsconfig ломает конфиг. VS Code валидирует JSON по схеме: подсказывает поля, показывает ошибки типов и даёт автодополнение. Настройка — через json.schemas:

// settings.json
"json.schemas": [{
  "fileMatch": ["/*.myconfig.json"],
  "url": "https://example.com/schema.json"
}]

• встроенные схемы уже есть у package.json, tsconfig и launch.json;
• для YAML работает расширение YAML с поддержкой схем;
• ошибка схемы появляется жёлтой волнистой линией — до запуска инструмента.

// package.json: @vscode показывает "dependencies" подсказкой
{ "scripts": { "dev": "vite" }, "dependencies": {} }

23. Чек-лист: настройка редактора под новый проект

Первый день в новом репозитории — время настроек, а не «как у меня было». Быстрый план:

// .vscode/extensions.json
{ "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] }

Что дальше

Почувствовать силу VS Code проще всего на практике: сверстай страницу по курсу HTML и CSS, добавь интерактив на JavaScript, а быструю вёрстку разгони Emmet — курс по Emmet. Проверить качество кода поможет курс ESLint, а аудит производительности — Lighthouse.

← Вернуться к курсам