• @relotus/eslint
  • Описание
  • Подключение в чистый проект без eslint
  • Подключение в проект с уже существующим eslint
  • Решение проблем, если используется react-scrips@4 и ниже

@relotus/eslint

Описание

@relotus/eslint - npm-пакет с общим конфигом eslint для react проектов. У пакета в peerDependencies указаны точные версии пакетов eslint, поэтому нет необходимости добавлять их в devDependencies проекта

Подключение в чистый проект без eslint

Установка:

npm install --save-dev @relotus/eslint-config

Отредактируй файл .eslintrc.js и укажи конфиг eslint

module.exports = {
  extends: '@relotus/eslint-config',
};

Или конкретный (например web)

module.exports = {
  extends: '@relotus/eslint-config/web',
};

Так же в нем нужно указать ссылку на конфиг ts

module.exports = {
  ...
  parserOptions: {  project: './tsconfig.json' },
};

Добавь скрипт

"eslint": "eslint --cache --cache-location \"node_modules/.cache/.eslintcache-local\" --ext js,ts,tsx src",

Для отдельных {типов} файлов можно переопределить набор правил.

ВАЖНО! Переопределение правил на проекте крайне не рекомендуется. Для того, что бы изменить правило - открывайте MR в этот пакет.

module.exports = {
  ...
  overrides: [
    {
      files: ['**/*.stories.tsx'],
      rules: { 'prettier/prettier': 'off' },
    },
    {
      files: ['**/*.{js,jsx}'],
      extends: ['unikorn'],
      rules: { 'no-console-spaces': 'off' },
    },
  ],
};

Или для всех

module.exports = {
  ...
  rules: {
    '@typescript-eslint/no-unused-vars': 'off'
  }
};

Подключение в проект с уже существующим eslint

1. Удали те пакеты eslint, которые уже установлены в проекте
2. Пройди шаги из секции установки eslint в чистый проект
3. Помести новые ошибки под warn с помощью плагина

npm i eslint-plugin-only-warn

в конфиге .eslintrc.js добавить плагин

plugins: ['only-warn'],

4. Удали файл .eslintrc.extended.js и связанные с ним сущности (например, настройки в .vscode/settings.json и переменную EXTEND_ESLINT)
5. В файл .env.production добавь переменную DISABLE_ESLINT_PLUGIN. Билд в gitlab ci падает, если есть warnings, потому что из-за переменной CI=true, которая у нас используются во всех проектах, warnings определяются как errors. React scripts при билде прогоняет eslint еще раз, поэтому warnings будут возникать пока все ошибки eslint не будут устранены. В будущем предлагается эту переменную оставить, так как проверка на линты и так проходит перед каждым билдом.

DISABLE_ESLINT_PLUGIN=true

Решение проблем, если используется react-scrips@4 и ниже

1. Из-за используемого в react-scripts@4 пакета eslint@7 (и ниже) будут конфликты с eslint@8, используемого в этом конфиге. Для фикса создай файл .env с переменной SKIP_PREFLIGHT_CHECK.

SKIP_PREFLIGHT_CHECK=true

2. Индивидуально в каждом проекте нужно обновить версии обычных пакетов, @types/ пакетов и исправить ошибки ts, если при тестировании и сборке возникают ошибки (проверить локально)