VS Code: установка и настройка

VS Code (Visual Studio Code) — бесплатный редактор кода от Microsoft с встроенным LSP, отладчиком, Git-интеграцией и экосистемой из тысяч расширений.

Зачем нужно

VS Code — стандарт де-факто для веб-разработки. Быстрый старт, мощный IntelliSense для JavaScript/TypeScript, встроенный терминал и Git делают его полноценной IDE при весе текстового редактора. Правильная первоначальная настройка экономит часы работы в будущем.

Где используется

  • Основной редактор для JavaScript, TypeScript, Python, Go и других языков
  • Разработка на любой платформе: Windows, macOS, Linux
  • Remote Development (SSH, WSL, Dev Containers) — работа на удалённых серверах
  • GitHub Codespaces — VS Code в браузере

Установка

# macOS (Homebrew)
brew install --cask visual-studio-code

# Ubuntu/Debian
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install packages.microsoft.gpg /usr/share/keyrings/
# Затем добавить репозиторий и: sudo apt install code

# Windows
# Скачать с https://code.visualstudio.com/
# При установке: включить "Add to PATH" и "Open with Code"

# Проверка установки
code --version

Команда code в терминале

# Открыть папку проекта в VS Code
code .
code /path/to/project

# Открыть конкретный файл
code src/index.ts

# Открыть с нужной строкой
code src/index.ts:42:10

# Сравнить два файла
code --diff file1.ts file2.ts

# Установить расширение из CLI
code --install-extension esbenp.prettier-vscode

Первоначальная настройка settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontSize": 15,
  "editor.fontFamily": "'JetBrains Mono', monospace",
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.bracketPairColorization.enabled": true,
  "files.autoSave": "onFocusChange",
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "git.autofetch": true
}

Минимальный набор расширений

# Установить одной командой
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens
code --install-extension PKief.material-icon-theme

Settings Sync — синхронизация настроек

Ctrl+Shift+P → "Settings Sync: Turn On"
Войти через GitHub или Microsoft аккаунт
Настройки, расширения, сниппеты синхронизируются между машинами

Полезные функции из коробки

Emmet — генерация HTML: ul>li*5>a{Item $} → Tab → полный список
IntelliSense — автодополнение для JS/TS без расширений
Built-in Git — staging, commit, diff, merge прямо в редакторе
Remote — SSH — работа с файлами на удалённом сервере как локально

Частые ошибки

  • Не добавляют VS Code в PATH при установке на Windows — code . не работает в терминале
  • Открывают файл, а не папку — нет IntelliSense, нет автодополнения путей
  • Не настраивают Settings Sync — при переустановке теряют все настройки
  • Слишком много расширений — замедляют запуск, рекомендуют только нужные

Связанные темы

Ресурсы