Eslint config airbnb base как установить

Запрещаем говнокод, или полезные плагины для ESLint

Думаю, многие знают, что в серьёзных проектах в наше время принято использовать специальные инструменты для проверки кода на ошибки и соответствие принятому в команде стилю.

Сегодня я хочу затронуть тему ESLint’а, прекрасного инструмента для проверки JavaScript проектов на наличие ошибок.

Я не буду писать в этой статье об очевидных моментах, вроде настройки eslint’а для вашего проекта: надеюсь, вы сможете самостоятельно прочесть документацию по этой части и подключить его к себе. А здесь мы обсудим, какой дополнительный «обвес» можно подключить к изначальному инструменту и как его можно настроить, чтобы заставить работать его с наибольшей пользой для вас.

eslint-config-airbnb

Сейчас в качестве основы правил мы используем подготовленную конфигурацию с правилами от команды airbnb. Их стандарт написания JavaScript кода сейчас имеет на гитхабе больше 73 тысяч звёзд и используется многими известными организациями. Думаю, ему можно доверять.

Данная конфигурация подключает к проекту сразу несколько важных пакетов: eslint , eslint-plugin-import , eslint-plugin-react , and eslint-plugin-jsx-a11y , содержащих дополнительные правила для валидации вашего кода. Надо заметить, что этот файл конфигурации подразумевает, что вы используете у себя в проекте React.js. Если же это не так, то вы всегда можете установить конфигурацию eslint-config-airbnb-base, которая содержит всё то же самое, за иключением зависимости от плагинов для React.js.

Давайте рассмотрим немного подробнее подключаемые пакеты и узнаем, какие проверки они добавят к коду вашего проекта:

eslint-plugin-import

Данный плагин добавит в ваш проект проверки для всех ваших импортов и будет следить за тем, чтобы все импортируемые зависимости присутствовали в проекте, подключались в удобном для последующей работы порядке, и так далее.

eslint-plugin-react

Плагин позволит писать более правильный код на React.js и убережёт вас от распространнённых антипаттернов, а также заставит вас приписывать ко всем своим компонентам описания принимаемых ими типов данных.

eslint-plugin-jsx-a11y

Данный плагин также относится к проектам на React.js и он также крайне полезен в работе. Он заставит вас писать такой HTML, который будет намного лучше соответствовать стандартам доступности. Ваши проекты станут намного более удобными для людей с ограниченными возможностями.

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

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

Дополнительные плагины для ESLint

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

eslint-plugin-node

Плагин, предназначенный специально для Node.js-проектов. Думаю, многим может пригодиться, если они всё ещё не используют его у себя.

eslint-plugin-lodash

Данный плагин заставит вас «полюбить» Lodash и переписать большую часть нативных JS-методов на методы из Lodash, а также он содержит множество рекомендаций по написанию кода, использующего lodash-цепочки. В общем, очень интересно, но в наш проект я пока что внедрять это не стал просто в силу того, что сейчас нам придётся переписать слишком много кода для соответствия правилам этого плагина. Но на будущее я его себе взял на заметку.

eslint-plugin-compat

Данный плагин позволяет прямо при разработке проверять совместимость написанного вами кода с текущими браузерами, на которые вы ориентируетесь в своём проекте в данный момент. В данный момент я не стал его подключать к своему проекту по причине того, что мы сейчас используем сервис polyfill.io, автоматически подключающий все необходимые полифилы к каждому индивидуальному браузеру, так что проблема совместимости кода в целом как-бы отсутствует. Но на будущее заметку себе тоже делаю: вдруг понадобится?

eslint-plugin-optimize-regex

Плагин, который подскажет вам, как можно оптимизировать ваши регулярные выражения. Почему бы и не установить? Лишним не будет, подумал я.

eslint-plugin-sonarjs

Одна из самых интересных находок из этого списка дополнительных обвесов. Этот плагин содержит целый набор проверок, благодаря которым он находит плохо написанные участки кода, одинаковые функции и просто бессмысленные конструкции, и предлагает их переписать (жаль только, что сам ещё не умеет их переписывать :D). Если вы не любите заниматься декомпозицией своего кода на небольшие ясные блоки и пишете запутанные функции в 100+ строк — ждите предупреждений от данного плагина о том, что когнитивная сложность таких мест в проекте слишком высока для длительной поддержки и должна быть переписана.

eslint-plugin-no-loops

