web-dev-qa-db-fra.com

Importations automatiques de code Visual Studio

Je suis en train de passer de Webstorm à Visual Studio Code. La performance dans Webstorm est catastrophique.

Le code Visual Studio n’est pas très utile pour trouver les dépendances dont j’ai besoin et les importer. Je l'ai fait manuellement jusqu'à présent, mais pour être honnête, je préférerais attendre 15 secondes pour que webstorm trouve et ajoute mon importation qui doit être fouillé manuellement.

 Screenshot: cannot find import

J'utilise la graine angular2 de @ minko-gechev https://github.com/mgechev/angular2-seed

J'ai un tsconfig.json dans mon baseDir qui ressemble à ceci:

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

et j'en ai un autre dans mon répertoire src/client qui ressemble à ceci:

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

Je ne sais pas pourquoi il y en a deux. Le projet de départ angualr utilise des tâches de construction de type gulp de typeScript, donc je suppose que la compilation est différente.

Que puis-je faire pour que vscode soit plus utile?

typescriptangularvisual-studio-code
29
reach4thelasers

Je travaille en installant divers plugins. Voici une capture d'écran de ma liste d'extensions. La plupart du temps, les choses importent d'elles-mêmes dès que je tape le nom de la classe. Alternativement, une ampoule apparaît sur laquelle vous pouvez cliquer. Vous pouvez également appuyer sur F1 et saisir "importer ...". Vous y trouverez également diverses options. Je les utilise tous un peu. De plus, F1 Implement pour implémenter une interface est utile, mais ne fonctionne pas toujours.

 enter image description here

25
reach4thelasers

J'ai utilisé le plugin Auto Import qui est assez facile.

Trouve, analyse et fournit automatiquement les actions de code et le code achèvement pour toutes les importations disponibles. Fonctionne avec TypeScript et TSX.

Vous pouvez voir comment cela fonctionne à: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

9
Alireza Fattahi

2018 maintenant. Vous n'avez besoin d'aucune extension pour les importations automatiques en Javascript et en TypeScript. 

Il existe deux types d’importations automatiques: l’addition manquante import quick fix qui apparaît comme une ampoule en cas d’erreur:

enter image description here

Et les suggestions d'importation auto . Ceux-ci affichent des éléments de suggestion au fur et à mesure que vous tapez. L'acceptation d'une suggestion d'importation automatique ajoute automatiquement l'importation en haut du fichier.

enter image description here

Les deux devraient fonctionner avec JavaScript et TypeScript. Si les importations automatiques ne fonctionnent toujours pas pour vous, veuillez ouvrir un problème

6
Matt Bierner

Si quelqu'un a rencontré ce problème récemment, j'ai constaté que je devais ajouter un paramètre pour utiliser la version de TypeScript de mon espace de travail pour que les importations automatiques fonctionnent. Pour ce faire, ajoutez cette ligne à vos paramètres workspace:

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

Ensuite, avec un fichier TypeScript ouvert dans vscode, cliquez sur le numéro de version TypeScript dans le coin inférieur droit. Lorsque les options en haut apparaissent, choisissez "utiliser la version de l’espace de travail", puis recharger le vscode.

Les importations automatiques devraient maintenant fonctionner. 

1
inorganik

Il existe un problème de code Visual Studio vous pouvez suivre et féliciter cette fonctionnalité. Il y avait aussi un problème de User Voice , mais je crois qu'ils ont déplacé le vote vers les problèmes de GitHub.

Il semble qu'ils veulent une fonctionnalité d'importation automatique dans TypeScript, afin qu'elle puisse être réutilisée. Problème d’importation automatique TypeScript à suivre et féliciter ici .

0
RationalDev