ESLint 是如何集成到 Create React App 中的？

Question

當我運行npx create-react-app...時，會為我創建一個簡單的 React 項目。 然后，當我查看package.json時，似乎有一些 ESLint 存在的證據，如下所示：

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

但是，每當我將 ESLint 安裝為開發依賴項並對其進行配置時（就像我通常做的那樣），VS Code 似乎都能接受它。 在這種情況下，VS Code 似乎無法識別存在/配置的任何類型的 linter。 這並不奇怪，因為 ESLint 不是我剛剛生成的 React 項目的依賴項——至少根據package.json 。 當我嘗試運行eslint. 在項目的根目錄中，它顯示“找不到命令”。

我試圖通過擴展它來為這個 ESLint 配置注入活力，所以現在我有了這個：

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

這沒有任何改變。 我以一種我知道它違反上述配置的方式操縱了源代碼，但是，我沒有收到任何不當行為的信號。

這引出了一個簡單的問題： create-react-app生成的項目是否帶有某種 ESLint 配置，如果是，我該如何正確啟用和擴展它？

當我被提到搜索“create react app eslint”時出現的谷歌排名第一——我顯然已經讀過——讓我澄清一下我的意思：

ESLint 顯然以一種不同的方式集成到 Create React App 中，這與使用like so手動添加到項目中的方式不同。 這不僅可以從發布關於讓兩者一起工作的努力的人數眾多中看出。 這也很明顯...

• ...不能在項目根目錄中運行eslint命令。
• ...ESLint 似乎不是package.json中的依賴項。
• ...VS Code 沒有發現存在 ESLint。
• ...項目根目錄中沒有.eslintrc.*文件。
• ...ETC。

所以：我 go 如何在 Create React App 的上下文中了解 ESLint？ 對於初學者：我如何運行它？ 我該如何擴展它？ 為什么 VS Code 不接收它——即使它通常會注意到 ESLint 的存在？

Answer 1

是的， create-react-app帶有eslint配置。

如何正確啟用和擴展它？

您可以在此處查看如何擴展它。

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

如何啟用它？

您需要將它與您的 IDE 集成。

我如何運行它？

集成后，eslint 服務器將在后台運行，並為您的 IDE 啟用 linting（有時需要重新啟動 IDE）。

---

我在運行npx create-react-app example后檢查了您的所有聲明：

...不能在項目根目錄中運行 eslint 命令。

你可以：

eslint 作為項目依賴項的一部分安裝，只需通過全局運行 eslint ( eslint [cmd] ) 您需要確保它全局安裝（不推薦）。

...ESLint 似乎不是 package.json 中的依賴項。

為什么應該這樣？ 這就是為什么你使用像 CRA 這樣的啟動器。 這是一種內在的依賴，你不必擔心，這是 CRA 的工作。

...VS Code 沒有發現存在 ESLint。

確實如此，檢查OUTPUT選項卡並查找ESLint以查看服務器的輸出。

...項目根目錄中沒有 .eslintrc.* 文件。

您從 CRA 獲得默認配置（它對您隱藏以專注於編碼）。 如果您想覆蓋它，請添加此類文件（您也可以擴展它，請查看文檔）。

---

了解 eslint 究竟是什么以及我們如何使用它進行 React 開發非常有用，請查看相關問題“React hooks 真的必須從“使用”開始嗎？ .

Answer 2

要擴展頂部評論的答案：

...ESLint 似乎不是 package.json 中的依賴項。

為什么應該這樣？ 這就是為什么你使用像 CRA 這樣的啟動器。 這是一種內在的依賴，你不必擔心，這是 CRA 的工作。

使用 create-react-app 創建的項目將具有react-scripts作為依賴項。

react-scripts將eslint作為依賴eslint安裝，如react-scripts package.json 所示。

您可以通過在項目根目錄中運行npm ls <package>來查看是否安裝了包（以及安裝在何處）。

npm ls eslint顯示：

└─┬ react-scripts@4.0.3
  └── eslint@7.21.0 

這顯示了我們通過在 GitHub 中的 react-scripts 中手動調查的依賴關系樹。

所以 - 用 create-react-app 制作的項目確實帶有 eslint。 因為它是一個依賴項，而不是全局安裝的東西，所以它必須使用 npm 腳本運行。

這就是運行eslint .原因eslint . 在您的終端中不起作用，但使用

    "lint": "eslint .",

然后npm run lint可以。 （盡管您可以使用命令eslint --ignore-path .gitignore .由於當前的錯誤）。

