ESLint — важнейший инструмент для поддержания качества кода в React-приложениях. Рассмотрим полный процесс настройки.
Базовые зависимости для React-проекта:
npm install eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @babel/eslint-parser --save-dev
Для TypeScript-проектов дополнительно:
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
Создаем конфигурационный файл:
npx eslint --init
Или вручную создаем .eslintrc.json
:
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended"
],
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module",
"requireConfigFile": false
},
"plugins": ["react", "react-hooks", "jsx-a11y"],
"rules": {
"react/prop-types": "off",
"react/react-in-jsx-scope": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
},
"settings": {
"react": {
"version": "detect"
}
}
}
{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended"
],
"plugins": ["@typescript-eslint", "react", "react-hooks"],
"rules": {
"@typescript-eslint/explicit-function-return-type": "off",
"react/prop-types": "off"
}
}
Для совместной работы с Prettier:
npm install eslint-config-prettier eslint-plugin-prettier --save-dev
Добавляем в конфиг:
{
"extends": [
// другие расширения
"plugin:prettier/recommended"
]
}
Пример полезных правил для React:
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/jsx-filename-extension": ["warn", { "extensions": [".jsx", ".tsx"] }],
"react/self-closing-comp": "warn",
"react/jsx-curly-brace-presence": ["warn", { "props": "never", "children": "never" }],
"no-console": "warn",
"no-unused-vars": "warn"
}
Создаем .eslintignore
:
node_modules/
build/
dist/
*.config.js
public/
coverage/
Добавляем полезные команды:
"scripts": {
"lint": "eslint src/",
"lint:fix": "eslint --fix src/",
"lint:watch": "esw --watch src/"
}
Настройки для автоматического исправления:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}
Например, Airbnb-стиль:
npx install-peerdeps --dev eslint-config-airbnb
И добавляем в конфиг:
{
"extends": ["airbnb", "airbnb/hooks"]
}
Для правильной настройки ESLint в React-проекте:
Правильно настроенный ESLint поможет: