關於“create-react-app --template typescript”如何與 typescript-eslint 連接的困惑

Question

我使用npx create-react-app my-app --template typescript創建了一個反應項目。 而且我發現默認情況下已經啟用了typescript-eslint 。

我檢查了 package.json 內部的package.json配置

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

我認為為了啟用typescript-eslint ，您需要在package.json或.eslintrc中使用"extends": ["plugin:@typescript-eslint/recommended" 。 但在這種情況下，我在代碼庫中找不到其中任何一個。 我想知道 typescript 的 eslint 是如何啟用的？

Answer 1

CRA 旨在成為設置您的 React 應用程序的一站式商店。 這包括構建配置、文件夾結構以及使用最佳實踐開發 React 應用程序所需的一切。

雖然沒有真正明確列出任何地方，但 CRA 使用eslint-config-react-app配置提供了預配置的 linting 體驗。

在他們的主頁上，他們提到：

在后台，我們使用 webpack、Babel、 ESLint和其他令人驚嘆的項目來為您的應用程序提供動力。 （強調我的）

在 IDE 體驗之類的地方也提到了它，但是以“你應該已經知道這是一件事”的方式： https://create-react-app.dev/docs/setting-up-your-editor/#在編輯器中顯示 lint 輸出

---

對於 typescript 項目，CRA 配置包括來自@typescript-eslint項目的工具，因為它是檢查 typescript 代碼的標准。

如果不使用這個項目，他們會在嘗試 lint typescript 代碼庫時遇到許多問題（最大的問題是它根本不起作用）。

上述文檔包含有關如何根據需要進一步配置 linting 體驗的信息。