Настройка ESLint для Nuxt проекта

Введение

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

Почему ESLint важен в Nuxt-проектах

Если вы уже использовали Nuxt, наверняка сталкивались с большими проектами, где несколько разработчиков пишут код по-разному. Тут на помощь приходит ESLint. Он решает сразу несколько задач:

• Предотвращение простых синтаксических и логических ошибок до запуска в браузере.
• Приведение кода к единому стилю.
• Упрощение процесса ревью и сопровождения.
• Ускорение поиска проблем на ранних этапах разработки.

Давайте перейдём к настройке с нуля.

Установка ESLint в Nuxt-проекте

Установка через CLI Nuxt

При создании нового Nuxt-проекта через npx nuxi init (Nuxt 3) или create-nuxt-app (Nuxt 2) вас спросят, хотите ли вы подключить ESLint. Если согласитесь — он установится автоматически с базовой конфигурацией.

Для существующего проекта, когда ESLint не подключён, выполните следующие шаги.

Правильная настройка ESLint помогает поддерживать чистоту и консистентность кода в Nuxt-проектах. Однако, чтобы получить максимальную пользу от ESLint, необходимо понимать, как работает конфигурация ESLint, как добавлять свои правила и как интегрировать ESLint с вашим редактором кода. Если вы хотите углубить свои знания о настройке ESLint в Nuxt, приходите на наш большой курс Nuxt - fullstack Vue фреймворк. На курсе 129 уроков и 13 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Установка вручную

В терминале, находясь в корне проекта, выполните:

# Для Nuxt 3 (на TypeScript и JavaScript)
npm install --save-dev eslint @nuxt/eslint-config

Если вы используете Nuxt 2:

npm install --save-dev eslint eslint-plugin-nuxt

Теперь у вас в проекте появился ESLint и пакет правил, рекомендуемых для Nuxt.

Добавление поддержки для Vue и других инструментов

Обычно с Nuxt работают с Vue-файлами, поэтому необходимы и плагины для Vue:

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

А если в проекте используется TypeScript:

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

Теперь перейдём к конфигурированию.

Конфигурация ESLint в Nuxt-проекте

Конфигурационный файл линтера может называться .eslintrc, .eslintrc.js, .eslintrc.json или быть прописан в секции eslintConfig файла package.json. Я покажу пример на .eslintrc.js, это самый гибкий формат.

Пример базового файла конфигурации для Nuxt 3

// .eslintrc.js

module.exports = {
  root: true, // Корень проекта, искать другие конфиги не нужно
  env: {
    browser: true, // Глобальные переменные браузера
    node: true, // Глобальные переменные Node.js
    es2021: true, // Современный синтаксис ECMAScript
  },
  extends: [
    '@nuxt/eslint-config', // Базовые правила Nuxt
    'plugin:vue/vue3-recommended', // Рекомендуемые правила для Vue 3
  ],
  plugins: [
    'vue', // Поддержка файлов .vue
  ],
  rules: {
    // Ваши индивидуальные правила
    'vue/multi-word-component-names': 'off', // Не требует длинных имён для компонентов
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // Разрешить console.log в деве
    // Примеры других правил:
    // 'semi': ['error', 'always'], // Требует точки с запятой
    // 'quotes': ['error', 'single'], // Обязательно одинарные кавычки
  },
}

Я всегда советую минимально нарушать рекомендуемые пресеты, но для крупных проектов часто приходится дорабатывать правила под себя. Например, отключить требование именования компонентов из нескольких слов, если это мешает старым привычкам или небольшой команде.

Конфигурирование ESLint для Nuxt 2

Для Nuxt 2 используйте расширение plugin:nuxt/recommended и базовые пресеты для Vue 2:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  extends: [
    'plugin:nuxt/recommended', // Рекомендуемые правила для Nuxt 2
    'plugin:vue/recommended',
  ],
  plugins: [
    'vue'
  ],
  rules: {
    // Индивидуальные правила
  },
}

Настройка для TypeScript

Если проект написан на TypeScript, добавьте следующие строки:

module.exports = {
  // ...
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  extends: [
    // ...
    'plugin:@typescript-eslint/recommended'
  ],
  plugins: [
    // ...
    '@typescript-eslint'
  ],
  rules: {
    // Индивидуальные правила TypeScript
    '@typescript-eslint/no-unused-vars': ['error'],
  },
}

Обратите внимание: порядок extends и plugins важен. Сначала базовые Nuxt/Vue-пресеты, потом TypeScript.

Подключение Prettier

Если вы хотите автоматизировать форматирование кода, можно интегрировать Prettier:

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

В конфиге:

extends: [
  // ...
  'plugin:prettier/recommended'
],
plugins: [
  // ...
  'prettier'
],
rules: {
  'prettier/prettier': 'error',
}

Теперь все конфликты стилей автоматически исправляются по правилам Prettier.

Запуск и автоматизация линтинга

Проверка кода вручную

Для запуска линтинга выполните команду:

npx eslint . --ext .js,.ts,.vue

Здесь .vue — это важно, иначе Vue-файлы будут проигнорированы.

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

npx eslint . --ext .js,.ts,.vue --fix

Добавление в package.json

