Дата публикации
5 Ноября 2020
Дата изменения
12 Ноября 2020
Уникальных просмотров
55

Оглавление

В данной статье мы установим и настроем линтер 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

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

Не знаю как там в будущем, но на момент написании данной статьи — все пакеты имеют довольно много скачиваний с 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? (Какому руководству стиля мы хотим следовать?)
  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'],
      },
    },
  },
};

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

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

Все настройки и их описание можно изучить в официальной документации ESLint.

 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 ."
  },

Теперь нам доступны две команды:

Создаем 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»:

Включаем автоматическое определение настроек ESLint в phpStorm/webStorm

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

Установка горячих клавиш для ESLint в phpStorm/webStorm

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

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

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

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

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