VSCode-Vue.md

Настройка VS Code для автоматического линтинга, форматирования и интеграции с инструментами, такими как ESLint и Prettier, позволяет значительно улучшить процесс разработки, минимизировать ошибки и поддерживать чистоту кода. Ниже приведена подробная инструкция по настройке VS Code для работы с JavaScript, Vue.js (или другими фреймворками), а также для интеграции с Git хуками, чтобы минимизировать отклонение коммитов из-за ошибок линтинга.

1. Установите необходимые расширения

Для интеграции линтинга, форматирования и поддержки Vue.js (или других технологий) установите следующие расширения в VS Code:

ESLint
- Расширение: dbaeumer.vscode-eslint
- Назначение: Интеграция ESLint для проверки кода на ошибки и отображения их в редакторе.
- Установка: Откройте панель расширений (Ctrl+Shift+X), найдите "ESLint" и нажмите "Install".
Prettier - Code formatter
- Расширение: esbenp.prettier-vscode
- Назначение: Автоматическое форматирование кода в соответствии с правилами Prettier.
- Установка: Найдите "Prettier" в панели расширений и установите.
Vetur (для Vue.js, если вы работаете с Vue)
- Расширение: octref.vetur
- Назначение: Поддержка синтаксиса, автодополнения и линтинга для Vue.js.
- Установка: Найдите "Vetur" и установите.
Vue 3 Snippets (опционально, для Vue.js)
- Расширение: sdras.vue-vscode-snippets
- Назначение: Сниппеты для быстрого написания кода на Vue.js.
- Установка: Найдите "Vue 3 Snippets" и установите.
GitLens (опционально)
- Расширение: eamodio.gitlens
- Назначение: Улучшенная интеграция с Git, отображение истории изменений, авторов и т.д.
- Установка: Найдите "GitLens" и установите.

После установки расширений перезапустите VS Code, чтобы убедиться, что они активированы.

2. Настройте проект для работы с ESLint и Prettier

Прежде чем настраивать VS Code, убедитесь, что ваш проект настроен для работы с ESLint и Prettier. Если вы еще не настроили их, выполните следующие шаги:

Установите ESLint и Prettier в проекте

Установите зависимости разработки:

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

Или с Yarn:

yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier --dev

Инициализируйте ESLint:
```
npx eslint --init
```
Ответьте на вопросы в интерактивном режиме. Пример ответов для Vue.js проекта:
- Как вы хотите использовать ESLint? > "To check syntax, find problems, and enforce code style"
- Какой тип модулей использует ваш проект? > "JavaScript modules (import/export)"
- Какой фреймворк использует ваш проект? > "Vue.js"
- Используете ли вы TypeScript? > "No" (или "Yes", если используете)
- Где выполняется ваш код? > "Browser"
- Какой стиль кода вы хотите использовать? > "Use a popular style guide" > "Airbnb"
- Какой формат конфигурационного файла вы хотите использовать? > "JavaScript"
После этого будет создан файл .eslintrc.js (или другой формат, в зависимости от вашего выбора).

Настройте Prettier для совместимости с ESLint:

Откройте файл .eslintrc.js и добавьте интеграцию с Prettier:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential', // для Vue.js
    'airbnb-base',
    'plugin:prettier/recommended', // интеграция Prettier
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error', // ошибки Prettier отображаются как ошибки ESLint
  },
};

Создайте файл конфигурации Prettier (.prettierrc):
- Создайте файл .prettierrc в корне проекта и добавьте настройки форматирования, например:
```
{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}
```

Добавьте скрипты в package.json:

Убедитесь, что у вас есть скрипты для линтинга и форматирования:

{
  "scripts": {
    "lint": "eslint . --ext .js,.vue",
    "lint:fix": "eslint . --ext .js,.vue --fix",
    "format": "prettier --write ."
  }
}

3. Настройте VS Code для автоматического линтинга и форматирования

Теперь настроим VS Code, чтобы он автоматически показывал ошибки линтинга, форматировал код при сохранении и интегрировался с вашим проектом.

3.1. Включите автоматическое форматирование при сохранении

Откройте настройки VS Code:
- Нажмите Ctrl + , (или File > Preferences > Settings).
Найдите настройку Editor: Format On Save:
- В строке поиска введите "format on save" и включите опцию Editor: Format On Save.
Убедитесь, что Prettier используется как форматтер по умолчанию:
- Найдите настройку Editor: Default Formatter и выберите esbenp.prettier-vscode (Prettier).

