Apprendre à utiliser l’éditeur de code pour JavaScript
Dans cette brève présentation de l’éditeur de code dans Visual Studio, nous allons examiner certaines des façons dont Visual Studio facilite l’écriture, la navigation et la compréhension du code.
Conseil
Si vous n’avez pas encore installé Visual Studio, accédez à la page de téléchargement de Visual Studio pour l’installer gratuitement. Pour plus d’informations sur l’obtention du service de langage pour TypeScript, consultez Prise en charge de TypeScript.
Cet article part du principe que vous connaissez déjà le développement JavaScript. Si ce n’est pas le cas, nous vous suggérons de consulter un didacticiel tel que Créer un Node.js et une application Express en premier.
Ajouter un nouveau fichier projet
Vous pouvez utiliser l’IDE pour ajouter de nouveaux fichiers à votre projet.
Une fois votre projet ouvert dans Visual Studio, cliquez avec le bouton droit sur un dossier ou votre nœud de projet dans l’Explorateur de solutions (volet droit), puis choisissez Ajouter>nouvel élément.
Si vous ne voyez pas tous les modèles d’élément, choisissez Afficher tous les modèles, puis choisissez le modèle d’élément.
Dans la boîte de dialogue Nouveau fichier, sous la catégorie Général, choisissez le type de fichier que vous souhaitez ajouter, tel que fichier JavaScript, puis choisissez Ouvrir.
Le nouveau fichier est ajouté à votre projet et s’ouvre dans l’éditeur.
Utiliser IntelliSense pour compléter les mots
IntelliSense est une ressource inestimable lorsque vous codez. Il peut vous afficher des informations sur les membres disponibles d’un type ou des détails de paramètre pour différentes surcharges d’une méthode. Dans le code suivant, lorsque vous tapez Router(), vous voyez les types d’arguments que vous pouvez passer. Il s’agit d’une aide pour la signature.
Vous pouvez également utiliser IntelliSense pour terminer un mot après avoir tapé suffisamment de caractères pour le lever d’ambiguïté. Si vous placez votre curseur après la chaîne de data dans le code suivant et tapez get, IntelliSense affiche les fonctions définies précédemment dans le code ou définies dans une bibliothèque tierce que vous avez ajoutée à votre projet.
IntelliSense peut également vous afficher des informations sur les types lorsque vous pointez sur des éléments de programmation.
Pour fournir des informations IntelliSense, le service de langage peut utiliser des fichiers d.ts TypeScript et des commentaires JSDoc. Pour les bibliothèques JavaScript les plus courantes, les fichiers d.ts sont automatiquement acquis. Pour plus d’informations sur la façon dont les informations IntelliSense sont acquises, consultez JavaScript IntelliSense.
Vérifier la syntaxe
Le service de langage utilise ESLint pour fournir la vérification de la syntaxe et le linting. Si vous devez définir des options pour la vérification de la syntaxe dans l’éditeur, sélectionnez Outils>Options>JavaScript/TypeScript>Linting. Les options de linting vous pointent vers le fichier de configuration ESLint global.
Le code suivant illustre la coloration syntaxique en vert (lignes ondulées vertes) sur l’expression. Placez le curseur sur la coloration syntaxique.
La dernière ligne de ce message vous indique que le service de langue attendait une virgule (,). L’équiggle vert indique un avertissement. La ligne ondulée rouge indique une erreur.
Dans le volet inférieur, vous pouvez cliquer sur l’onglet liste d’erreurs pour afficher l’avertissement et la description, ainsi que le nom de fichier et le numéro de ligne.
Vous pouvez corriger ce code en ajoutant la virgule (,) avant "data".
Pour plus d’informations sur le linting, consultez Linting.
Commenter du code
La barre d’outils, qui est la ligne de boutons sous la barre de menus de Visual Studio, peut vous aider à rendre votre code plus productif. Par exemple, vous pouvez activer le mode d’achèvement IntelliSense ( IntelliSense est une aide de codage qui affiche une liste de méthodes correspondantes, entre autres), augmenter ou diminuer un retrait de ligne ou commenter le code que vous ne souhaitez pas compiler. Dans cette section, nous allons commenter du code.
Sélectionnez une ou plusieurs lignes de code dans l’éditeur, puis choisissez le bouton Commenter les lignes sélectionnées
sur la barre d’outils. Si vous préférez utiliser le clavier, appuyez sur Ctrl+K, Ctrl+C.
Les caractères de commentaire JavaScript // sont ajoutés au début de chaque ligne sélectionnée pour commenter le code.
Réduire les blocs de code
Si vous avez besoin de désencombrer votre vue de certaines régions de code, vous pouvez la réduire. Choisissez la petite zone grise avec le signe moins à l’intérieur de celle-ci dans la marge de la première ligne d’une fonction. Ou, si vous êtes un utilisateur de clavier, placez le curseur n’importe où dans le code du constructeur et appuyez sur Ctrl+M, Ctrl+M.
Le bloc de code s’réduit à la première ligne, suivi d’un point de suspension (...). Pour développer à nouveau le bloc de code, cliquez sur la même zone grise qui a maintenant un signe plus, ou appuyez à nouveau sur Ctrl+M, Ctrl+M. Cette fonctionnalité, appelée Mode Plan, est très utile pour réduire des fonctions longues ou des classes entières.
Afficher les définitions
L’éditeur Visual Studio facilite l’inspection de la définition d’un type, d’une fonction, etc. L’une des façons consiste à accéder au fichier qui contient la définition, par exemple en choisissant Atteindre la définition n’importe où l’élément de programmation est référencé. Une autre façon encore plus rapide, sans avoir à déplacer le focus en dehors du fichier dans lequel vous travaillez, consiste à utiliser la fonctionnalité Faire un Peek de la Définition. Examinons la définition de la méthode render dans l’exemple ci-dessous.
Faites un clic droit sur render, puis choisissez Faire un Peek de la Définition dans le menu de contenu. Ou appuyez sur Alt+F12.
Une fenêtre contextuelle s’affiche avec la définition de la méthode render. Vous pouvez faire défiler la fenêtre contextuelle, ou même afficher la définition d’un autre type à partir du code aperçu.
Fermez la fenêtre de définition aperçue en choisissant la petite boîte avec un « x » en haut à droite de la fenêtre contextuelle.
Afficher les indicateurs d’incrustation
À compter de Visual Studio 2022 version 17.12, les indicateurs d’inlay affichent des informations supplémentaires sur le code source affiché en ligne. Cela est généralement utilisé pour afficher des types déduits, des noms de paramètres et d’autres informations implicites de votre code directement dans votre éditeur.
Pour configurer des indicateurs d’incrustation :
Accédez à Outils > Options > Éditeur de texte > Toutes les langues > indicateurs de superposition, puis sélectionnez une option permettant d’afficher les indicateurs de superposition.
Accédez à Outils > Options > Éditeur de texte > JavaScript/TypeScript > Advanced > General et configurez les indicateurs de superposition que vous souhaitez masquer ou afficher.
Par défaut, la plupart de ces options sont désactivées.
Utiliser des extraits de code
Visual Studio fournit des extraits de code utiles que vous pouvez utiliser pour générer rapidement et facilement des blocs de code couramment utilisés. extraits de code sont disponibles pour différents langages de programmation, notamment JavaScript. Ajoutons une boucle for à votre fichier de code.
Placez votre curseur où vous souhaitez insérer l’extrait de code, cliquez avec le bouton droit et choisissez Extrait de code>Insérer un extrait de code.
extrait de code 
Une zone Insérer un extrait de code s’affiche dans l’éditeur. Choisissez Général, puis double-cliquez sur l'élément pour dans la liste.
extrait de code 
Cela ajoute l’extrait de boucle for à votre code :
for (var i = 0; i < length; i++) {
}
Vous pouvez examiner les extraits de code disponibles pour votre langue en choisissant Modifier>IntelliSense>Insérer un extrait de code, puis en choisissant le dossier de votre langue.