> For the complete documentation index, see [llms.txt](https://gpeterhand.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gpeterhand.gitbook.io/react/instrumenty/eslint.md).

# ESLint

Анализатор кода

**Источники**

* RWieruch. [React Code Style with ESLint + Babel + Webpack](https://www.robinwieruch.de/react-eslint-webpack-babel/) \[9 октября 2018]

Устанавливаем ESLint, лоадер и плагины

> yarn add -D eslint eslint-loader babel-eslint eslint-plugin-react

Устанавливаем правила [Airbnb](https://github.com/airbnb/javascript) (на сегодняшний день это самое популярное решение)

> yarn add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

В файл **webpack.config.js** для секции /.js$/ добавим **eslint-loader**

***Примечание:** опция **fix** включает автоматическое исправление*

```javascript
rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['babel-loader',
      {
        loader: 'eslint-loader',
        options: {fix: true}
      }
    ]            
  }
]
```

Создаем файл **.eslintrc**

```javascript
{
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "rules": {
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb-base"
  ]
}
```

Добавляем в файл **.eslintrc** свои настройки

```javascript
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "16.6"
    },
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
```

***Примечание:***

* *env: browser, node - без этого будет ругаться на глобальные переменные браузера, например на document*
* "version" - версия React
* "paths": \["src"] - то же что в **webpack.config.js** resolve.modules = \['src', 'node\_modules']

В секции **rules** можно прописать свои правила, например:

```javascript
  "rules": {
    "class-methods-use-this": [2, {"exceptMethods": ["render"]}],
    "comma-dangle": [2, "never"],
    "semi": [2, "never"],
    "react/react-in-jsx-scope": "off",
    "import/no-unresolved": [2, { "caseSensitive": false }]
  },
```

**Примечание:**

* *class-methods-use-this* - ...
* *comma-dangle - не требует наличие последней запятой в свойствах объектов*
* *semi - не нужны точки с запятой в конце строк*
* ***react/react-in-jsx-scope*** - то же что в **webpack.config.js** ProvidePlugin({ React: 'react'}) ***(лучше прописать. Иначе будет ругаться на отсутствие "import React from 'react'")***
* *import/no-unresolved* - игнорировать регистр символов в конструкциях типа 'import App from './app'' 

Запускаем компиляцию сборки:

> yarn dev

Весь код автоматически проанализируется (при необходимости, исправится). Сообщений об ошибках быть не должно. В противном случае, исправляйте ошибки или изменяете правила в файле **.eslintrc**

***Примечание:***

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

```javascript
/*eslint-disable no-unused-vars*/
...some code...
/*eslint-enable no-unused-vars*/
```