Дата публикации
15 Декабря 2020
Дата изменения
2 Марта 2021
Уникальных просмотров
6.098

Оглавление

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

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

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

Все эти пакеты ставим в 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? (Какому руководству стиля мы хотим следовать?)
  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 lint

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

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 завершена.

Благодарность автору

Если по какой-либо причине вы хотите поблагодарить автора данного ресурса, вы можете это сделать одним из удобных для вас способов ниже.

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1395 s
Время запросов: 0,1395 s
Количество запросов: 28
Источник: cache