Настройка ESLint и Prettier

ESLint и Prettier являются основными инструментами для обеспечения качества кода и единообразного стиля в проектах на Vue.js. ESLint отвечает за статический анализ кода и выявление потенциальных ошибок, а Prettier автоматически форматирует код, следуя заданным правилам стиля.

Установка ESLint

Для начала необходимо добавить ESLint в проект. В проектах на Vue.js, созданных с помощью Vue CLI, ESLint может быть интегрирован при создании проекта. Если проект уже создан, ESLint устанавливается через npm или yarn:

npm install eslint --save-dev

или

yarn add eslint --dev

После установки выполняется инициализация:

npx eslint --init

В процессе настройки выбираются:

  • Тип проекта: JavaScript, Vue, Node.js и т.д.
  • Стиль кода: предпочтительный стандарт или Airbnb.
  • Тип модулей: ES Modules или CommonJS.
  • Используемые фреймворки: Vue.js.
  • Формат конфигурации: .eslintrc.json, .eslintrc.js или YAML.

В результате создается файл конфигурации .eslintrc с набором правил, которые можно настраивать вручную.

Установка Prettier

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

npm install --save-dev prettier

или

yarn add --dev prettier

Создается файл конфигурации .prettierrc с настройками форматирования:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2
}
  • semi — обязательная точка с запятой в конце строки.
  • singleQuote — использование одинарных кавычек.
  • trailingComma — добавление запятых там, где это возможно.
  • printWidth — максимальная длина строки.
  • tabWidth — ширина табуляции.

Интеграция ESLint и Prettier

Для совместной работы ESLint и Prettier необходимо установить дополнительные пакеты:

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

или

yarn add --dev eslint-config-prettier eslint-plugin-prettier
  • eslint-plugin-prettier позволяет ESLint проверять соответствие кода правилам Prettier.
  • eslint-config-prettier отключает правила ESLint, которые могут конфликтовать с Prettier.

В конфигурации ESLint (.eslintrc.js) подключается:

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    // индивидуальные правила проекта
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
};
  • Плагин plugin:prettier/recommended автоматически подключает Prettier и ESLint, управляет конфликтами правил и обеспечивает проверку форматирования.

Настройка скриптов в package.json

Для удобного использования ESLint и Prettier добавляются скрипты:

"scripts": {
  "lint": "eslint --ext .js,.vue src",
  "lint:fix": "eslint --fix --ext .js,.vue src",
  "format": "prettier --write 'src/**/*.{js,vue,css,scss,ts,json,md}'"
}
  • lint — проверка кода на ошибки.
  • lint:fix — автоматическое исправление возможных проблем ESLint.
  • format — форматирование всех файлов с помощью Prettier.

Интеграция с редактором кода

Для VS Code рекомендуется установить расширения:

  • ESLint — отображение ошибок прямо в редакторе.
  • Prettier - Code formatter — автоматическое форматирование кода при сохранении.

В настройках VS Code добавляется:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "vue"]
}
  • editor.formatOnSave — автоматическое форматирование при сохранении.
  • source.fixAll.eslint — исправление всех проблем ESLint.
  • eslint.validate — проверка файлов нужных типов.

Работа с Vue Single File Components (SFC)

Vue SFC (.vue файлы) содержат шаблон, скрипт и стили. ESLint и Prettier корректно обрабатывают SFC через парсер vue-eslint-parser и плагин eslint-plugin-vue.

npm install --save-dev vue-eslint-parser eslint-plugin-vue

Конфигурация .eslintrc.js:

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@babel/eslint-parser',
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  plugins: ['vue'],
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:prettier/recommended']
};

Таким образом обеспечивается:

  • Проверка синтаксиса внутри <script>.
  • Форматирование <template> и <style> секций Prettier.
  • Совместимость с современным синтаксисом ES2020.

Автоматизация через Husky и lint-staged

Для предотвращения попадания некорректного кода в репозиторий можно использовать Husky и lint-staged:

npm install --save-dev husky lint-staged

В package.json добавляется:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,vue}": ["eslint --fix", "prettier --write"]
}
  • pre-commit — запуск проверки перед коммитом.
  • lint-staged — проверка только измененных файлов, ускоряя процесс.

Эта настройка ESLint и Prettier обеспечивает строгий контроль качества кода, единообразный стиль и предотвращение ошибок в проектах на Vue.js. Она интегрируется с редакторами, CI/CD пайплайнами и автоматизирует исправление большинства проблем, оставляя разработчикам возможность сосредоточиться на функциональности.

Оглавление