typescript - Visual Studio Code Automatiska Importer

Jag håller på att flytta från Webstorm till Visual Studio Code. Prestandan i Webstorm är usel.

Visual Studio Code är inte särskilt hjälpsam när det gäller att hitta de beroenden jag behöver och importera dem. Hittills har jag gjort det manuellt, men ärligt talat skulle jag hellre vänta 15 sekunder för att WebStorm ska hitta och lägga till min import än att behöva leta efter den manuellt.

Jag använder angular2-fröet från @minko-gechev https://github.com/mgechev/angular2-seed

Jag har en tsconfig.json i min baseDir som ser ut så här:

    {
  "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
}

och jag har en annan i min src/client-katalog som ser ut så här:

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

Jag vet inte varför det finns två. Angular seed-projektet använder TypeScript Gulp-bygguppgifter så jag antar att kompileringen är annorlunda.

Vad kan jag göra för att få VSCode att vara mer hjälpsam??

Svar #1

2018 nu. Du behöver inga tillägg för auto-importer i Javascript (så länge du har checkjs: true i din jsconfig.json-fil) och TypeScript.

Det finns två typer av automatiska importer: åtgärden för att lägga till saknad import som visas som en glödlampa vid fel:

Och de automatiska importsförslagen. Dessa visas som förslagsposter när du skriver. Eller så kan du markera text och trycka Ctrl + Space för att ta upp en lista med förslag. Att acceptera ett automatiskt importsförslag lägger automatiskt till importen högst upp i filen

Båda bör fungera direkt med JavaScript och TypeScript. Om automatiska importer fortfarande inte fungerar för dig, vänligen öppna en issue

Svar #2

Jag fick detta att fungera genom att installera de olika pluginsen nedan.

För det mesta importeras saker automatiskt så fort jag skriver klassnamnet. Alternativt dyker en liten glödlampa upp som du kan klicka på. Eller så kan du trycka på F1 och skriva "import..." och där finns olika alternativ också. Jag använder nog alla av dem. Även F1 Implement för att implementera ett gränssnitt är användbart, men fungerar inte alltid.

Lista över tillägg

  • npm Intellisense
  • ngrx för Angular 2 Snippets
  • TypeScript-verktygslåda
  • npm
  • TsTools
  • Angular-snippets (Version 9)
  • Typer auto installerare
  • Felsökare för Chrome
  • TypeScript Importör
  • TypeScript Hjälte
  • vscode-ikoner
  • Lägg till Angular-filer

Skärmdump av tillägg

Svar #3

I tsconfig.app.json har en standard Angular 10-app:

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

När jag ändrade include-liknande till att vara:

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

Det fungerade för mig

Svar #4

Jag använde Auto Import-pluginet av steoates vilket är ganska enkelt.

Hittar, tolkar och tillhandahåller automatiskt kodåtgärder och kodkomplettering för alla tillgängliga importer. Fungerar med Typescript och TSX.

Svar #5

För Javascript-projekt:

  • Att ställa in Check JS-inställningsflaggan fungerar för mig.
  • Ingen anledning att skapa en jsconfig.json i projektet

Svar #6

Om någon har stött på detta problem nyligen, upptäckte jag att jag var tvungen att lägga till en inställning för att använda min arbetsytas version av TypeScript för att auto-importerna skulle fungera. För att göra detta, lägg till denna rad i dina arbetsyta-inställningar:

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

Sedan, med en TypeScript-fil öppen i VSCode, klicka på TypeScript-versionen i det nedre högra hörnet. När alternativen högst upp visas, välj "använd arbetsytans version", och ladda om VSCode.

Nu bör automatisk import fungera.

Relaterade artiklar