Настройка ESLint от Airbnb и Nuxt.js

Оглавление

• Устанавливаем пакеты для ESLint
• Настраиваем ESLint
• Настраиваем конфигурационный файл ESLint
• Редактируем package.json
• Решение проблемы с max-len

В этой статье я расскажу и покажу как настроить проект на Nuxt.js с использованием линтера ESLint от команды Airbnb. При создании проекта на Nuxt.js — вы можете выбрать использовать ли линтер в проекте и если да, то какой. Но я покажу, как подключить линтер в уже существующий проект.

#

Устанавливаем пакеты для ESLint

В кач-ве примера, я создам абсолютно чистый проект на Nuxt.js, без использования линтера или какого-нибудь TypeScript. После установки проекта, нам нужно установить некоторые пакеты для грамотной отработки линтера. Давайте их разберем перед установкой:

• eslint [npm] [Github] —  Основной пакет ESLint.
• eslint-config-airbnb-base [npm] [Github] — Сам пакет с конфигами от команды Airbnb. Обратите внимание, мы используем именно eslint-config-airbnb-base, а не eslint-config-airbnb, т. к. последний разработан для фреймворка React, а мы используем Vue.js / Nuxt.js.
• eslint-plugin-import [npm] [Github] — Этот пакет будет проверять все наши импорты и будет следить за тем, чтобы все импортируемые зависимости присутствовали в проекте.
• eslint-plugin-vue [npm] [Github] — Пакет для линтерации Vue.
  eslint-plugin-nuxt [npm] [Github] — Пакет для линтерации Nuxt.
• eslint-import-resolver-nuxt [npm] [Github] — Пакет для разрешения импорта по умолчанию в ESLint.

Все эти пакеты ставим в devDependencies:

npm i eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue eslint-plugin-nuxt eslint-import-resolver-nuxt --save-dev

Для совместной работы линтера и Vue, нужно установить сам Vue как prod зависимость:

npm i vue --save

#

Настраиваем ESLint

Запускаем команду настройки ESLint:

eslint --init

Далее в терминале нужно будет выбрать настройки:

1. How would you like to use ESLint? (Как мы хотим использовать ESLint?)
   • To check syntax only (только проверять синтаксис)
   • To check syntax and find problems (проверять синтаксис и производить поиск проблем)
   • To check syntax, find problems, and enforce code style (проверять синтаксис, производить поиск проблем и применять стиль кода)
2. What type of modules does your project use? (Какие типы модулей использует наш проект?)
   • JavaScript modules (import/export)
   • CommonJS (require/exports)
   • None of these
3. Which framework does your project use? (Какой фреймворк использует наш проект?)
   • React
   • Vue.js
   • None of these
4. Does your project use TypeScript? (Используем ли в проекте TypeScript?)
   • Yes
   • No
5. Where does your code run? (Где наш код запускается)
   • Browser (Браузер)
   • Node (Нода)
6. How would you like to define a style for your project? (Как бы мы хотели определить стиль своего проекта?)
   • Use a popular style guide (использовать популярное руководство по стилю)
   • Answer questions about your style (ответить на вопросы о собственном стиле)
   • Inspect your JavaScript file (s) (предоставить JS файлы для анализа стиля)
7. Which style guide do you want to follow? (Какому руководству стиля мы хотим следовать?)
   • Airbnb: https://github.com/airbnb/javascript
   • Standard: https://github.com/standard/standard
   • Google: https://github.com/google/eslint-config-google
8. What format do you want your config file to be in? (В каком формате мы хотим использовать конфигурационный файл?)
   • JavaScript
   • YAML
   • JSON

После этого настройщик предложит вам установить следующие зависимости:

The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1

Но мы их уже установили ранее, так что, пропускаем и завершаем настройку.

#

Настраиваем конфигурационный файл ESLint

После установки и настройки ESLint и всех остальных пакетов, в корне проекта должен появиться файл .eslintrc.js. Если этого не случилось (что будет странно), создайте его вручную. Если файл создался автоматически, то вы увидите некоторые настройки в нем.

Дефолтные настройки линтера пригодны для Vue, но не для Nuxt.js. Посему нужно внести некоторые изменения:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'airbnb-base',
    'plugin:vue/essential',
    'plugin:vue/vue3-recommended',
    'plugin:nuxt/recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'vue',
  ],
  rules: {},
  settings: {
    'import/resolver': {
      nuxt: {
        extensions: ['.js', '.vue'],
      },
    },
  },
};

Это настройки я описывал в похожей статье по настройке Nuxt.js + TypeScript + ESLint. По сути, мы расширили конфигурацию линтера правилами для Vue и Nuxt.js. Добавили настройки для импорта .js и .vue файлов и установили Vue парсер.

#

Редактируем package.json

На самом деле, мы уже настроили линтер и все хорошие / современные IDE подхватывают файл настроек линтера (который мы редактировали выше) и проводят линтерацию согласно заданным настройкам. Но будет удобно, если у нас будет пару команд для проверки всего проекта на соответствие правилам линтера. Для этого мы в файл package.json, в параметр scripts, добавим три строчки:

"scripts": {
  ...
  "lint": "npm run lint:js",
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
  "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore ."
},

Далее в терминале пропишем команду:

npm run lint

И в чистом Nuxt.js проекте, я получил следующий результат:

Большинство проблем, можно пофиксить командой:

npm run lintfix

#

Решение проблемы с max-len

Как я уже сказал, многие проблемы линтер может решить самостоятельно. Но есть и исключения, например линтерация по правилу — vue/max-len. Линтер может не устраивать длинна строки и придется решать эту проблему руками, перенося длинную строку на новую.

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

rules: {
  'max-len': ['error', { code: 120 }],
  'vue/max-len': ['error', {
    code: 120,
    template: 100,
  }],
},

Теперь длинна строки кода не должна превышать 120 символов, а длина строки в разметке <template></template> — 100. Это позволит нам немного увеличить строки, что удобно например при использовании @media запросов в CSS или при вставке svg в тело страницы. Воспользоваться ли этим решением или нет — решайте сами.

Про настройку max-len, подробно можно почитать в документации пакета eslint-plugin-vue и в официальной документации ESLint.

На этом настройка ESLint в проекте Nuxt.js завершена.