Этот плагин просто будет ругаться на вас в те моменты, когда вы пожелаете писать стандартные циклы for или while . В наши дни уже давно принято использовать forEach , map , reduce , и так далее. Я в целом согласен с автором и подключил плагин в свой проект.

eslint-plugin-no-use-extend-native

Плагин, который запретит вам расширять прототипы стандартных JavaScript объектов. Скажем «нет!» монки-патчам. И это правильно.

eslint-plugin-promise

Плагин, который поможет вам писать правильные промисы и защитит вас от типичных ошибок при работе с ними. Тоже очень даже полезно, я считаю.

Вот такой список плагинов в итоге получился. А что используете в своих проектах вы для проверки вашего кода?

В заключение оставлю пример конфигурации нашего файла .eslintrc из текущего проекта:

.eslintrc

 < "parser": "babel-eslint", "extends": [ "airbnb", "plugin:import/errors", "plugin:import/warnings", "plugin:jsx-a11y/recommended", "plugin:sonarjs/recommended", "plugin:promise/recommended" ], "plugins": ["react", "jsx-a11y", "optimize-regex", "sonarjs", "no-loops", "no-use-extend-native", "promise"], "rules": < "react/jsx-filename-extension": "off", "jsx-a11y/click-events-have-key-events": "off", "import/no-extraneous-dependencies": [ "error", < "packageDir": "./" >], "allowTernary": true, "optimize-regex/optimize-regex": "warn", "sonarjs/cognitive-complexity": ["error", 30], "no-loops/no-loops": 2, "no-use-extend-native/no-use-extend-native": 2, >, "settings": < "import/resolver": "webpack" >>

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

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

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

Оглавление

• Устанавливаем пакеты для 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 символов, а длина строки в разметке — 100. Это позволит нам немного увеличить строки, что удобно например при использовании @media запросов в CSS или при вставке svg в тело страницы. Воспользоваться ли этим решением или нет — решайте сами.

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

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

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

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

Quick Set up Eslint with Airbnb Style Guide.

As simple as setting up eslint is, it can get very confusing, especially when you want to set it up with a shared style guide. In this blog post, I would be explaining how to set up eslint with airbnb style guide and I hope it won’t take more than 5 minutes. I assume you already know what eslint is (check here if you don’t), so let’s get started with setting it up.

Installing Eslint

To set up eslint, the first thing you need to do is, install the eslint npm package (you guessed it). There a lot of resources out there that would advise you to install it globally, however, I would say install it as part of your project dependencies because you might be having some trouble adding shared style guide if you install it globally.

Run this npm install eslint —-save-dev to install eslint

Installing the style guide

The next thing is to install the style guide we want to use, Airbnb. The Airbnb style guide is identified as eslint-config-airbnb in the NPM repository. This style guide has some peer dependencies that must be installed along with it. If you don’t use React, you might want to consider installing eslint-config-airbnb-base which should have lesser peer dependencies.

Run this npm install eslint-config-airbnb —-save-dev to install airbnb style guide

Run this npm info “eslint-config-airbnb@latest» peerDependencies to list all the peer dependencies

You can either install the peer dependencies one after the other or use this shortcut if you have npm version 5+

Run this npx install-peerdeps —dev eslint-config-airbnb peer dependencies(if you have npm version 5+)

Configuring Eslint

We are going to create a configuration file( .eslintrc )for eslint, the file can either be .json or .yml , this file holds the configuration rules that eslint would use to do its linting. Since we want to make use of the Airbnb style guide, this is pretty straight forward, all we need to do is extend the style guide:

If you prefer JSON, the .eslintrc.json file should look like this:

 "extends": "airbnb"
>

If you prefer YML, the .eslintrc.yml file should look like this:

extends: 
- "airbnb"

Testing

To test if it is working, create a test.js file and add this line of code

var a = 4 

Then go to the command line and run this ./node_modules/.bin/eslint test.js you should see the output pointing to the fact that the var keyword is not supposed to be used(according to Airbnb style guide). Note that the command above simply involves changing into the .bin folder in your node_modules and then running the eslint command line tool.
If the output gave what is expected then eslint is set up but if it does not, maybe you want to check if everything went well from the start.

I know you must be thinking, would I have to always type ./node_modules/.bin/eslint file-name every time I want to lint a file, don’t worry, you won’t. I have two workarounds for this; choose the one that suits you.

Using a lint script

The first one is for you to add a lint script to your package.json file like this:

// In your package.json
"scripts": "lint" : "./node_modules/.bin/eslint"
>

