TypeScript - Visual Studio Code 自動匯入

我正在從 Webstorm 遷移到 Visual Studio Code。Webstorm 的效能非常差。

Visual Studio Code 在幫我找到所需的依賴和導入它們方面不太有幫助。到目前為止我都是手動操作，但說實話，我寧願等 15 秒讓 WebStorm 幫我找到並添加導入，也不想手動四處尋找它。

我用的是 @minko-gechev https://github.com/mgechev/angular2-seed 的 angular2 種子

我在我的 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
  }
}

我不知道為什麼會有兩個。Angular 種子項目使用 TypeScript Gulp 建構任務，所以我猜編譯方式不同。

我可以怎麼做才能讓 VSCode 更有幫助？

答案＃1

現在是 2018 年。你不需要任何擴充功能來在 Javascript（只要你的 jsconfig.json 文件中有 checkjs: true）和 TypeScript 中自動導入。

自動匯入有兩種類型：缺少匯入的快速修正，它會在錯誤處顯示為一個燈泡：

還有自動匯入建議。這些會在你輸入時顯示建議項目。或者你也可以選擇文字並按 Ctrl + 空白鍵，彈出一串建議。接受自動匯入建議後，檔案頂端會自動新增匯入

兩者應該可以直接與 JavaScript 和 TypeScript 一起使用。如果自動導入仍然無法使用，請提出問題報告

答案＃2

我透過安裝以下各種外掛讓這個運作起來。

大多數時候，只要我輸入類別名稱，東西就會自動匯入。或者，會出現一個燈泡，你可以點擊。或者你可以按 F1，然後輸入「import...」「而且那裡也有各種選擇。我幾乎全部都用到。另外，F1 Implement 用來實作介面也很有幫助，但不一定每次都能用。

插件列表

npm 智慧感知
Angular 2 的 ngrx 代碼片段
TypeScript 工具箱
npm
TsTools
Angular 代碼片段（版本 9）
類型自動安裝程式
Chrome 除錯器
TypeScript 匯入器
TypeScript 英雄
VScode-圖示
新增 Angular 檔案

擴充功能截圖

答案＃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 改成如下：

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

對我有效

答案＃4

我使用了 steoates 的 自動導入 插件，這相當簡單。

自動查找、解析並提供所有可用導入的程式碼操作和程式碼補全。適用於 Typescript 和 TSX。

答案＃5

對於 Javascript 專案：

設置 Check JS 設定旗標對我有效。
在專案中無需建立 jsconfig.json

答案＃6

如果有人最近遇到這個問題，我發現我必須添加一個設置，使用我工作區的 TypeScript 版本才能使自動導入正常工作。要做到這一點，請將此行添加到您的工作區設置中：

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

然後，在 VSCode 中打開一個 TypeScript 文件，點擊右下角的 TypeScript 版本號。當頂部出現選項時，選擇「使用工作區版本」，然後 重新加載 VSCode。

現在自動導入應該可以正常工作了。