Frontend linters

Пакет с пресетами конфигураций линтеров.

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

Установка

# npm
$ npm i -D @sima-land/linters eslint stylelint prettier

# или yarn
yarn add -D @sima-land/linters eslint stylelint prettier

Конфигурация

ESLint

Создать в корне проекта файл eslint.config.mjs или eslint.config.ts со следующим содержимым:

import { defineConfig } from 'eslint/config';
import simaland from '@sima-land/linters/eslint';

export default defineConfig(
  // используем все правила из пакета, собранные вместе
  simaland,

  // ...опционально переопределяем правила
);

Правила разбиты по модулям:

• @sima-land/linters/eslint/base - базовые правила JS
• @sima-land/linters/eslint/typescript - базовые правила TS
• @sima-land/linters/eslint/react - правила React/JSX
• @sima-land/linters/eslint/lodash - правила работы с Lodash
• @sima-land/linters/eslint/jest - правила работы с Jest
• @sima-land/linters/eslint/testing-library - правила работы с Testing Library
• @sima-land/linters/eslint/playwright - правила работы с Playwright
• @sima-land/linters/eslint/jsdoc - правила оформления JSDoc
• @sima-land/linters/eslint/jsdoc-ts - правила оформления JSDoc в TS
• @sima-land/linters/eslint/jsdoc-jest - правила оформления JSDoc в тестах Jest
• @sima-land/linters/eslint - все правила вместе

Stylelint

Создать в корне проекта файл .stylelintrc со следующим содержимым:

{
  "extends": "@sima-land/linters/stylelint",

  "rules": {
    // ...опционально переопределяем правила
  }
}

Prettier

Создать в корне проекта файл .prettierrc со следующим содержимым:

"@sima-land/linters/prettier"

Настройка git-хуков

Удобно использовать husky в связке с lint-staged, для этого необходимо:

1. Установить пакеты

   npm i -D husky lint-staged

2. Создать в корне проекта файл lint-staged.config.js со следующим содержимым:

   {
     '*.{mjs,js,jsx,ts,tsx}': ['eslint --fix'],
     '*.{css,scss}': ['stylelint --fix'],
     '*': ['prettier --write --ignore-unknown'],
   };

3. Добавить pre-commit хук согласно документации husky: npx lint-staged

   https://typicode.github.io/husky/#/?id=create-a-hook

Конфигурация текстовых редакторов и IDE

Актуальная информация в официальных документациях:

• https://eslint.org/docs/user-guide/integrations
• https://stylelint.io/awesome-stylelint/#editor-integrations
• https://prettier.io/docs/en/editors.html