so anytime you want to lint a file, just do: npm run lint path/to/file
This is not much of a solution, let’s check the other workaround.

#vscodegang

This workaround is actually dependent on the code editor or IDE you use, I use visual studio code so I am going to discuss how to use it in vscode. This workaround is to install an extension to the code editor that would make the editor use the configuration of eslint you have to lint your codes. I personally use the Eslint extension and it is the only one I can recommend, as soon as you install it make sure you enable it and then restart vscode. If you already set up you eslint properly, when you type codes that contradict the style guide you are using, it would lint it as you type.

Setting up this workaround for any other editor or IDE is pretty much simple, just search for the extension that would enable it and how to set it up.

Conclusion

There is a lot more with regards to using eslint but as I said at the beginning of this blog post, we are just setting it up. To get more on using eslint, I have just one place I can point you to, the Eslint official documentation .

I w̵r̵o̵t̵e̵ updated this blog post with eslint was at version 5.3.0, if you find out that eslint has made some breaking changes in the installation process in some higher versions, you can let me know(ogunniyitunmise@gmail.com) so that I would update this blog post, thank you.

Держи свой код чистым с помощью ESLint

Основы самого популярного JavaScript линтера, который позволяет проводить анализ качества твоего кода.

Tools · 14.02.2019 · читать 2 мин �� · Автор: Alexey Myzgin

Что такое ESLint

ESLint — это линтер для языка программирования JavaScript, написанный на Node.js.

Он чрезвычайно полезен, потому что JavaScript, будучи интерпретируемым языком, не имеет этапа компиляции и многие ошибки могут быть обнаружены только во время выполнения.

ESLint поможет тебе:

• найти существующие ошибки в коде;
• избежать глупых ошибок;
• избежать бесконечные циклы в условиях цикла for;
• убедится, что все методы getter возвращают что-то;
• не разрешить выражения console.log (и аналогичные);
• проверить наличие дубликатов cases в switch ;
• проверить недоступный код;
• проверить правильность JSDoc;

и многое другое! Полный список доступен по ссылке.

Растущая популярность Prettier, как средства форматирования кода, сделала часть стилей ESLint устаревшей, но данный линтер всё еще очень полезен для выявления ошибок в коде.

ESLint очень гибок и настраиваемый, и ты можешь выбрать, какие правила использовать, или какой стиль применять. Многие из доступных правил отключены, но их можно включить в файле конфигурации .eslintrc , который может быть глобальным или локальным для твоего проекта.

Установка ESLint глобально

npm install -g eslint # создает конфигурацционный файл `.eslintrc` eslint --init # запускает ESLint проверку указанного файла eslint yourfile.js

Установка ESLint локально

npm install eslint --save-dev # создает конфигурацционный файл `.eslintrc` ./node_modules/.bin/eslint --init # запускает ESLint проверку указанного файла ./node_modules/.bin/eslint yourfile.js

Установка стилей Airbnb

Одной из самых популярных настроек для линтера является использование Airbnb JavaScript Style.

yarn add --dev eslint-config-airbnb

npm install --save-dev eslint-config-airbnb

что бы установить пакет конфигурации Airbnb и добавь в свой .eslintrc файл который находится в корне твоего проекта:

// .eslintrc  "extends": "airbnb" >

Установка стилей для React

Подключить линтер для React можно легко с помощью плагина React:

yarn add --dev eslint-plugin-react

npm install --save-dev eslint-plugin-react

и добавив в свой файл .eslintrc :

// .eslintrc  "extends": "airbnb", "plugins": ["react"], "parserOptions":  "ecmaFeatures":  "jsx": true > > >

Используй конкретные версии EcmaScript

ECMAScript меняет свою версию каждый год.

По умолчанию установлена 5-я версия, что означает стандарт до 2015 года.

Что бы включить ES6 (или выше), пропиши это в .eslintrc

// .eslintrc  "parserOptions":  "ecmaVersion": 6 > >

Подробное руководство по правилам можно найти на официальном сайте https://eslint.org/docs/user-guide/configuring.

Отключение правил где это необходимо

Иногда тебе может понадобится отключить правила в конкретном месте, это можно сделать так:

/* eslint-disable */ alert("test"); /* eslint-enable */

alert("test"); // eslint-disable-line

также можно отключить одно или несколько конкретных правил для нескольких строк:

/* eslint-disable no-alert, no-console */ alert("test"); console.log("test"); /* eslint-enable no-alert, no-console */

или для одной строки:

alert("test"); // eslint-disable-line no-alert, quotes, semi