eslint-plugin-rules

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

• recommended-js
• recommended-ts
• recommended-react
• recommended-custom-rules
• recommended-styled-components

Содержание

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

Требования

• ESLint >=8.57.0

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

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

npm uninstall eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-jest eslint-plugin-n eslint-plugin-react eslint-plugin-react-hooks

Установка

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

npm install --save-dev eslint

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

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

Дополнительный парсер не поставляется вместе с плагином. Для js файлов используется парсер по умолчанию из eslint. Если возможностей парсера по умолчанию недостаточно, можете установить один из рекомендованных eslint плагинов:

• для js файлов:
  • esprima
  • @babel/eslint-parser
• при использовании в проекте TypeScript специальный парсер обязателен:
  • @typescript-eslint/parser

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

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

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

Создать новый файл конфигурации или переименовать существующий в eslint.config.cjs

В файле конфигурации необходимо создать следующую структуру:

module.exports = [];

Массив заполняется объектами, содержащими информацию о требуемой конфигурации:

• recommended-js (если установлен jest, то правила для него будут добавлены автоматически);
• recommended-ts;
• recommended-react;
• recommended-custom-rules;
• recommended-styled-components
• языковые настройки languageOptions;
• переопределяемые правила rules:
  • в большинстве случаев можно оставить раздел "rules" пустым;
  • в случае необходимости вы можете переопределять любые правила (подробнее см. Переопределение и дополнение правил);
• игнорируемые файлы и папки ignores:
  • перенести из файла .eslintignore игнорируемые папки и файлы в параметр ignores;
  • удалить файл .eslintignore;
  • папки node_modules, build, dist игнорируются настройками плагина, поэтому в ignores их добавлять нет необходимости;
  • плагин проверяет только файлы с расширением .ts, .tsx, .js, .jsx, .mjs, .cjs, поэтому файлы с иным расширением в ignores можно не указывать.

Пример (eslint.config.cjs)

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

const parser = require('@typescript-eslint/parser');
const rulesPlugin = require('@nsmp/eslint-plugin-rules');
const {configs} = rulesPlugin;

module.exports = [
	...configs['recommended-js'],
	...configs['recommended-ts'],
	...configs['recommended-react'],
	...configs['recommended-custom-rules'],
	{
		languageOptions: {
			parser
		},
		rules: {}
	},
	{
		ignores: [
			'src/stubs/**'
		]
	}
];

recommended-js

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

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

• Плагины (plugins):

  • @stylistic
  • eslint-plugin-import
  • eslint-plugin-jest (подключается опционально, если в проекте идентифицирован установленный jest)
  • eslint-plugin-n
  • eslint-plugin-perfectionist
  • eslint-plugin-promise
  • eslint-plugin-simple-import-sort
  • eslint-plugin-testing-library (подключается опционально, если в проекте идентифицирован установленный @testing-library/dom)

• Правила (rules):

  • рекомендованные правила js
    • непосредственно от eslint
    • часть правил форматирования кода, помеченные eslint как deprecated (устаревшие) заменены на @stylistic правила
  • рекомендованные правила для плагина import
  • рекомендованные правила для плагина jest (подключаются опционально, если в проекте идентифицирован установленный jest)
  • рекомендованные правила для плагина n
  • рекомендованные правила сортировки ключей объектов для плагина perfectionist
  • рекомендованные правила из конфигурации плагина promise
  • рекомендованные правила сортировки импортов для плагина simple-import-sort
  • рекомендованные правила из конфигурации плагина testing-library (подключаются опционально, если в проекте идентифицирован установленный @testing-library/dom)
  • правила, переопределяющие часть рекомендованных

recommended-custom-rules

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

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

recommended-ts

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

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

• Плагины (plugins):
  • @typescript-eslint/eslint-plugin
  • eslint-plugin-perfectionist