同樣，eslint 配置安裝在react-scripts ，然后在默認項目輸出的自己的package.json引用。

Answer 3

每個 Create React App 都通過react-scripts依賴於 ESLint

我相信我已經在以下部分中回答了您的大部分問題。
這是一個摘要。

create-react-app生成的項目是否帶有某種 ESLint 配置？

– 是的，ESLint 已安裝和配置。
（下文第 1 節。）

如何正確啟用和擴展它？

– 它已經啟用。 您完全按照您在問題中已經建議的那樣擴展它，除了您不需要更改extends屬性下的任何內容。
（下文第 1 和第 2 節。）

ESLint 顯然以不同於使用手動添加到項目中的方式集成到 Create React App 中
[ npm install eslint --save-dev和npm init @eslint/config ?]

–不，不是。
再次安裝 ESLint ( npm install eslint --save-dev )會添加
"devDependencies": {
"eslint": "^7.32.0"
}
至package.json 。 但僅此而已。
沒有實際意義，因為"eslint": "^7.32.0"已經通過react-scripts安裝為依賴項。

我建議不要運行npm init @eslint/config ，這是一個創建.eslintrc.*配置文件的命令。 如果您確實運行此命令，請考慮將.eslintrc.*的所有內容移動到package.json下的eslintConfig 。
然后刪除有問題的.eslintrc.*文件。 它可能會為你省去很多痛苦。 ^1個
（下文第 1 和第 5 節。）

無法在項目根目錄中運行eslint命令 [?]

–是的，你可以！
這是npx eslint. --ext.js npx eslint. --ext.js
（下文第 4 節。）

ESLint 似乎不依賴於package.json [?]

–是的，是的！
這種依賴是間接的，因為react-scripts依賴於 ESLint 和許多其他包。
（下文第 1 節。）

VS Code 沒有發現存在 ESLint [?]

–是的，確實如此！ 運行npx eslint. --ext.js npx eslint. --ext.js 。
如果您收到至少一個警告或錯誤，那么您知道您也應該在 VS Code 中看到它。
（下面的第 3 部分——檢查陷阱。）

項目根目錄中沒有.eslintrc.*文件。

–很高興沒有！ 也不要放在那里！
（下文第 5 節。）

0.先決條件

為了能夠回答您的問題，我創建了一個應用程序： ²

npx create-react-app how-is-eslint-integrated-into-create-react-app

然后，我刪除了src子目錄中的所有文件，並插入了我自己的App.js 、 App.css 、 index.js 、 index.css版本，以及包含Button組件的components子目錄。

在package.json我刪除了一些不相關的行，比如"version": "0.1.0",
and "private": true,以及browserslist下的production屬性。

結果package.json ：

{
  "name": "how-is-eslint-integrated-into-create-react-app",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "development": [
      "last 1 chrome version"
    ]
  }
}

兩年多前您寫問題時， eslintConfig屬性是

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

而如今，它是

,
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }

我假設此更改對您提出的問題沒有影響
（除非有人證明我錯了）。

過去兩年的另一個區別——除了版本編號的明顯變化——是添加的web-vitals屬性：

,
    "web-vitals": "^2.1.4"

這是一個 package，用於測量 JavaScript 中的性能指標^。3
因此， web-vitals與您的問題無關。

您可以下載生成的zip 文件，其中包含所有必需的項目文件。

下載后 - 從項目的根目錄（目錄Q59633005 ） - 運行npm install 。
預計需要 4 到 11 分鍾才能完成。

接下來運行npm start 。
期望您的默認 web 瀏覽器打開並且 - 在按下F12之后 - 顯示： ⁴

現在通過點擊Ctrl + C從終端關閉服務器。

看看App.js內部。 內容是：

// App.js
import React, { useCallback, useState } from 'react';
import "./App.css";
import Button from "./components/UI/Button/Button"

function App(unUsedArgument) {
  const [unUsedVariable, setShowParagraph] = useState(true);
  const showParagraphFcn = useCallback(() => {
    setShowParagraph((prevToggle) => !prevToggle);
  },[]);
  console.log("App RUNNING");
  return (
    <div className="app">
      <h1>Hi there!</h1>
      <Button onClick={showParagraphFcn}>A Button</Button>
    </div>
  );
}
export default App;

我現在有項目可以幫助回答您的問題。

1. Visual Studio Code 中的 ESLint

VS Code 似乎無法識別存在/配置的任何類型的 linter。 這並不奇怪，因為 ESLint 不是我剛剛生成的 React 項目的依賴項——至少根據package.json 。

