Главная » Техника

Как настроить airbnb eslint

Содержание
  1. Настройка ESLint от Airbnb и Nuxt.js
  2. Оглавление
  3. Устанавливаем пакеты для ESLint
  4. Настраиваем ESLint
  5. Настраиваем конфигурационный файл ESLint
  6. Редактируем package.json
  7. Решение проблемы с max-len
  8. Благодарность автору
  9. Airbnb ES Lint + TypeScript + Vue.js + Nuxt.js
  10. Оглавление
  11. Устанавливаем и разбираем пакеты
  12. Настраиваем ESLint
  13. Настраиваем конфигурационный файл ESLint
  14. editorconfig
  15. Редактируем package.json
  16. Создаем vue-shim.d.ts
  17. Бонус для jetBrains
  18. Благодарность автору

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

Установка и настройка проекта на Nuxt.js (Vue.js) с использованием линтера ESLint от команды Airbnb.

Оглавление

В этой статье я расскажу и покажу как настроить проект на 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:

Читайте также:  Как можно включить звук если не работает

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

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

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

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

  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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

Установка и настройка линтера ES Lint от команды Airbnb в проект на Nuxt.js / Vue.js с использованием TypeScript.

Оглавление

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

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

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

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

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

  • 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, последний компонент нужно установить как зависимость:

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

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

Теперь смело запускаем команду настройки ESLint:

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

  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 . Если этого не случилось (что будет странно), создайте его вручную. Если файл создался автоматически, то вы увидите некоторые настройки в нем. Удалите все и пропишите следующий конфиг:

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

  • 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).

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

editorconfig

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

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

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

Для удобного запуска команд линтера из терминала, нужно добавить в файл package.json, в параметр scripts три строчки:

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

  • npm run lint — Проверяет файлы проекта согласно настройкам линтера.
  • npm run lintfix — Исправляет файлы проекта согласно настройкам линтера.

#

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

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

Бонус для 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 завершена.

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

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

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

Источник

Оцените статью
© 2024 Настройка и ремонт техники