web-dev-qa-db-ja.com

Visual Studioコードの自動インポート

私はWebstormからVisual Studio Codeへの移行を進めています。 Webstormのパフォーマンスはひどいです。

Visual Studioコードは、必要な依存関係を見つけてインポートするのにあまり役立ちません。これまで手動で行ってきましたが、正直に言うと、webstormがインポートを見つけて追加するのを15秒待って、手動で掘り下げる必要があります。

Screenshot: cannot find import

私は@ 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 dirに次のような別のものがあります：

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

なぜ2つあるのか分かりません。 angualr seedプロジェクトはTypeScript gulpビルドタスクを使用するため、コンパイルが異なると思います。

Vscodeをもっと役立つものにするにはどうすればよいですか？

typescriptangularvisual-studio-code
40
reach4thelasers

さまざまなプラグインをインストールすることで、これが機能するようになりました。これが私の拡張機能リストのスクリーンショットです。ほとんどの場合、クラス名を入力するとすぐにインポートされます。または、クリックできる電球が表示されます。または、F1を押して「import ...」と入力すると、さまざまなオプションがあります。私はそれらをすべて使います。インターフェイスを実装するためのF1実装も役立ちますが、常に機能するとは限りません。

enter image description here

30
reach4thelasers

2018年JavascriptおよびTypeScriptでの自動インポートには拡張機能は必要ありません。

自動インポートには次の2つのタイプがあります。欠落しているインポートの追加 クイックフィックス エラー時に電球として表示されます。

enter image description here

自動インポートの提案 。これらは、入力時に候補項目を表示します。自動インポートの提案を受け入れると、ファイルの先頭にインポートが自動的に追加されます

enter image description here

両方とも、JavaScriptとTypeScriptを使用してすぐに動作するはずです。それでも自動インポートが機能しない場合は、 問題を開く

14
Matt Bierner

Auto Importプラグインを使用しましたが、これは非常に簡単です。

使用可能なすべてのインポートのコードアクションとコード補完を自動的に検出、解析、提供します。 TypeScriptおよびTSXで動作します。

どのように機能するかは、 https://marketplace.visualstudio.com/items?itemName=steoates.autoimport で確認できます。

11
Alireza Fattahi

誰かが最近この問題に遭遇した場合、自動インポートを機能させるには、ワークスペースのバージョンのTypeScriptを使用する設定を追加する必要がありました。これを行うには、次の行をworkspace設定に追加します。

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

次に、vscodeでTypeScriptファイルを開いて、右下隅のTypeScriptバージョン番号をクリックします。上部のオプションが表示されたら、「ワークスペースバージョンを使用」を選択し、次にreload vscodeを選択します。

これで、自動インポートが機能するはずです。

1
inorganik

この最初の MUST HAVE EXTENSIONS を見て、必要な拡張機能をインストールしてください。そして、次のようにすればうまくいきます。

{
    "compilerOptions": {
        "target": "es5",
        "allowSyntheticDefaultImports": true
    }
}
0
Abdullah

Visual Studio Code issue があります。この機能を追跡して評価することができます。 ユーザー音声の問題 もありましたが、彼らは投票をGitHubの問題に移したと思います。

TypeScriptの自動インポート機能が必要なようで、再利用できます。 ここで追跡するためのTypeScript自動インポートの問題 。

0
RationalDev