• Правила (rules):
  • рекомендованные правила TypeScript
  • рекомендованные правила сортировки типов и интерфейсов для плагина perfectionist
  • правила, переопределяющие часть стандартных для TypeScript.

recommended-react

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

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

• Плагины (plugins):
  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-plugin-testing-library (подключается опционально, если в проекте идентифицирован установленный @testing-library/react)
• Правила (rules):
  • рекомендованные правила из конфигурации плагина react
  • рекомендованные правила из конфигурации плагина react-hooks
  • рекомендованные правила из конфигурации плагина testing-library (подключаются опционально, если в проекте идентифицирован установленный @testing-library/react)
  • правила, переопределяющие часть рекомендованных

recommended-styled-components

Предназначен для проектов, использующих styled-components.

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

• Плагин (plugin):
  • eslint-plugin-better-styled-components
• Правила (rules):
  • правило сортировки CSS-свойств в styled-компонентах

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

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

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

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

rules: {
	'@nsmp/rules/no-fetch-xhr': 'off',
	'@typescript-eslint/no-unused-vars': 'off',
	'jest/valid-expect-in-promise': 'off',
	'react-hooks/exhaustive-deps': 'off',
	'react/jsx-sort-props': 'off',
	'sort-keys': 'off'
}

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

До

Файл .eslintrc

{
	"env": {
		"browser": true,
		"es6": true,
		"jest": true,
		"node": true
	},
	"extends": [
		"plugin:@nsmp/rules/recommended-js",
		"plugin:@nsmp/rules/recommended-ts",
		"plugin:@nsmp/rules/recommended-react",
		"plugin:@nsmp/rules/recommended-custom-rules"
	],
	"ignorePatterns": [
		"/src/stubs/initialInfo.ts"
	],
	"parser": "@typescript-eslint/parser",
	"plugins": [
		"@nsmp/rules"
	],
	"settings": {
		"react": {
			"version": "detect"
		}
	},
	"rules": {
		"@nsmp/rules/no-fetch-xhr": "off",
		"@nsmp/rules/sort-class-methods": "off",
		"@typescript-eslint/no-unused-vars": "off",
		"jest/valid-expect-in-promise": "off",
		"no-multiple-empty-lines": "off",
		"no-undef": "off",
		"prefer-regex-literals": "off",
		"react-hooks/exhaustive-deps": "off",
		"react/jsx-sort-props": "off",
		"react/prop-types": "off",
		"sort-keys": "off"
	}
}

Файл .eslintignore

# IDE
.idea
.vscode

# Node.js
node_modules

# builds
build
*.zip

# git
commiter.sh
log.sh

После (файл eslint.config.cjs)

const parser = require('@typescript-eslint/parser');
const rulesPlugin = require('@nsmp/eslint-plugin-rules');
const {configs} = rulesPlugin;

module.exports = [
	...configs['recommended-js'],
	...configs['recommended-ts'],
	...configs['recommended-react'],
	...configs['recommended-custom-rules'],
	{
		languageOptions: {
			parser
		},
		rules: {
			'@nsmp/rules/no-fetch-xhr': 'off',
			'@nsmp/rules/sort-class-methods': 'off',
			'@typescript-eslint/no-unused-vars': 'off',
			'jest/valid-expect-in-promise': 'off',
			'no-multiple-empty-lines': 'off',
			'no-undef': 'off',
			'prefer-regex-literals': 'off',
			'react-hooks/exhaustive-deps': 'off',
			'react/jsx-sort-props': 'off',
			'react/prop-types': 'off',
			'sort-keys': 'off'
		}
	},
	{
		ignores: [
			'src/stubs/initialInfo.ts'
		]
	}
];

Запуск проверки скриптом из файла package.json

До

"lint": "npx eslint --ext .ts,.js,.tsx -c .eslintrc ./"

После

"lint": "npx eslint ."

Проверка запускается для текущего рабочего каталога, где расположен файл конфигурации.

FAQ

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

Для проекта на Flow данный плагин не предусмотрен.