ESLint конфигурация

ESLint — это статический анализатор кода для JavaScript, позволяющий выявлять ошибки, поддерживать единый стиль кода и предотвращать потенциальные баги. При работе с современными фреймворками, такими как Vue 3 и библиотекой Element Plus, правильная конфигурация ESLint становится особенно важной.

Установка ESLint и необходимых плагинов

Для начала требуется установить ESLint в проект:

npm install eslint --save-dev

Для интеграции с Vue 3 и Element Plus рекомендуются следующие пакеты:

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

Создание конфигурационного файла

Файл конфигурации может быть в формате .eslintrc.js, .eslintrc.json или .eslintrc.yml. Наиболее распространённый вариант — .eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'vue/max-attributes-per-line': ['error', { singleline: 5 }],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: ['*.vue'],
      rules: {
        'max-len': 'off'
      }
    }
  ]
};

Ключевые моменты конфигурации:

  • env — определяет глобальные объекты, доступные в проекте.
  • extends — набор стандартных правил и рекомендаций. Порядок важен: конфигурации, добавленные позже, могут переопределять предыдущие.
  • parserOptions — настройки для парсера, включая версию ECMAScript.
  • rules — индивидуальные правила проекта. Можно задавать уровни: off, warn, error.
  • overrides — позволяет применять разные правила для отдельных типов файлов.

Настройка ESLint под Element Plus

Element Plus использует современный синтаксис Vue 3 с Composition API. Для корректной работы рекомендуется:

  1. Обрабатывать глобальные компоненты:
'vue/component-definition-name-casing': ['error', 'PascalCase'],
'vue/require-prop-types': 'off',
'vue/require-default-prop': 'off'
  1. Соблюдать правила форматирования для JSX и шаблонов:
'vue/html-indent': ['error', 2],
'vue/html-self-closing': [
  'error',
  {
    html: {
      void: 'never',
      normal: 'always',
      component: 'always'
    }
  }
]
  1. Отключить конфликты с Prettier:
'prettier/prettier': [
  'error',
  {
    endOfLine: 'auto',
    singleQuote: true,
    semi: true
  }
]

Эти настройки обеспечивают единообразный код при использовании компонентов Element Plus, предотвращают ошибки в пропсах и атрибутах.

Интеграция с IDE и Prettier

Для удобства рекомендуется:

  • Установить ESLint и Prettier расширения в редакторе (VS Code).
  • Включить автоматическое исправление ошибок при сохранении файлов:
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
  • Настроить .prettierrc для синхронизации правил форматирования:
{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "printWidth": 100
}

Совмещение ESLint и Prettier позволяет одновременно проверять ошибки и автоматически поддерживать стиль кода.

Использование скриптов npm для проверки кода

Для удобства добавляют команды в package.json:

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "lint:fix": "eslint --ext .js,.vue src --fix"
  }
}
  • lint — проверка всех файлов в папке src.
  • lint:fix — автоматическое исправление проблемных мест.

Советы по поддержанию конфигурации

  • Регулярно обновлять ESLint и плагины для совместимости с Vue и Element Plus.
  • В больших проектах разделять правила на базовые и специфические для компонентов.
  • Использовать overrides для файлов тестов, где некоторые правила могут быть неактуальны.

Эти подходы обеспечивают строгий контроль качества кода, совместимость с современными практиками Vue 3 и библиотекой Element Plus, а также минимизируют риск ошибок при масштабировании проекта.

Оглавление