Как расширить Eslint для работы с create-react-app

#javascript #reactjs #eslint

Вопрос:

Я работаю над приложением React, и я хотел бы настроить линтер, чтобы я мог видеть все предупреждения / ошибки в консоли.

В документах мало что говорится:https://create-react-app.dev/docs/setting-up-your-editor /

Я добавил EXTEND_ESLINT=true в свой .env.dev файл, и я также создал .eslintrc.json файл со следующим содержимым (взято из документов):

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

Каждое правило, которое я пытаюсь добавить, ничего не даст, я по-прежнему не вижу предупреждений в консоли, и, кроме того, если я попытаюсь запустить linter из командной строки:

 npx eslint ./src

Я получаю следующую ошибку:

 ESLint configuration in .eslintrc.json is invalid:
    - Unexpected top-level property "eslintConfig".

Чего мне не хватает?

1. Я мало что знаю об eslint, но я готов поспорить, что { "eslintConfig": json у вас есть НЕ для файла .eslintrc.json

2. Это код в документации, если это не для .eslintrc, я не знаю, куда его поместить!

3. Меня очень, очень расстраивает, что так много документации по react и окружающим инструментам на самом деле не говорит вам, в какой файл поместить их пример json. Я чувствую, что это огромная проблема в node.js сообщество инструментов и, вероятно, сообщество разработчиков в целом.

Ответ №1:

Вы можете либо создать .eslintrc.js файл внутри вашей src папки, используя этот синтаксис:

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

Или добавьте это в свой package.json (не в файл .eslintrc.json):

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

1. Спасибо, я думаю, мы приближаемся, теперь, если я запускаю npx eslint ./src , я получаю следующую ошибку: «Не удалось загрузить конфигурацию «shared-config» для расширения. Ссылка из: /Users/xxxxxxxxxx/Workspace/xxxxxxxxxxx/xxxxxxxxx/src/.eslintrc.js »

2. Вероятно, это потому, что у вас нет общей конфигурации, которую вы хотите расширить. Проверьте это: eslint.org/docs/1.0.0/developer-guide/shareable-configs

3. Вам нужно будет заменить ‘shared-config’ на фактическую общую конфигурацию, если это применимо, или заменить «дополнительное правило» на фактическое правило, которое вы хотите добавить. То же самое касается переопределений. Документация CRA должна была прояснить это.

4. Если все, что вы хотите, это добавить пару правил к этому конкретному проекту, общая конфигурация, вероятно, была бы излишней: просто удалите ее и добавьте правила и переопределения по желанию.

Ответ №2:

Вы можете просто добавить правила плагинов и конфигурации внутри package.json без создания переменных .eslintrc.json и env