Как ESLint интегрируется в приложение Create React?

Question

Когда я запускаю npx create-react-app ..., для меня создается голый проект React. Когда я заглядываю в package.json, кажется, что есть некоторые свидетельства присутствия ESLint, а также:

"eslintConfig": {
  "extends": "react-app"
},

Однако всякий раз, когда я устанавливаю ESLint как зависимость dev и настраиваю ее - как я обычно делаю - VS Code, кажется, подхватил его. В этом случае VS Code, похоже, не распознает наличие / настройку какого-либо вида линтера. Это неудивительно, так как ESLint не является зависимостью от проекта React, который я только что сгенерировал - по крайней мере, не в соответствии с package.json. Когда я пытаюсь запустить eslint . в каталоге проекта root, появляется сообщение «команда не найдена».

Я пытался вдохнуть жизнь в эту конфигурацию ESLint, расширив ее, поэтому теперь у меня есть следующее:

"eslintConfig": {
  "extends": ["react-app", "eslint:recommended", "google"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
   }
},

Это ничего не меняет. Я манипулировал исходным кодом так, что я знаю, что он нарушает указанную выше конфигурацию, но мне не сообщалось о каких-либо нарушениях.

Это приводит меня к простому вопросу: Проекты генерируются create-react-app поставляются с какой-то конфигурацией ESLint, и, если да, как мне включить и расширить ее правильно?

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

Очевидно, что ESLint интегрируется в Create React App не так, как если бы он был добавлен в проект вручную, используя , например, . Это видно не только по количеству людей, которые пишут о своей борьбе за то, чтобы заставить их работать вместе. Это также очевидно, поскольку ...

• ... в проекте нельзя выполнить команду eslint root.
• ... Кажется, что ESLint не работает зависимость внутри package.json.
• ... VS Код не обнаруживает, что присутствует ESLint.
• ... в проекте нет файла .eslintrc.* root.
• ... et c.

Итак: Как мне go узнать о ESLint в контексте Create React App? Для начала: как мне его запустить? Как мне его расширить? И почему VS Code не подхватывает его - хотя обычно он замечает наличие ESLint?

Answer 1

Да, create-react-app поставляется с eslint config.

Как правильно включить и расширить его?

Вы можете проверить, как его расширить здесь .

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

Как включить его?

Вам необходимо интегрировать его с вашей IDE .

Как мне его запустить?

После его интеграции сервер eslint будет работать в фоновом режиме и включит линтинг для вашей IDE.

---

Я проверил все ваши заявки после запуска npx create-react-app example:

... нельзя запустить команду eslint в проекте root.

Вы можете :

... Кажется, что ESLint не является зависимостью внутри пакета. json.

Почему так должно быть? Вот почему вы используете стартер, такой как CRA.

... VS Код не обнаруживает наличие ESLint.

Он делает:

... в проекте нет файла .eslintr c. * root.

С чего бы это? Вы получаете конфигурацию по умолчанию от CRA. Добавьте файл, если хотите переопределить его.