Airbnb ES Lint + TypeScript + Vue.js + Nuxt.js

Оглавление

• Устанавливаем и разбираем пакеты
• Настраиваем ESLint
  • Настраиваем конфигурационный файл ESLint
  •  editorconfig
• Редактируем package.json
• Создаем vue-shim.d.ts
• Бонус для jetBrains

В данной статье мы установим и настроем линтер ESLint с конфигурационными настройками от команды разработчиков Airbnb. На момент написания этой статьи, github репозиторий правил линтера от Airbnb набрал более 100.000 звезд и почти 20.000 форков, а саму конфигурацию используют многие серьезные организации. Для тех, у кого английский «со со» — есть перевод руководства написания кода от Airbnb. Но я крайне рекомендую читать (учиться читать) английскую документацию. Ну, а если же вы впервые знакомитесь с линтером, то советую сначала загуглить и внимательно прочитать что это и зачем оно нужно.

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

#

Устанавливаем и разбираем пакеты

Воды налили, теперь начинаем установку. Для начала нужно установить все необходимые пакеты:

sudo npm i eslint babel-eslint eslint-config-airbnb-base eslint-plugin-import typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue eslint-plugin-nuxt eslint-import-resolver-nuxt --save-dev

Разберем, что мы установили и зачем оно нам нужно:

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

Не знаю как там в будущем, но на момент написании данной статьи — все пакеты имеют довольно много скачиваний с NPM. Особняком тут конечно стоит пакет eslint-import-resolver-nuxt, я так и не нашел более простого решения для того, чтобы импорты в Nuxt проходили линтерацию. Возможно, когда найду решение, подправлю статейку.

И так, все эти пакеты ставим в devDependencies зависимость, ибо, на кой-фиг они нам в проде? Для совместной работы линтера и Vue, последний компонент нужно установить как зависимость:

sudo npm i vue --save

Сам линтер нужно еще установить глобально для дальнейшей иницилизации:

sudo npm i -g eslint --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

Скорее всего, со временем вопросы и ответы могут меняться. Зеленым я подсветил те варианты ответов, которые обычно я выбираю. Обратите внимание на 5 пункт, в нем я выбираю оба варианта. После всех ответов на вопросы, возможно установщик попросит установить какие-то зависимости — соглашайтесь и устанавливайте.

#

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

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

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

Пройдем по настройкам:

• env — Определяет глобальные переменные среды. Весь список можно изучить в официальной документации.
• extends — Набор правил для расширения базовых правил линтера.
• rules — Правила которые переопределяют или дополняют базовые или расширенные правила линтера.
• parser — Парсер который использует ESLint.
• parserOptions — Параметры для JavaScript.
• plugins — Сторонние плагины.
• settings — Некоторые настройки.

В моем случае, я расширяю правила ESLint правилами от команды airbnb, а так же добавляю правила Vue 3, Nuxt и TypeScript. В качестве общего парсера используется парсер Vue для ESLint. В опциях парсера я установил поддержку ecmaScript 12 и подключил парсер для TypeScript. Отдельно отмечу, что в ключе settings — я установил настройки для импорта файлов в рамках Nuxt (для этого я и использую пакет eslint-import-resolver-nuxt).

#

 editorconfig

Ну и отдельно покажу свой файл .editorconfig:

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

Хотя думаю что он у многих одинаковый.

#

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

Для удобного запуска команд линтера из терминала, нужно добавить в файл 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 — Проверяет файлы проекта согласно настройкам линтера.
• npm run lintfix — Исправляет файлы проекта согласно настройкам линтера.

#

Создаем vue-shim.d.ts

Для того чтобы избежать некоторых ошибок, нужно объявить тип Vue файлов для TypeScript. Для этого в корне проекте создаем файл vue-shim.d.ts со следующим содержимым:

declare module '*.vue' {
  import Vue from 'vue';

  export default Vue;
}

#

Бонус для jetBrains

Для работы с проектами я использую IDE от JetBrains. Это либо phpStorm, либо webStorm. Для удобного форматирования кода согласно настройкам ESLint, можно задать небольшие настройки для IDE. Для начала в настройках нужно включить автоматическое определение настроек ESLint в проекте. Для этого в настройках, в строке поиска вбейте «eslint», после чего укажите «Automatic ESLint configuration»:

Вы можете отметить опцию «Run eslint --fix on save» и при сохранении файлов, правила линтера будут автоматически применяться. Если эта опция вас не устраивает (как например меня, ведь я хочу учиться красивому стайлгайду сам), то можно задать горячие клавиши для линтерации файла. Выбираем File | Settings | Key — и ищем фразу «Fix ESLint Problems» — далее задайте сочетание горячих клавиш данному функционалу и используйте его в файлах когда вам это будет нужно.

На этом все, теперь настройка работы Nuxt.js в окружении с TypeScript и ESLint завершена.