禁用 create-react-app 提供的 ESLint

Question

create-react-app v3.0.0 已發布。 它在內部支持 TypeScript linting。 （太好了！）我想我了解 TSLint 開啟的情況，並計划用 ESLint 替換它，但現在不行。

如何禁用react-scripts start中的 linting 步驟？

/* eslint-disable */和其他不是我要找的。

Answer 1

從react-scripts v4.0.2 開始，您現在可以使用環境變量選擇退出 ESLint。 你可以通過將它添加到你的.env文件中，或者在你的 package.json 文件中為你的腳本添加前綴來做到這一點。

例如在.env中：

DISABLE_ESLINT_PLUGIN=true

或者在你的 package.json 中：

{
  "scripts": {
    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
    "test": "DISABLE_ESLINT_PLUGIN=true react-scripts test"
  }
}

https://github.com/facebook/create-react-app/pull/10170

Answer 2

您可以將 EXTEND_ESLINT 環境變量設置為true ，例如在.env文件中：

EXTEND_ESLINT=true

現在您可以在package.json文件中擴展 eslint 配置：

...
"eslintConfig": {
    "extends": "react-app",
    "rules": {
      "jsx-a11y/anchor-is-valid": "off"
    }
  },
...

要禁用 eslint，您可以添加一個包含以下內容的文件.eslintignore ：

*

有關詳細信息，請參閱文檔： https ://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config

Answer 3

您可以使用Craco禁用eslint （並覆蓋其他配置）。

它需要4個更改：

1. npm install @craco/craco --save
2. 創建craco.config.js （在與 package.json 相同的文件夾中）
3. 用以下內容填充craco.config.js ：

module.exports = {
  eslint: {
    enable: false,
  },
};

最后，在你的package.json腳本中用craco替換react-script ，即

"scripts": {
  "build": "craco build",
  "start": "craco start",
}

這將禁用 ESLint。 有關如何擴展 ESLint 配置的示例，請參閱Craco 文檔。

Answer 4

步驟1

如果項目根目錄不存在，則在項目根目錄中創建.env文件並將此行添加到其中

EXTEND_ESLINT=true

第2步

使用以下內容將.eslintrc.js添加到您的項目根目錄

module.exports = {
  "extends": ["react-app"],
  "rules": {
  },
  "overrides": [
    {
      "files": ["**/*.js?(x)"],
      "rules": {
// ******** add ignore rules here *********
        "react/no-unescaped-entities": "off",
        "react/display-name": "off",
        "react/prop-types": "off",
      }
    }
  ]
}

請注意override > rules部分：添加帶有“關閉”標志的規則以禁用它們。

Answer 5

我沒有彈出的解決方法：

1. 在.eslintrc.js中使用環境變量，如下所示：

module.exports = {
    "extends": process.env.REACT_APP_DEV_DISABLE_ESLINT ? [] : [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:json/recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:jsx-a11y/recommended",
      "plugin:react/recommended",
    ],
    "rules": process.env.REACT_APP_DEV_DISABLE_ESLINT ? {} : {
      // ...rules for production CI
    }
}

2. 在package.json的啟動腳本中設置變量：

{
      "scripts": {
          "eslint:disable": "REACT_APP_DEV_DISABLE_ESLINT=true",
          "start": "npm run eslint:disable  react-scripts start"
      }
}

Answer 6

首先確保EXTEND_ESLINT環境變量設置為 true。 可以在.env文件中設置。

對於 Typescript，應在 overrides 數組中添加更多規則，如下例所示：

{
  "eslintConfig": {
    "extends": ["react-app"],
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "eqeqeq": "warn"
        }
      }
    ]
  }
}

Answer 7

我的解決方法：

添加 .eslintignore 文件：

*

並使用--no-ignore運行 eslint。 因此，您可以設置自己的 eslint。 如果你需要一個忽略文件，你可以使用--ignore-path來定義它，而不是使用--no-ignore選項。

Answer 8

一種方法是eject react-scripts - 通過運行yarn eject injection / npm run eject runeject - 並手動關閉eslint配置文件中的webpack 。

請注意，不應輕率地進行彈出，並且在彈出之前應考慮其他選項。 請閱讀不要彈出您的 Create React 應用程序以了解它的含義以及您不應該這樣做的某些原因

請看一下這個分支： create-react-app 仔細看看，尤其是在eject-tic_tac_toe目錄中，你有scripts/start.js - 在yarn start / npm start和config/webpack.config.dev.js - 你有 webpack 的配置，在start.js中使用。 這是您可能有興趣編輯的部分：

// …
module.exports = {
  // …
  module: {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'eslint',
        include: paths.appSrc,
      }
    ]
  }
  // …
};