VS Code: расширения и настройки workspace

Редактирование JavaScript/Vite-проектов в VS Code опирается на сочетание расширений, локальных настроек рабочего пространства и конфигурационных файлов, которые формируют предсказуемую среду разработки. Основная цель такой конфигурации — унификация поведения форматирования, линтинга, автодополнения и отладки независимо от машины разработчика.

Рабочее пространство в VS Code обычно фиксируется через каталог .vscode, который содержит набор файлов конфигурации:

  • settings.json — локальные настройки редактора
  • extensions.json — рекомендуемые расширения
  • launch.json — конфигурации отладки
  • tasks.json — пользовательские задачи сборки и автоматизации

Такой подход позволяет изолировать настройки проекта от глобальной конфигурации редактора и уменьшает количество различий между окружениями.

Локальные настройки редактора (settings.json)

Файл .vscode/settings.json управляет поведением VS Code именно внутри проекта. Для Vite-проектов типичны настройки форматирования, импорта модулей и обработки TypeScript/JavaScript.

Пример базовой конфигурации:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "files.eol": "\n"
}

Ключевые моменты:

  • formatOnSave обеспечивает автоматическое форматирование при сохранении
  • Prettier используется как основной форматтер
  • ESLint выполняет автоматическое исправление проблем
  • настройка импортов уменьшает использование относительных путей

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

Файл .vscode/extensions.json задаёт набор расширений, которые повышают согласованность среды разработки:

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "vue.volar",
    "vite.vite",
    "ms-vscode.vscode-typescript-next"
  ]
}

ESLint

ESLint обеспечивает статический анализ кода и помогает поддерживать единый стиль и предотвращать ошибки.

Ключевые сценарии:

  • анализ JavaScript и TypeScript
  • контроль использования React/Vue правил (через плагины)
  • интеграция с автофиксом при сохранении

В Vite-проектах ESLint обычно связан с конфигурациями Flat Config или .eslintrc.

Prettier

Prettier отвечает за форматирование кода. В связке с Vite он используется как единый стандарт оформления:

  • удаляет споры о стиле кода
  • гарантирует единый формат в команде
  • работает на уровне сохранения файла

Важно избегать конфликтов между ESLint и Prettier, используя eslint-config-prettier.

Volar (Vue)

Для проектов на Vue 3 Vite чаще всего используется Volar:

  • замена Vetur
  • поддержка TypeScript внутри .vue файлов
  • полноценный language server

Особенность интеграции заключается в том, что Volar использует проектный TypeScript, а не встроенный.

TypeScript VS Code plugin

Расширение vscode-typescript-next полезно при работе с современными фичами TS:

  • поддержка новых синтаксических возможностей до стабильного релиза
  • улучшенное автодополнение
  • более точная типизация в больших проектах

Конфигурация отладки (launch.json)

Vite использует dev server, поэтому отладка в VS Code обычно строится вокруг браузера.

Пример конфигурации для Chrome:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Vite Dev Server",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Ключевые параметры:

  • url соответствует адресу Vite dev server
  • webRoot связывает исходный код с исходниками в браузере
  • pwa-chrome обеспечивает современный debug protocol

Tasks в Vite-проектах (tasks.json)

Автоматизация часто используется для запуска dev server, сборки или тестов.

Пример:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev",
      "type": "shell",
      "command": "npm run dev",
      "problemMatcher": []
    },
    {
      "label": "build",
      "type": "shell",
      "command": "npm run build",
      "problemMatcher": []
    }
  ]
}

Такая конфигурация позволяет запускать Vite команды прямо из VS Code без переключения терминала.

Интеграция Vite с TypeScript и alias-путями

В Vite-проектах часто используется алиас @ для директории src. Для корректной работы VS Code необходимо синхронизировать vite.config.js и tsconfig.json.

Vite конфигурация:

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

TypeScript конфигурация:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Без этой синхронизации автодополнение в VS Code будет некорректным.

Форматирование и конфликт инструментов

Типичная проблема Vite-проектов — конфликт между ESLint и Prettier. Он проявляется в виде постоянных переформатирований файла.

Корректная архитектура включает:

  • ESLint отвечает за качество кода
  • Prettier отвечает за форматирование
  • ESLint отключает форматирующие правила

Пример конфигурационного слоя:

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

Workspace-уровень управления зависимостями

В монорепозиториях Vite-проекты часто включаются в единое workspace (pnpm, yarn, npm workspaces). VS Code при этом должен:

  • корректно индексировать несколько node_modules
  • понимать root проекта
  • учитывать разные tsconfig на пакеты

Пример структуры:

repo/
  apps/
    web/
      vite.config.js
      tsconfig.json
  packages/
    ui/

Для таких случаев часто добавляется файл .code-workspace:

{
  "folders": [
    {
      "path": "apps/web"
    },
    {
      "path": "packages/ui"
    }
  ],
  "settings": {
    "editor.formatOnSave": true
  }
}

Автоимпорт и интеллектуальные подсказки

VS Code с Vite-проектами опирается на:

  • TypeScript Language Server
  • Vite HMR контекст (частично)
  • расширения Vue/React

Основные механизмы:

  • автоматическое добавление импортов
  • сортировка импортов
  • удаление неиспользуемых импортов

Особенно важно включение:

{
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

Отладка проблем в связке VS Code + Vite

Типовые источники проблем:

  • несоответствие tsconfig и vite.config
  • конфликт расширений форматирования
  • использование глобальных VS Code настроек вместо workspace
  • отсутствие перезапуска TS server после изменения alias

При сложных сценариях помогает:

  • перезапуск TypeScript server
  • очистка кэша Vite (node_modules/.vite)
  • проверка совпадения путей alias

Производительность редактора в крупных Vite-проектах

При росте проекта VS Code может замедляться из-за:

  • большого количества файлов в node_modules
  • watch режима Vite + TS server
  • активных расширений ESLint и Volar

Оптимизация включает:

  • исключение папок через files.watcherExclude
  • отключение ненужных расширений
  • ограничение scope TS server

Пример:

{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true
  }
}
Оглавление