eslint-plugin-rules

Плагин предоставляет несколько конфигураций ESLint:

• recommended-js
• recommended-ts
• recommended-react
• recommended-custom-js

Содержание

• Требования
• Подготовка к установке
• Установка
• Использование
• Переопределение и дополнение правил
• FAQ

Требования

• ESLint 7.11.0 версии и выше

Подготовка к установке

Во избежание конфликтов рекомендуется удалить некоторые зависимости, так как они устанавливаются вместе с плагином:

• При дальнейшем использовании конфигурации recommended-js выполните следующую команду:

npm uninstall eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

• При дальнейшем использовании конфигурации recommended-ts выполните следующую команду:

npm uninstall @typescript-eslint/eslint-plugin

• При дальнейшем использовании конфигурации recommended-react выполните следующую команду:

npm uninstall eslint-plugin-react eslint-plugin-react-hooks

Установка

Установите или обновите ESLint:

npm install --save-dev eslint

Установите eslint-plugin-rules:

npm install --save-dev @nsmp/eslint-plugin-rules

Обновите используемый парсер:

• @typescript-eslint/parser - до версии 6.0.0 или выше
• @babel/eslint-parser - до версии 7.24.0 или выше
• babel-eslint (устарел) - заменить на @babel/eslint-parser

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

• удалите package-lock.json
• удалите node_modules/
• в некоторых случаях очистите кэш командой npm cache clean --force
• установите все зависимости командой npm install

Использование

В файле конфигурации eslint:

1. В разделе "extends" удалите:
   • eslint:recommended
   • standard
   • plugin:react/recommended
   • plugin:promise/recommended
2. В разделе "plugins" удалите:
   • @typescript-eslint,
   • promise
   • react
   • react-hooks
   • standard
3. В большинстве случаев можно оставить раздел "rules" пустым, однако в случае необходимости вы можете переопределять любые правила. Подробнее см. Переопределение и дополнение правил

Добавьте eslint-plugin-rules в раздел "extends" файла конфигурации ESLint, а также в раздел "plugins". Доступные конфигурации для раздела extends:

• recommended-js
• recommended-ts (включает в себя recommended-js)
• recommended-react (включает в себя recommended-js)
• recommended-custom-js

Пример (.eslintrc)

В примере ниже подключены все доступные конфигурации eslint-plugin-rules, вам необходимо выбрать подходящие для вашего проекта:

{
  "extends": [
    "plugin:@nsmp/rules/recommended-js",
    "plugin:@nsmp/rules/recommended-ts",
    "plugin:@nsmp/rules/recommended-react",
    "plugin:@nsmp/rules/recommended-custom-js"
  ],
  "plugins": [
    "@nsmp/rules"
  ]
}

recommended-js

Предназначен для проектов, написанных на JavaScript.

Этой конфигурации соответствуют:

• Плагины (plugins):
  • eslint-config-standard
  • eslint-plugin-promise
• Расширения (extends):
  • eslint:recommended
  • standard
  • plugin:promise/recommended
• Правила, переопределяющие часть рекомендованных и стандартных.

recommended-custom-js

Включает правила, которых нет в стандартной конфигурации ESLint:

• no-fetch-xhr - правило, запрещающее использование fetch и XMLHttpRequest при разработке
• potential-xss - правило для предупреждения об XSS уязвимости
• sort-class-methods - правила сортировки методов в классе
• sort-imports - правила сортировки импортов

recommended-ts

Предназначен для проектов, написанных на TypeScript.

Этой конфигурации соответствуют:

• Конфигурация recommended-js
• Плагины (plugins):
  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
• Правила, переопределяющие часть стандартных для TypeScript.

recommended-react

Предназначен для проектов, написанных на React.

Если в проекте используется TypeScript, пакет recommended-ts необходимо подключить отдельно:

{
  "extends": [
    "plugin:@nsmp/rules/recommended-react",
    "plugin:@nsmp/rules/recommended-ts"
  ]
}

Этой конфигурации соответствуют:

• Конфигурация recommended-js
• Плагины (plugins):
  • eslint-plugin-react
  • eslint-plugin-react-hooks
• Расширения (extends):
  • plugin:react/recommended
  • plugin:react-hooks/recommended
• Правила, переопределяющие часть рекомендованных от плагинов react.

Переопределение и дополнение правил

Вы можете управлять режимом работы любых правил, которые поставляются любой из конфигураций:

• стандартные правила ESLint
• правила любого из включенных плагинов
• кастомные правила

Для этого достаточно указать нужное значение правила в разделе "rules":

{
  "rules": {
    "semi": ["warn", "always"],
    "promise/no-return-wrap": "error",
    "@nsmp/rules/no-fetch-xhr": "error"
  }
}

Пример подключения плагина

До (файл .eslintrc)

{
  "extends": [
    "eslint:recommended",
    "standard",
    "plugin:react/recommended",
    "plugin:promise/recommended",
    "plugin:flowtype/recommended"
  ],
  "parser": "babel-eslint",
  "plugins": [
    "eslint-custom-rules",
    "flowtype",
    "promise",
    "react",
    "standard"
  ],
  "rules": {
    "curly": ["error", "all"],
    "indent": [
      "error",
      "tab",
      {
        "SwitchCase": 1
      }
    ],
    "brace-style": ["error", "1tbs"],
    "eslint-custom-rules/sort-class-methods": "error",
    "eslint-custom-rules/sort-imports": "error",
    "no-extend-native": ["error", {"exceptions":  ["String"]}],
    "no-param-reassign": "error",
    "no-tabs": 0,
    "semi": ["error", "always"],
    "flowtype/semi": ["error", "always"],
    "comma-dangle": ["error", "never"],
    "flowtype/delimiter-dangle": ["error", "never"],
    "multiline-ternary": ["error", "always-multiline"],
    "operator-linebreak": ["error", "before"],
    "object-curly-spacing": ["error", "never"],
    "react/jsx-sort-props": [
      2,
      {
        "noSortAlphabetically": false
      }
    ],
    "quote-props": ["error", "consistent"]
  }
}

После (файл .eslintrc)

{
  "extends": [
    "plugin:@nsmp/rules/recommended-custom-js",
    "plugin:@nsmp/rules/recommended-react",
    "plugin:flowtype/recommended"
  ],
  "parser": "@babel/eslint-parser",
  "plugins": [
    "@nsmp/rules",
    "flowtype"
  ],
  "rules": {
    "flowtype/semi": ["error", "always"],
    "flowtype/delimiter-dangle": ["error", "never"]
  }
}

FAQ

Как использовать плагин в проекте с flow?

• Для текущего плагина минимальная версия ESLint 7.11.0. Если ваш плагин eslint-plugin-flowtype несовместим с ESLint 7.11.0, то рекомендуется обновить eslint-plugin-flowtype на версию 8+
• Плагин eslint-plugin-flowtype версии 8+ требует ESLint 8.1.0, т.е. потребуется обновить ESLint до версии 8.1.0 и выше.
• Если в .eslintrc в разделе "parser" указан babel-eslint, его следует заменить на @babel/eslint-parser. Соответственно зависимость babel-eslint следует удалить, а @babel/eslint-parser установить.
• Обратите внимание, что плагин @babel/plugin-proposal-object-rest-spread считается устаревшим. Его можно оставить, обновив до последней версии, но лучше заменить плагином @babel/plugin-transform-object-rest-spread. В случае замены необходимо указать его в файле .babelrc (в разделе "plugins").