Настройка VS Code

Установка, базовая конфигурация, workspace vs user settings и файл settings.json

Зачем нужно

  • VS Code — основной редактор для веб-разработки
  • Правильная настройка повышает продуктивность
  • Единые настройки в команде через workspace settings

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

  • Ежедневная разработка: HTML, CSS, JavaScript, TypeScript
  • Работа с Git (встроенная интеграция)
  • Терминал, отладка, управление расширениями

Предпосылки

  • Базовая работа с компьютером

Установка

Windows

# Через winget
winget install Microsoft.VisualStudioCode

# Или скачать с https://code.visualstudio.com/

macOS

brew install --cask visual-studio-code

Linux (Ubuntu)

sudo snap install code --classic

Проверка из терминала

code --version
# Запустить VS Code из терминала
code .                  # открыть текущую папку
code file.js            # открыть файл
code --diff a.js b.js   # сравнить два файла

Настройки (Settings)

Два уровня настроек

Уровень Файл Область
User ~/.config/Code/User/settings.json Все проекты
Workspace .vscode/settings.json Текущий проект

Workspace-настройки переопределяют User-настройки.

Открыть настройки

  • Ctrl+, (Windows/Linux) / Cmd+, (macOS) — GUI
  • Ctrl+Shift+P → "Open Settings (JSON)" — файл напрямую

Рекомендуемые User Settings

// settings.json
{
  // === Редактор ===
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.linkedEditing": true,
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.smoothScrolling": true,

  // === Сохранение ===
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // === Терминал ===
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.windows": "Git Bash",

  // === Explorer ===
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.compactFolders": false,

  // === Файлы ===
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/Thumbs.db": true
  },

  // === Emmet ===
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

  // === Git ===
  "git.autofetch": true,
  "git.confirmSync": false,

  // === Форматирование по языкам ===
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Workspace Settings

Создайте .vscode/settings.json в проекте для командных настроек:

// .vscode/settings.json
{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/coverage": true
  }
}

Этот файл коммитится в Git — вся команда использует одинаковые настройки.

Рекомендуемые расширения для проекта

Файл .vscode/extensions.json:

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ritwickdey.liveserver",
    "eamodio.gitlens",
    "formulahendry.auto-rename-tag"
  ]
}

При открытии проекта VS Code предложит установить рекомендуемые расширения.

Полезные настройки терминала

{
  // Windows — использовать Git Bash
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.profiles.windows": {
    "Git Bash": {
      "source": "Git Bash"
    },
    "PowerShell": {
      "source": "PowerShell"
    }
  }
}

Темы и внешний вид

# Популярные темы (установить через Extensions)
# One Dark Pro
# Tokyo Night
# Catppuccin
# GitHub Theme
# Dracula

# Иконки файлов
# Material Icon Theme
# VSCode Icons

{
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme"
}

Шрифты для кода

Рекомендуемые моноширинные шрифты с лигатурами:

  • JetBrains Mono (бесплатный)
  • Fira Code (бесплатный)
  • Cascadia Code (от Microsoft, бесплатный)
{
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true
}

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

  • Не настроить formatOnSave — код форматируется вручную, теряется время
  • Не настроить defaultFormatter — VS Code не знает чем форматировать
  • Установить слишком много расширений — тормозит редактор
  • Не использовать workspace settings — у каждого в команде свои настройки
  • Не настроить терминал — на Windows по умолчанию PowerShell вместо Git Bash

Практика

  1. Установите VS Code и откройте проект через code .
  2. Откройте settings.json и добавьте базовые настройки
  3. Установите шрифт JetBrains Mono и включите лигатуры
  4. Создайте .vscode/settings.json для проекта
  5. Создайте .vscode/extensions.json с рекомендациями
  6. Настройте терминал на Git Bash (Windows)

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

Ресурсы