Настоятельно рекомендую добавить в scripts файла package.json такие команды:

"scripts": {
  "lint": "eslint . --ext .js,.ts,.vue",
  "lint:fix": "eslint . --ext .js,.ts,.vue --fix"
}

Теперь запуск линтера — это просто npm run lint.

Интеграция с Git хуками

Чтобы предотвратить попадание неотлинченного кода в репозиторий, используйте husky + lint-staged:

npm install --save-dev husky lint-staged

В package.json добавьте:

"lint-staged": {
  "*.{js,vue,ts}": [
    "eslint --fix"
  ]
}

А затем инициализируйте husky:

npx husky install

Добавьте хук pre-commit:

npx husky add .husky/pre-commit "npx lint-staged"

Теперь линтер запустится при каждом коммите автоматически.

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

Настройка для VS Code

Установите расширение ESLint напрямую из магазина расширений.

В настройках (settings.json) рекомендуется прописать:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue"
  ]
}

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

Интеграция с WebStorm и другими IDE

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

Распространённые правила и расширенные настройки

Теперь давайте посмотрим на самые полезные правила ESLint и то, как их можно индивидуализировать.

Простые примеры правил

rules: {
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // debugger только в проде
  'comma-dangle': ['error', 'always-multiline'], // Запятая в конце многострочных объектов/массивов
  'vue/max-attributes-per-line': [
    'error',
    {
      singleline: 3, // до 3 аттрибутов в строке
      multiline: { max: 1, allowFirstLine: false }
    }
  ]
}

Настройка игнорирования файлов и директорий

Создайте в корне файл .eslintignore. Пример содержимого:

node_modules/
dist/
.nuxt/
coverage/

Можно добавлять любые директории и файлы, которые не должны линтиться.

Расширенная поддержка плагиов

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

npm install --save-dev eslint-plugin-import

В конфиге:

extends: [
  // ...
  'plugin:import/errors',
  'plugin:import/warnings',
  'plugin:import/typescript'
],
plugins: [
  // ...
  'import'
],
rules: {
  'import/order': ['error', { 'groups': [['builtin', 'external', 'internal']] }]
}

Типичные ошибки и способы их решения

• ESLint не находит файлы .vue
  Проверьте, что указали расширение .vue в командной строке и в настройках редактора.

• Конфликты между ESLint и Prettier
  Исправляется путём использования плагина eslint-config-prettier, который выключает конфликтующие правила.

• Отсутствие поддержки новых синтаксических возможностей
  Обновите ESLint, плагины и парсер (например, babel-eslint или @typescript-eslint/parser) до последних версий.

• Медленный запуск линтера
  Проверьте, не добавлены ли в проверку heavy директории (например, с изображениями или сборками).

• Неправильно работает автофикс в редакторе
  Проверьте, что в настройках редактора для ESLint включено автоисправление при сохранении.

Заключение

Настройка ESLint в Nuxt-проекте помогает структурировать рабочий процесс, уменьшить количество багов и повысить качество читаемости кода в команде. Благодаря гибкости конфигурирования вы можете скорректировать линтер под нужды своей команды, а с помощью автоматизации и интеграции с IDE — получить инструмент, который почти не мешает, но всегда предупреждает о проблемах. Постоянное использование линтера помогает избежать деструктивных конфликтов в стиле написания кода и значительно облегчает поддержку проекта в долгосрочной перспективе.

Настройка ESLint - это важный шаг для обеспечения качества кода в Nuxt-проекте. Чтобы создавать действительно мощные и масштабируемые решения, необходимо освоить все аспекты фреймворка, включая работу с сервером, базами данных и API. На нашем курсе Nuxt - fullstack Vue фреймворк вы найдете все необходимые знания и навыки для достижения успеха. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в Nuxt прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Вопрос 1. Как настроить ESLint так, чтобы он не ругался на использование глобальных переменных, которые Nuxt предоставляет по умолчанию, таких как $nuxt, $config?
Ответ: В конфиге стоит явно добавить эти переменные в глобальные. Например: js globals: { '$nuxt': 'readonly', '$config': 'readonly' }

Вопрос 2. Как отключить линтинг для отдельных файлов или строк?
Ответ: Добавьте в нужном месте файл или строку комментарий: js /* eslint-disable */ // отключить для файла // eslint-disable-next-line no-console // отключить одно правило для следующей строки

Вопрос 3. Что делать, если у меня стоит несколько конфиг-файлов ESLint, и настройки не работают как надо?
Ответ: Укажите "root": true в основном конфиге (.eslintrc.js), чтобы сказать ESLint игнорировать другие файлы конфигурации выше по дереву.

Вопрос 4. Как ускорить линтинг, если проект очень большой?
Ответ: Используйте опцию --cache (например, eslint . --ext .js,.vue --cache), чтобы ESLint проверял только изменившиеся с последнего запуска файлы.

Вопрос 5. Почему не работает автофикс для файлов .vue?
Ответ: Проверьте, что установлен плагин eslint-plugin-vue, в командной строке и настройках редактора указано расширение .vue, а также обновлены все плагины до последних версий. Если используете VS Code — активируйте editor.codeActionsOnSave и убедитесь, что расширение ESLint включено.