有没有办法在不弹出的情况下为 create-react-app 更改 webpack 的 eslint

Question

我想在不弹出的情况下更改反应应用程序的 eslint 规则。

Answer 1

我们可以通过以下 3 个简单步骤添加新的 ESLint 规则。

1. 在项目的 src 文件夹下创建 .eslintrc.js。

2. 在文件中添加以下几行：

   module.exports = { "extends": "react-app", "rules" : { "indent": ["error", 4] // 例如自定义样式相关规则 // 此处有更多自定义规则 } }

这样，我们将告诉我们的 IDE 扩展 create-react-app 提供的基本 ESLint 规则，然后遵循我们定义的一些规则。

3. 在您的package.json ，添加以下脚本：

   "lint:fix": "eslint src/**/*.js --fix",

这主要是针对 CLI 和 CI/CD 环境的。

现在大多数 IDE 的默认设置是它们将从 src/.eslintrc.js 读取配置。 因此，您现在也应该在 IDE 上看到来自自定义 eslintrc 文件的错误/警告

Src - http://rahulgaba.com/front-end/2019/02/17/Use-custom-eslint-config-in-create-react-app-using-three-simple-steps-No-external-dependencies。 html

Answer 2

将.eslintrc文件添加到项目的根目录，并在其中扩展eslint-config-react-app并添加您的规则/覆盖，例如

// .eslintrc
{
  "extends": "react-app",
  "rules": {
    // enable additional rules or override from react-app
    "indent": ["error", 4],