Как расширить правила CRA ESLint с помощью переменной среды EXTEND_ESLINT

Question

Недавно приложение Facebook Create React App (CRA) выпустило новую функцию, которая позволяет расширять базовые правила ESLint.

Мы понимаем, что в некоторых случаях требуется дополнительная настройка. Теперь можно расширить базовую конфигурацию ESLint, установив для переменной среды EXTEND_ESLINT значение true. Настройка вашего редактора

Вот пример, но без подробностей, таких как имя файла или что такое «shared-config».

{
    "eslintConfig": {
        "extends": ["react-app", "shared-config"],
        "rules": {
            "additional-rule": "warn"
        },
        "overrides": [
            {
                 "files": ["**/*.ts?(x)"],
                 "rules": {
                     "additional-typescript-only-rule": "warn"
                 }
             }
        ]
    }
}

функция включается добавленной переменной среды.

EXTEND_ESLINT=true

, но на странице документации она также не дает никакой информации о том, как ее использовать - Расширенные настройки

Я добавил их пример кода в мою сборку в файле с именем .eslintrc.json, но я получаю ошибку сборки:

" Ошибка: конфигурация ESLint в .eslintr c. json недопустима : - Неожиданное свойство верхнего уровня "eslintConfig"."

Кто-нибудь получил это работает? Нужно ли файлу экспортировать модуль?

Answer 1

Хотя это неясно из документации Create-React-App , они приводят пример, как будто конфигурация ESLint проекта находилась внутри свойства eslintConfig файла package.json.

Вам просто нужно настроить ESLint, как описано в его документации . Поэтому, если вы go .eslintrc.json, это должен быть действительный файл конфигурации ESLint, у которого нет свойства eslintConfig.

В этом примере важны только следующие вещи:

• они расширяются от "react-app" до любой другой конфигурации
• любое дополнительное правило установлено на "warn", чтобы избежать остановки проекта из сборки
• при использовании TypeScript Поместите указанную c TS-связанную конфигурацию в раздел "overrides".

Простой .eslintrc.js (обратите внимание на расширение) файл конфигурации для проекта CRA с использованием TypeScript может выглядеть следующим образом:

const defaultRules = [
  'react-app',
  'eslint:recommended',
  // any other plugins or custom configuration you'd like to extend from.
];

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
  },
  extends: defaultRules,
  rules: {
    'array-callback-return': 'warn',
    'consistent-return': 'warn',
    'default-case': 'warn',
    // etc.
  },
  overrides: [
    {
      files: ['**/*.ts', '**/*.tsx'],
      plugins: ['@typescript-eslint'],
      extends: [
        ...defaultRules,
        'plugin:@typescript-eslint/recommended',
        // any other TypeScript specific config (from a plugin, or custom)
      ],
      rules: {
        '@typescript-eslint/no-explicit-any': 'warn',
        '@typescript-eslint/no-unused-vars': 'warn',
        '@typescript-eslint/no-unused-expressions': 'warn',
        // etc.
      },
    },
  ],
  settings: {
    react: {
      // React version. "detect" automatically picks the version you have installed.
      version: 'detect',
    },
  },
};