3.2. Настройте автоматическое исправление ошибок ESLint при сохранении

Чтобы ESLint автоматически исправлял ошибки (например, удалял неиспользуемые переменные, добавлял точки с запятой и т.д.), настройте действия при сохранении:

Откройте файл настроек VS Code:
- Нажмите Ctrl + Shift + P, введите "Preferences: Open Settings (JSON)" и выберите этот пункт.
- Или откройте файл настроек вручную: C:\Users\<ВашПользователь>\AppData\Roaming\Code\User\settings.json (в Windows).
Добавьте следующие настройки в settings.json:
```
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "vue", "typescript"],
  "eslint.workingDirectories": ["./"],
  "files.associations": {
    "*.vue": "vue"
  },
  "prettier.requireConfig": true
}
```
Объяснение настроек:
- "editor.formatOnSave": true — включает форматирование при сохранении.
- "editor.defaultFormatter": "esbenp.prettier-vscode" — устанавливает Prettier как форматтер по умолчанию.
- "editor.codeActionsOnSave": { "source.fixAll.eslint": true } — включает автоматическое исправление ошибок ESLint при сохранении.
- "eslint.validate": ["javascript", "vue", "typescript"] — указывает, какие типы файлов проверять с помощью ESLint.
- "eslint.workingDirectories": ["./"] — указывает рабочую директорию для ESLint (важно, если проект имеет сложную структуру).
- "files.associations": { "*.vue": "vue" } — указывает, что файлы .vue должны обрабатываться как Vue-файлы.
- "prettier.requireConfig": true — требует наличия файла .prettierrc для форматирования (чтобы избежать форматирования в проектах без Prettier).

3.3. Настройте Vetur (для Vue.js)

Если вы работаете с Vue.js, настройте Vetur, чтобы он корректно взаимодействовал с ESLint и Prettier:

Откройте настройки VS Code (Ctrl + ,).
Найдите настройки Vetur:
- В строке поиска введите "vetur".
Убедитесь, что Vetur использует Prettier для форматирования:
- Найдите Vetur > Format > Default Formatter: HTML и установите prettyhtml.
- Найдите Vetur > Format > Default Formatter: JS и установите prettier.
- Найдите Vetur > Format > Default Formatter: CSS и установите prettier.
- Найдите Vetur > Format > Default Formatter: SCSS и установите prettier.
- Найдите Vetur > Format > Default Formatter: LESS и установите prettier.
- Найдите Vetur > Format > Default Formatter: TS и установите prettier.
Эти настройки гарантируют, что Vetur будет использовать Prettier для форматирования кода внутри Vue-компонентов (например, в секциях <template>, <script>, <style>).
Отключите встроенные проверки Vetur, если вы используете ESLint:
- Найдите Vetur > Validation: Template и отключите (снимите галочку), чтобы избежать дублирования проверок с ESLint.
- Найдите Vetur > Validation: Script и отключите, если ESLint уже проверяет JavaScript/TypeScript.
- Найдите Vetur > Validation: Style и отключите, если вы используете Stylelint или другие инструменты для проверки стилей.
Эти действия помогут избежать конфликтов между Vetur и ESLint/Prettier.

3.4. Настройте отображение ошибок ESLint в редакторе

Чтобы ошибки линтинга отображались в реальном времени в редакторе (подчеркивание красным, подсказки и т.д.), убедитесь, что расширение ESLint активно:

Убедитесь, что ESLint установлен в проекте (см. шаг 2 выше).
Проверьте, что в настройках VS Code включена опция ESLint: Enable:
- Откройте настройки (Ctrl + ,), найдите "eslint enable" и убедитесь, что опция включена.
Убедитесь, что ESLint автоматически определяет ваш проект:
- Если вы видите сообщение "ESLint is not working", убедитесь, что в корне проекта есть файл .eslintrc.js (или другой формат конфигурации ESLint).
- Если проект не определяется, добавьте в настройки VS Code рабочую директорию (см. пример в settings.json выше).

Теперь ошибки линтинга будут отображаться в редакторе в реальном времени, а при наведении на ошибку вы увидите подробное описание и возможные исправления.

3.5. Настройте автоматическое форматирование для Vue-файлов

Чтобы форматирование работало корректно для Vue-файлов, убедитесь, что VS Code понимает их как Vue:

