Développer du code JavaScript et TypeScript dans Visual Studio sans solutions ni projets

Vous pouvez développer du code sans projets ou solutions. Cette approche vous permet d’ouvrir un dossier de code et de commencer immédiatement à utiliser la prise en charge de l’éditeur enrichi, comme IntelliSense, la recherche, la refactorisation, le débogage, etc. En plus de ces fonctionnalités, les outils Node.js pour Visual Studio ajoutent la prise en charge de la création de fichiers TypeScript, de la gestion des packages npm et de l’exécution de scripts npm.

Pour commencer, sélectionnez Fichier>ouvrir>le dossier dans la barre d’outils. Explorateur de solutions affiche tous les fichiers du dossier et vous pouvez ouvrir l’un des fichiers pour commencer à modifier. En arrière-plan, Visual Studio indexe les fichiers pour activer les fonctionnalités npm, build et débogage.

Prerequisites

  • La charge de travail Visual Studio Développement Node.js doit être installée

Intégration de npm

Si le dossier que vous ouvrez contient un fichier package.json , vous pouvez cliquer avec le bouton droit sur package.json pour afficher un menu contextuel (menu contextuel) spécifique à npm.

menu npm dans Explorateur de solutions

menu npm dans Explorateur de solutions

Dans le menu contextuel, vous pouvez gérer les packages installés par npm de la même façon que les packages npm lors de l’utilisation d’un fichier projet.

En outre, le menu vous permet également d’exécuter des scripts définis dans l’élément scripts dans package.json. Ces scripts utilisent la version de Node.js disponible sur la variable d’environnement PATH . Les scripts s’exécutent dans une nouvelle fenêtre. Il s’agit d’un excellent moyen d’exécuter des scripts de génération ou d’exécution.

Compiler et déboguer

package.json

Si le package.json dans le dossier spécifie un main élément, la commande Debug est disponible dans le menu contextuel de clic droit pour package.json. Lorsque vous sélectionnez cette commande, elle démarre node.exe avec le script spécifié comme argument.

Si la commande Debug ne démarre pas correctement l’application, vérifiez que votre fichier package.json inclut un script de démarrage, tel que l’exemple suivant.

"main": "index.js",
"scripts": {
  "start": "node index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Dans cet exemple, vous pouvez exécuter le script de démarrage à partir de package.json en cliquant avec le bouton droit sur package.json dans Explorateur de solutions et en choisissant ledémarrage du script d’exécution Npm> npm.

Exécuter un script de démarrage à partir du menu npm

Fichiers JavaScript

Vous pouvez déboguer des fichiers JavaScript en cliquant avec le bouton droit sur un fichier et en sélectionnant Déboguer dans le menu contextuel. Cela commence node.exe avec ce fichier JavaScript comme argument.

Si la commande Debug ne démarre pas correctement l’application, utilisez la méthode décrite dans la section package.json pour exécuter un script de démarrage.

Fichiers TypeScript et tsconfig.json

S’il n’existe aucun tsconfig.json présent dans le dossier, vous pouvez cliquer avec le bouton droit sur un fichier TypeScript pour afficher les commandes de menu contextuel pour générer et déboguer ce fichier. Lorsque vous utilisez ces commandes, vous générez ou déboguez avec tsc.exe avec les options par défaut. (Vous devez générer le fichier avant de pouvoir déboguer.)

Note

Lors de la génération du code TypeScript, nous utilisons la version la plus récente installée dans C:\Program Files (x86)\Microsoft SDKs\TypeScript.

S’il existe un fichier tsconfig.json présent dans le dossier, vous pouvez cliquer avec le bouton droit sur un fichier TypeScript pour afficher une commande de menu pour déboguer ce fichier TypeScript. L’option apparaît uniquement s’il n’y a pas outFile de spécification dans tsconfig.json. Si une outFile valeur est spécifiée, vous pouvez déboguer ce fichier en cliquant avec le bouton droit sur tsconfig.json et en sélectionnant l’option appropriée. Le tsconfig.json fichier vous offre également une option de génération pour vous permettre de spécifier les options du compilateur.

Note

Vous trouverez plus d’informations sur tsconfig.json dans la pagetsconfig.json Manuel TypeScript.

Tests unitaires

Vous pouvez activer l’intégration de test unitaire dans Visual Studio en spécifiant une racine de test dans votre package.json:

{
    // ...
    "vsTest":{
        "testRoot": "./tests"
    }
    // ...
}

L’exécuteur de test énumère les packages installés localement pour déterminer l’infrastructure de test à utiliser. Si aucun des frameworks pris en charge n’est reconnu, l’exécuteur de test est défini par défaut sur ExportRunner. Les autres infrastructures prises en charge sont les suivantes :

Après avoir ouvert l’Explorateur de tests (choisissez Test>Windows>Explorateur de tests), Visual Studio découvre et affiche les tests.

Note

L’exécuteur de test énumère uniquement les fichiers JavaScript dans la racine de test, si votre application est écrite dans TypeScript, vous devez d’abord les générer.