Visual Studio代码自动导入

Question

我正在从Webstorm迁移到Visual Studio Code.Webstorm中的表现非常糟糕.

Visual Studio代码对于找到我需要的依赖项并导入它们并不是很有帮助.到目前为止,我一直在手动执行此操作,但说实话,我宁愿等待15秒,以便webstorm找到并添加我的导入,必须手动挖掘它.

我正在使用来自@ minko-gechev的angular2种子 https://github.com/mgechev/angular2-seed

我的baseDir中有一个tsconfig.json,如下所示:

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "dist",
    "typings/index.d.ts",
    "typings/modules",
    "src"
  ],
  "compileOnSave": false
}

我在我的src/client目录中有另一个看起来像这样:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true
  }
}

我不知道为什么会有两个.angualr种子项目使用typescript gulp构建任务,所以我猜编译是不同的.

我能做些什么让vscode更有帮助？

Answer 1

我通过安装各种插件来实现这一点.这是我的扩展列表的屏幕截图.大部分时间,只要我输入类名,就会自行导入.或者,出现一个灯泡,您可以单击.或者你可以推F1,输入"import ...",那里也有各种选项.我有点使用它们.此外,实现接口的F1实现很有帮助,但并不总是有效.

Answer 2

2018年.您不需要在Javascript和TypeScript中进行自动导入的任何扩展.

有两种类型的自动导入:添加缺少的导入快速修复,显示为错误的灯泡:

和自动导入建议.这些会在您输入时显示建议项目.接受自动导入建议会自动在文件顶部添加导入

两者都应该使用JavaScript和TypeScript开箱即用.如果自动导入仍不适合您,请打开一个问题

Answer 3

在 tsconfig.app.json 中，标准的 Angular 10 应用程序具有：

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

一旦我将包含更改为：

  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts"
  ]

它对我有用

Answer 4

对于 JavaScript 项目：

• 设置Check JS设置标志对我有用。
• 无需jsconfig.json在项目中创建

Answer 5

我使用Auto Import插件很容易.

自动查找,解析并提供所有可用导入的代码操作和代码完成.适用于Typescript和TSX.

您可以在以下网址查看其工作原理:https://marketplace.visualstudio.com/items？itemName = steoates.autoimport

Answer 6

如果最近有人遇到过这个问题，我发现我必须添加一个设置来使用我工作区的打字稿版本，以便自动导入工作。为此，请将此行添加到您的工作区设置中：

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

然后，在 vscode 中打开一个打字稿文件，点击右下角的打字稿版本号。当顶部的选项出现时，选择“使用工作区版本”，然后重新加载 vscode。

现在自动导入应该可以工作了。

Answer 7

我也遇到了同样的问题：Visual Studio Code（v.1.45.1）没有为我的打字稿项目之一自动添加导入。就我而言，问题是特定于项目的，不需要向 VS Code 添加任何扩展。

使固定：

1. 添加"importHelpers": true到 tsconfig.json 文件的compileOptions 部分。
2. 重新启动 VS 代码。

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
...
  },