Откройте настройки VS Code (Ctrl + ,).
Найдите Files: Associations и добавьте ассоциацию для .vue файлов:
- Нажмите "Edit in settings.json" под этим пунктом и добавьте:
```
{
  "files.associations": {
    "*.vue": "vue"
  }
}
```
Убедитесь, что Prettier и ESLint работают с Vue:
- В .eslintrc.js добавьте поддержку Vue, если еще не добавили:
```
module.exports = {
  extends: [
    'plugin:vue/vue3-essential', // или 'plugin:vue/vue3-recommended'
    'plugin:prettier/recommended',
  ],
  plugins: ['vue'],
};
```
- Убедитесь, что в .prettierrc нет конфликтов с правилами форматирования Vue.

3.6. Настройте горячие клавиши (опционально)

Для удобства можно настроить горячие клавиши для выполнения линтинга или форматирования вручную:

Откройте панель команд (Ctrl + Shift + P) и выберите "Preferences: Open Keyboard Shortcuts (JSON)".

Добавьте свои сочетания клавиш, например:

[
  {
    "key": "ctrl+alt+l",
    "command": "eslint.executeAutofix",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+f",
    "command": "editor.action.formatDocument",
    "when": "editorTextFocus"
  }
]

Ctrl+Alt+L — запуск автоматического исправления ESLint.
Ctrl+Alt+F — запуск форматирования документа.

3.7. Проверьте интеграцию с Git хуками

Чтобы минимизировать отклонение коммитов из-за ошибок линтинга, убедитесь, что VS Code работает в связке с Git хуками (например, настроенными через husky, как описано в предыдущих ответах). Если вы настроили автоматическое исправление при сохранении, большинство ошибок линтинга будет исправлено до того, как вы сделаете коммит, что значительно уменьшит вероятность отклонения.

Убедитесь, что хук pre-commit настроен для запуска npm run lint (см. предыдущие ответы).
Проверьте, что при сохранении файлов в VS Code ошибки исправляются автоматически:
- Откройте файл, добавьте код с ошибками (например, неиспользуемую переменную или неправильное форматирование).
- Нажмите Ctrl + S (сохранить) и убедитесь, что ошибки исправляются, а код форматируется.

3.8. Решение возможных проблем

Если что-то работает не так, вот несколько шагов для устранения неполадок:

ESLint не показывает ошибки в редакторе:
- Убедитесь, что расширение ESLint активно (внизу в статус-баре VS Code должен быть значок ESLint).
- Проверьте, что в корне проекта есть файл .eslintrc.js (или другой формат конфигурации).
- Перезапустите сервер ESLint: нажмите Ctrl + Shift + P, выберите "ESLint: Restart ESLint Server".
- Убедитесь, что в настройках VS Code указаны правильные рабочие директории (eslint.workingDirectories).
Prettier не форматирует код при сохранении:
- Убедитесь, что Prettier установлен как форматтер по умолчанию (editor.defaultFormatter).
- Проверьте, что в проекте есть файл .prettierrc.
- Убедитесь, что опция editor.formatOnSave включена.
Конфликты между ESLint и Prettier:
- Убедитесь, что в .eslintrc.js добавлена интеграция с Prettier (plugin:prettier/recommended).
- Если конфликты все еще возникают, отключите пересекающиеся правила ESLint, например:
```
module.exports = {
  rules: {
    'no-console': 'off', // если Prettier и ESLint конфликтуют по этому правилу
  },
};
```
Vetur конфликтует с ESLint/Prettier:
- Отключите встроенные проверки Vetur (см. шаг 3.3 выше).
- Убедитесь, что Vetur использует Prettier для форматирования.

3.9. Пример полной конфигурации `settings.json`

Для удобства вот пример полной конфигурации settings.json для проекта с Vue.js, ESLint и Prettier:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "vue", "typescript"],
  "eslint.workingDirectories": ["./"],
  "files.associations": {
    "*.vue": "vue"
  },
  "prettier.requireConfig": true,
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.validation.template": false,
  "vetur.validation.script": false,
  "vetur.validation.style": false
}

Итог

После выполнения всех шагов ваш VS Code будет настроен для:

Автоматического линтинга с помощью ESLint (ошибки отображаются в реальном времени).
Автоматического форматирования с помощью Prettier при сохранении.
Автоматического исправления ошибок ESLint при сохраненииS` и

5kr1p7/VSCode-Vue.md