@hubex/power-linter

Описание

@hubex/power-linter — пакет пресетов конфигураций для ESLint и Prettier, кастомных правил линтирования и codemode-скриптов. Позволяет переносить одни и те же пресеты конфигураций для EsLint и Prettier, скрипты и правила , не дублируя их в репозиториях проектов.

Содержит правила из плагинов: "eslint-config-airbnb", "eslint-config-prettier", "eslint-plugin-import", "eslint-plugin-jsx-a11y", "eslint-plugin-power-esrules", "eslint-plugin-react", "eslint-plugin-react-hooks".

Содержит codemod-скрипты:

1. Для добавления data-аттрибута "data-testid" (add-data-testid.js) в jsx-компоненты проекта.
2. Для преобразования классовых React-компонентов в функциональные (class-to-functional.js).

Содержит экспортируемые функции:

1. initStableIds - для обвязки всего DOM-дерева уникальными data-test аттрибутами в реальном времени.
2. clearRepeatedKeysCountsMap - для очистки карты индексов для data-test аттрибутов.

Статус: в разработке.

Содержание

• Описание
• Технологии
• Требования
• Интеграция
• Рекомендации

Технологии

• JavaScript
• ...

Требования

Eslint требуется не ниже версии 8.0.0. Prettier требуется не ниже версии 2.6.2.

Интеграция

Для интеграции в проект предварительно необходимо:

0. Установить EsLint и Prettier:

$ npm i eslint
$ npm i prettier

1. Установите npm-пакет с помощью команды:

$ npm install @hubex/power-linter --save-dev

2. Добавьте экспорт конфигурации eslint:

// .eslintrc.js
module.exports = require('@hubex/power-linter/src/eslint/config');

3. Добавьте экспорт конфигурации Prettier:

// .prettierrc.js
module.exports = require('@hubex/power-linter/src/prettier/config');

4. Для портирования настроек vscode (если необходимо) в каталоге .vscode создайте файл settings.json и добавьте в него следующие настройки:

// settings.json
{
"eslint.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"eslint.run": "onType",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true
},
"eslint.lintTask.enable": true,
"eslint.workingDirectories": [
{
"mode": "auto"
}
]
}

5. Для добавления data-testid аттрибутов добавьте в package.json в раздел scripts:

// package.json
{
  "scripts": {
      "generate-data-testid": "node node_modules/@hubex/power-linter/scripts addDataTestId/run-codemod.js src",
  },
}

6. Для добавления data-test аттрибутов добавьте в код рутового React-компонента:

import { clearRepeatedKeysCountsMap, initStableIds } from '@hubex/power-linter';
// ...
 useEffect(() => {
      initStableIds();
  }, []);
  useEffect(() => () => clearRepeatedKeysCountsMap(), []);

Рекомендации

При использовании initStableIds производятся множественные прямые манипуляции с DOM-деревом, необходимые для тестирования и отладки. Поэтому рекомендуется ограничить запуск функции initStableIds в prod-окружении.