如何在 VS Code 中的 React 项目中启用导入自动完成功能而无需检查打字稿

问题描述 投票：0回答：5

我正在开发一个没有打字稿的 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

但这并没有帮助。

package.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"
  }
}
javascript reactjs visual-studio-code
5个回答
1
投票

问题已经提出，似乎没有任何有效的修复

以下链接可能会有所帮助：

0
投票

在您的 TSconfig 中，添加此 

"importHelpers": true,  "allowSyntheticDefaultImports": true,

并在您的settings.json中添加以下内容（指定用于导入的路径类型）：

"javascript.preferences.importModuleSpecifier": "relative"

或者，您也可以在 VSCode 中添加此扩展以进行自动导入： 名称： 自动导入 步骤：启动 VS Code 快速打开 (Ctrl+P)，粘贴以下命令，然后按 Enter。

ext install steoates.autoimport
0
投票

您是否尝试过在 tsconfig 中排除目录？如果你排除一个，TS就不会检查它。

0
投票

您在“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": [...]
数组中包含的内容。


《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 必须为 JavaScript 提供类型tsc。因此，当您启用 JS 设置时，
tsc
会从 VS Code 获取类型信息（但这只是理论）。

此外，通常，

"includes"
字段不使用 
"."
作为要包含的内容。这基本上就是说，“在编译时包含我的所有项目”，这是没有意义的，因为通常没有人愿意包含所有内容。整个项目。如果有的话，至少，如果您确实想要 
"include": ["."]
，则至少需要使用“排除”字段，没有理由还包含 
"src"
，因为 
"."
涵盖了源代码。我的建议是删除 
"."
，但如果您出于某种原因保留它，至少排除您的 
node_modules
目录和构建目录，以便 
tsc
知道不要递归地运行检查您的依赖项及其文件生成。

0
投票

面临同样的问题。有谁知道是否可以从 js/jsx 包导入路径自动完成。 IE。 myPackage/JsxComponent.jsx。它可以与 TsxComponent.tsx 一起正常工作，但不能与 jsx 一起工作

import { JsxComponent } from @myPackage
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.