如何在 VS Code 中的 React 項目中啟用導入自動完成而不需要檢查打字稿

Question

我正在開發一個沒有打字稿的 React 項目，其中導入自動完成功能不起作用。 我的意思是我沒有導入組件的選項：

這是 jsconfig.json：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "esnext",
    "module": "esnext",
    "types": ["node", "jest"],
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": false
  },
  "include": [".", "src"]
}

如果我啟用"checkJs": true ，則導入自動完成工作：

問題是現在我的項目中出現了打字稿錯誤，但我不想在我的項目中檢查打字稿：

我試圖在根項目的文件夾中禁用.vscode/settings.json中的打字稿，如下所示：

  "tslint.enable":false,
  "typescript.validate.enable": false,
  "javascript.validate.enable": false

但這沒有幫助。

包.json

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@fullcalendar/daygrid": "^5.11.0",
    "@fullcalendar/interaction": "^5.11.0",
    "@fullcalendar/react": "^5.11.1",
    "@stripe/react-stripe-js": "^1.7.0",
    "@stripe/stripe-js": "^1.24.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "antd": "^4.19.1",
    "axios": "^0.26.1",
    "card-validator": "^8.1.1",
    "clsx": "^1.1.1",
    "env-cmd": "^10.1.0",
    "formik": "^2.2.9",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
    "moment-timezone": "0.5.34",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-calendly": "^4.0.1",
    "react-dom": "^17.0.2",
    "react-dropzone": "^14.2.1",
    "react-lines-ellipsis": "0.15.0",
    "react-lottie": "^1.2.3",
    "react-phone-number-input": "3.2.2",
    "react-player": "^2.10.0",
    "react-responsive": "9.0.0-beta.8",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "react-spinners": "^0.12.0",
    "rooks": "5.11.2",
    "sass": "^1.49.9",
    "web-vitals": "^2.1.0",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts --max_old_space_size=4096 start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "build:development": "env-cmd -f .env.development react-scripts --max_old_space_size=4096 build",
    "build:qa": "env-cmd -f .env.qa react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint -c .eslintrc.cjs --ext .js,.jsx .",
    "lint:fix": "npm run lint -- --fix"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "8.17.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-prettier": "4.0.0",
    "prettier": "2.6.2"
  }
}

Answer 1

該問題已經提出，似乎沒有任何有效的修復

以下鏈接可能會有所幫助：

• 快速修復彈出窗口停止為 JS #1326 建議“添加缺少的導入”

• vscode-eslint 不適用於 eslint-import-resolver-typescript@2.0.0 #944

Answer 2

在你的 TSconfig 中，添加這個"importHelpers": true, "allowSyntheticDefaultImports": true,

並在您的 settings.json 添加此（指定用於導入的路徑類型）： "javascript.preferences.importModuleSpecifier": "relative"

或者，您也可以在 VSCode 中添加此擴展以進行自動導入：名稱：自動導入步驟：啟動 VS Code 快速打開 (Ctrl+P)，粘貼以下命令，然后按 Enter。

ext install steoates.autoimport

Answer 3

您是否嘗試過排除 tsconfig 中的目錄？ 如果你排除一個，TS不會檢查它。

Answer 4

您在 "types": [] 字段中包含類型，但您沒有將這些類型安裝為依賴項。 您需要通過以下命令將類型安裝為devDependencies ：

$ npm i -D @types/node @types/jest @types/react @types/react-dom @types/react-responsive`

使用"types": ["foo", "bar", etc...]不會添加這些類型、從 URL 中獲取它們或生成它們。 您仍然必須手動將它們添加到您的項目中。 即使這樣， "type":[...]字段也更多地用於排除類型而不是包含它們。 將其視為“包含”字段，但用於類型。 與"includes"字段一樣，“types”字段排除了所有內容，除了您包含在"types": [...]數組中的內容。

“TypeScript 參考手冊”是這樣說的：

---

如果指定了types ，則僅列出的類型包將包含在全局范圍內。 例如：

 { "compilerOptions": { "types": ["node", "jest", "express"] } }

此 tsconfig.json 文件將僅包含 ./node_modules/@types/node、./node_modules/@types/jest 和 ./node_modules/@types/express。 node_modules/@types/* 下的其他包將不包括在內。

---

TypeScript 需要類型來提供類型信息。 讓我感到困惑的奇怪事情是，為什么當您使用 JavaScript 設置時，您能夠獲得類型信息，即使沒有安裝正確的類型。 您的一些包裹已經輸入。 如果我不得不猜測，我認為當你添加“allowJS”和“checkJS”時，你會得到類型信息，因為 VS Code 為 JavaScript 提供了類型，使用 TypeScript 的tsc編譯器來完成，這意味着 VS Code 必須為 tsc 提供類型。 因此，當您啟用 JS 設置時， tsc會從 VS Code 獲取類型信息（但這只是一個理論）。

此外，通常， "includes"字段不使用"." 作為包括什么。 這基本上是在說“編譯時包含我的所有項目” ，這沒有意義，因為通常沒有人想要包含所有內容。 整個項目。 如果有的話，至少，如果你真的想"include": ["."] ，你至少會想要使用“排除”字段，因為"."沒有理由也包括"src" ”。 涵蓋來源。 我的建議是刪除"." ，但是如果您出於任何原因離開它，至少排除您的node_modules目錄和您的構建目錄，以便tsc知道不會遞歸地運行檢查您的依賴項以及它生成的文件。