create-react-app — 如何將 EXTEND_ESLINT 設置為 true？

Question

我在我的項目根目錄中創建了一個.env文件，但我不熟悉環境/變量，所以我不確定如何集成該文件，以便我可以覆蓋庫存的、未彈出的 react-app eslint 設置。

// My .env file has just this

EXTEND_ESLINT = "true"

cra 文檔解釋了變量是什么，但不是現在將其設置為 true。 此外，“擴展 ESLint 配置”部分僅在 var 設置為 true 時有用。

// stock create-react-app package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

Answer 1

在項目根目錄下，您可以創建.env文件並將EXTEND_ESLINT設置為true以擴展 ESLint 配置：

EXTEND_ESLINT=true

這也有效：

EXTEND_ESLINT = "true"

嘗試使用create-react-app版本 3.4.1，即撰寫本文時的最新版本。

例如，您可以覆蓋package.json的no-unused-vars規則，如下所示：

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src"
  },
  "eslintConfig": {
    "extends": ["react-app"],
    "rules": {
      "no-unused-vars": "off"
    }
  },
...

現在運行 linter，例如npm run lint ，即使您已將值分配給變量但從未在應用程序中使用它，您也不會看到任何警告，這是您通常會在默認設置中看到的警告。 例如：

const App = () => {
  let myVar = 1; // Never used
  ...
}

注意： npm start和npm run build等也將遵守擴展規則。

---

順便說一下，原來的package.json看起來是這樣的：

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
...

注意：另一種配置 ESLint 的方法是從package.json文件中刪除eslintConfig條目，並在項目根目錄中創建.eslintrc或.eslintrc.json如下：

{
 "extends": ["react-app"],
 "rules": {
   "no-unused-vars": "off"
 }
}

---

[更新]如果您發現 react-scripts 不遵守您對 ESLint 規則的更改，這很可能是由緩存引起的。 目前這是該項目的一個未決問題。 您可以在node_modules/react-scripts/config/webpack.config.js手動禁用緩存，如下所示：

          use: [
            {
              options: {
                cache: true, // You can set it to false
                formatter: require.resolve('react-dev-utils/eslintFormatter'),
                eslintPath: require.resolve('eslint'),
                resolvePluginsRelativeTo: __dirname,
                // @remove-on-eject-begin
                ignore: isExtendingEslintConfig,
                baseConfig: isExtendingEslintConfig
                  ? undefined
                  : {
                      extends: [require.resolve('eslint-config-react-app')],
                    },
                useEslintrc: isExtendingEslintConfig,
                // @remove-on-eject-end
              },

請注意，此解決方法僅適用於您的本地開發。 您很可能不需要為構建管道做任何事情，因為管道通常從頭開始構建； 所以沒有這樣的緩存問題。

Answer 2

經過幾個小時的努力，感謝@Yuci，我的 eslint 終於理解了我的配置。

我沒有直接修復node_modules/react-scripts/config/webpack.config.js的包文件， node_modules/react-scripts/config/webpack.config.js添加了 npm 腳本，以始終在npm run start和npm run build npm run start清除緩存。 這樣您就不必擔心將來會“意外”通過rm -rf node_modules; npm install rm -rf node_modules; npm install未來的我沒那么聰明。

在packages.json ，更改腳本實體，如下所示：

  "scripts": {
    "start": "npm run clear_cache:eslint && react-scripts start",
    "build": "npm run clear_cache:eslint && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "clear_cache:eslint": "rm -rf node_modules/.cache/eslint-loader"
  },

Answer 3

一個簡短的答案是在script命令中內聯，例如

{
  "scripts": {
    "start": "EXTEND_ESLINT=true react-scripts start"
  }
}

但這不太理想，因為您還必須將EXTEND_ESLINT=true添加到所有其他react-script命令