npx npx create-react-app...確實安裝了 ESLint 。

ESLint 深埋在react-scripts package 的依賴樹中。
react-scripts中 ESLint 的頂級節點是eslint-config-react-app 。 ^5個

一些基本配置也是交易的一部分。 所以 ESLint確實開箱即用。

VS Code 在 App.js 的第 7 行顯示unUsedVariable的App.js
（但出於某種原因，第 6 行的unUsedArgument不是）。

在 VS Code 中，期望看到：

2.如何擴展ESLint

如何擴展 [Create React App 中的 ESLint]？

要擴展ESLint，您需要在eslintConfig中的package.json下添加rules ，正如您在問題中已經建議的那樣。

要嘗試您的示例，請替換

,
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }

和

,
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "semi": [
        "error",
        "always"
      ],
      "quotes": [
        "error",
        "double"
      ]
    }
  }

重新啟動 VS Code 后，它仍然在第 7 行顯示unUsedVariable的警告，但現在在第 2 行顯示單引號而不是雙引號的錯誤，並在第 4 行顯示行尾缺少分號的錯誤。

這說明你已經正確回答了如何擴展Create React App。

再舉一個例子，考慮查看package.json | 這個答案的eslintConfig 。

---

3. VS Code 的一些問題

仍然沒有看到上面屏幕截圖中的錯誤和警告？ 這可能行不通，我知道。

要檢查的三個問題：

• 您必須安裝VS Code ESLint 擴展。
• 對package.json進行任何更改后，您必須關閉並重新啟動 VS Code。
  然后等待至少60-100 秒（甚至 2 分鍾），然后再斷定它不起作用。
• 添加"eslint.nodePath": "C:\\Program Files\\nodejs",到 VS Code 中的settings.json 。

4. 一種更快地檢查 ESLint 是否有效的方法

對於初學者：我如何運行它？

答案： ⁶

npx eslint . --ext .js

響應的前四行：

C:\stackexchange\stackoverflow\linting\eslint\Q59633005\src\App.js
 2:46 error    Strings must use doublequote                         quotes
 4:51 error    Missing semicolon                                    semi
 7:10 warning  'unUsedVariable' is assigned a value but never used  no-unused-vars

– 在不到 10 秒的時間內，您將獲得與 VS Code 中相同的錯誤和警告信息。

5. 一句警告

如果您不喜歡難以調試的錯誤，例如
解析錯誤：關鍵字'import'被保留
然后根本不要使用任何.eslintrc.*文件。 ^1個

根據我的經驗，您可以將所有 ESLint 配置放在eslintConfig中的package.json下，如上文第 2 節所述。 –您不需要任何.eslintrc.*文件。

參考

• 每個 Create React App 都通過react-scripts依賴於 ESLint
• 解析錯誤的長答案：保留關鍵字“導入”
• 解析錯誤的簡短回答：保留關鍵字“導入”
• Zip 包含所需項目文件的文件
• NPMGraph - 可視化 NPM 模塊依賴關系
• 帖子包含package.json – 另一個eslintConfig示例
• VS 代碼 ESLint 擴展
• 在 VS Code 中，將"eslint.nodePath": "C:\\Program Files\\nodejs",添加到settings.json
• 解析錯誤：關鍵字'import'被保留

---

¹如果您想知道原因，請將這個長答案與這個簡短答案進行比較。

²我在 Windows 10，但我希望此處提供的所有命令在 Linux 和 macOS 上都能正常工作——除非另有說明。

³您可以通過運行npm ll找到它。

⁴我使用 Google Chrome 版本 98.0.4758.102，64 位。 在 Windows 10 上運行。

⁵我從NPMGraph - Visualize NPM Module Dependencies獲得了這些信息。

⁶或者，如果您使用的是 Microsoft Windows（反斜杠），請使用下面的第一行。
如果您使用的是 Linux 或 macOS（正斜杠），請使用第二行。

 node*modules\.bin\eslint. --ext.js node*modules/.bin/eslint. --ext.js

Answer 4

你的問題很有道理。 我發現這有效：

• 在 VS Code 中使用“npx eslint”（顯示所有選項）或“npx eslint”運行 ESLint。
• 將腳本添加到 package.json "lint": "eslint ." 然后使用'npm run lint'

我沒有將 ESLint 集成到 VS Code 的問題。 為 ESLint 安裝 VS Code 擴展后，我會自動在問題下看到 VS Code 中的警告/錯誤。