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

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

Основные принципы настройки ESLint

1. Определение среды проекта

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

module.exports = {
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
};
  • browser: true — разрешает глобальные объекты браузера (window, document).
  • node: true — разрешает глобальные объекты Node.js (process, require).
  • es2021: true — активирует синтаксис ECMAScript 2021.

Подключение плагинов Vue и Vuetify

Vuetify строится на Vue, поэтому ESLint должен понимать синтаксис .vue файлов и специфические правила Vuetify. Для этого подключают следующие плагины:

module.exports = {
  plugins: ['vue', 'vuetify'],
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:vuetify/recommended',
  ],
};
  • plugin:vue/vue3-recommended — набор правил для Vue 3, включая проверку компонентов, директив, событий и шаблонов.
  • plugin:vuetify/recommended — специальные правила для Vuetify, включая корректное использование компонентов, слотов и темизации.

Настройка парсера для .vue файлов

Чтобы ESLint корректно обрабатывал Vue Single File Components, необходимо указать парсер:

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@babel/eslint-parser',
    ecmaVersion: 2021,
    sourceType: 'module',
  },
};
  • vue-eslint-parser разделяет шаблон, скрипт и стиль внутри .vue файлов.
  • @babel/eslint-parser позволяет использовать современный JavaScript, включая JSX и нестандартные синтаксические конструкции.

Правила для поддержания стиля Vuetify

Конфигурация ESLint может включать правила, которые обеспечивают единообразие кода и корректное использование компонентов Vuetify:

module.exports = {
  rules: {
    'vue/html-indent': ['error', 2],
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: 3,
        multiline: { max: 1, allowFirstLine: false },
      },
    ],
    'vuetify/no-deprecated-classes': 'warn',
    'vuetify/no-legacy-grid': 'error',
    'vue/script-setup-uses-vars': 'error',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};
  • vue/html-indent — обеспечивает единообразное форматирование шаблонов.
  • vue/max-attributes-per-line — ограничивает количество атрибутов на одной строке, улучшая читаемость.
  • vuetify/no-deprecated-classes — предупреждает использование устаревших CSS-классов Vuetify.
  • vuetify/no-legacy-grid — запрещает использование устаревшей сетки, что важно при переходе на Vuetify 3.
  • vue/script-setup-uses-vars — предотвращает ложные предупреждения об использовании переменных в <script setup>.

Настройка правил для TypeScript (опционально)

В проектах с TypeScript необходимо подключить парсер @typescript-eslint/parser и соответствующие расширения:

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'plugin:vuetify/recommended',
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
  },
};
  • Это позволяет ESLint корректно проверять типы и переменные в TypeScript-коде Vue компонентов.
  • Использование префикса _ для аргументов, которые не используются, предотвращает лишние предупреждения.

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

Для автоматического форматирования кода часто используют Prettier совместно с ESLint. В этом случае конфигурация выглядит так:

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:vuetify/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        trailingComma: 'all',
        printWidth: 100,
      },
    ],
  },
};
  • plugin:prettier/recommended отключает конфликтующие правила ESLint и применяет стиль Prettier.
  • prettier/prettier позволяет настроить форматирование под стандарты проекта, включая отступы, кавычки и длину строки.

Использование ESLint с VS Code

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

  1. Установить расширение ESLint для VS Code.
  2. Настроить автоматическую проверку при сохранении файла:
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}
  1. При работе с Vuetify важно включить поддержку Vue в настройках ESLint для VS Code.

Автоматическое исправление ошибок

ESLint поддерживает автоматическое исправление проблем с помощью команды:

npx eslint --fix src/**/*.vue
  • Позволяет быстро исправить стилистические ошибки и проблемы с компонентами Vuetify.
  • Работает совместно с Prettier, обеспечивая единообразие кода.

Настройка разных конфигураций для разработки и продакшена

Можно задавать разные уровни проверки для среды разработки и продакшена:

module.exports = {
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};
  • В продакшене запрещены console.log и debugger.
  • В разработке эти инструменты остаются доступными для отладки.

Советы по поддержке проекта с Vuetify

  • Постоянно обновлять версии eslint-plugin-vuetify и eslint-plugin-vue для соответствия последним изменениям Vuetify.
  • Настроить pre-commit хуки с lint-staged, чтобы проверка ESLint выполнялась перед коммитом.
  • Использовать отдельные конфигурации ESLint для тестов, компонентов и утилит с помощью overrides.

Эта конфигурация ESLint обеспечивает корректное использование Vuetify, поддерживает единообразие кода и помогает предотвратить распространённые ошибки при разработке Vue компонентов.

Оглавление