如何在 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知道不会递归地运行检查您的依赖项以及它生成的文件。