Используется в проекте React, скомпилированном с использованием Babel и Webpack

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

Ниже приведено пошаговое руководство по настройке работы eslint в проекте webpack.

1. eslint-config-airbnb :

Eslint - это утилита линтинга, которая проверяет код посредством статического анализа, следуя набору правил. Правила можно настроить индивидуально для каждого проекта. Хороший способ начать - использовать руководство по стилю JavaScript Airbnb. Правила Airbnb являются всеобъемлющими и широко используются многими разработчиками в качестве базового стандарта. Для установки на Mac / Linux:

(
export PKG=eslint-config-airbnb;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

Чтобы запустить линтер в проекте:

node_modules/.bin/eslint . --fix

2. eslint-plugin-flowtype

Если в проекте также установлен Flow, Eslint будет жаловаться на аннотации типа Flow. Eslint-plugin-flowtype включает линтинг типов Flow для ESlint.

npm install babel-eslint --save-dev
npm install eslint-plugin-flowtype --save-dev

3. Eslint prettier или eslint-plugin-prettier

Prettier - еще один инструмент, который автоматически форматирует стиль и может конфликтовать с правилами форматирования в Eslint. Иногда возникают конфликты форматов, поскольку правила, применяемые Eslint и Prettier, различаются. Доступны несколько инструментов для решения проблем и интеграции Prettier в рабочий процесс.

Есть несколько способов интегрировать красивее в рабочий процесс.

  1. Расширение текстового редактора. Например, в VSCode Prettier - VSCode поможет отформатировать код при сохранении. После установки prettier-eslint нам необходимо настроить параметры VSCode. Некоторые ключевые настройки:
"editor.formatOnSave": true,    //enables format on save!
"javascript.validate.enable": false,
"javascript.format.enable": false,
"prettier.eslintIntegration": true //uses eslint-prettier as parser

2. используйте eslint-plugin-prettier, чтобы добавить Prettier как правило в Eslint и отключить другие правила, которые могут конфликтовать с eslint-config-prettier

4. Эслинт-загрузчик:

Используя eslint-loader в webpack, мы можем проверять наличие ошибок линтинга каждый раз, когда Babel выполняет транспиляцию. Мы можем просто добавить eslint-loader в файл конфигурации webpack, чтобы обеспечить мониторинг ошибок линтинга в реальном времени.

Примечание: enforce: “pre” необходим, чтобы убедиться, что линтинг выполнен до того, как Babel перенесет код!

module.exports = {
  // ...
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
    ],
  },
  // ...
}