Un guide de l'utilisateur avancé –

Dans ce guide, vous apprendrez à tirer parti de Visual Studio Code pour dynamiser votre flux de travail de développement.

Cet article est destiné aux débutants qui utilisent Visual Studio Code pour la première fois. VS Code, comme on l'appelle communément, est considéré comme un éditeur de code «léger». En comparaison avec les éditeurs IDE (Full Integrated Development Environment) qui occupent des gigaoctets d'espace disque, VS Code utilise moins de 200 Mo lorsqu'il est installé.

Malgré le terme «léger», Visual Studio Code offre un grand nombre de fonctionnalités qui ne cessent d'augmenter et s'améliorant à chaque nouvelle mise à jour. Pour ce guide, nous allons couvrir les fonctionnalités les plus utilisées. Chaque programmeur a son propre ensemble d'outils qu'il continue à mettre à jour chaque fois que de nouveaux workflows sont découverts. Si vous voulez découvrir tous les outils et fonctionnalités que VS Code a à offrir, consultez leur documentation officielle . En outre, vous souhaiterez peut-être garder une trace des mises à jour pour les fonctionnalités nouvelles et améliorées.

Prérequis

Pour suivre ce guide, vous devez maîtriser au moins un langage et un cadre de programmation. . Vous devez également être au courant de la gestion des versions de votre code de projet avec git . Vous devrez également avoir un compte avec une plateforme de référentiel distant telle que GitHub. Je vous recommande de configurer les clés SSH pour vous connecter à votre dépôt à distance.

Nous utiliserons un projet minimal Next.js pour démontrer les fonctionnalités de VS Code. Si vous êtes nouveau dans ce domaine, ne vous inquiétez pas, car le cadre et le langage utilisés ne sont pas au centre de ce guide.

Un peu d'histoire

Si vous êtes nouveau dans la programmation, je vous recommande de commencer avec un simple éditeur de texte tel que Windows NotePad . Il s'agit de l'éditeur de texte le plus basique et n'offre aucune sorte d'aide. Le principal avantage de son utilisation est qu'il vous oblige à mémoriser la syntaxe du langage et à faire votre propre indentation. Une fois que vous maîtrisez l'écriture de code, la mise à niveau vers un meilleur éditeur de texte tel que NotePad ++ est la prochaine étape logique. Il offre une aide essentielle au codage avec des fonctionnalités telles que la colorisation de la syntaxe, l'indentation automatique et la saisie semi-automatique de base. Il est important pour apprendre la programmation de ne pas être submergé par trop d'informations et d'assistance.

Une fois que vous vous êtes habitué à avoir une meilleure expérience de codage, il est temps de mettre à niveau. Il n'y a pas si longtemps, voici les environnements de développement entièrement intégrés proposés:

Ces plates-formes fournissent le flux de travail de développement complet, du codage au test et au déploiement. Ils contiennent des tonnes de fonctionnalités utiles telles que l'analyse de code et la mise en évidence des erreurs. Ils contiennent également une tonne de fonctionnalités supplémentaires que de nombreux développeurs n'utilisaient pas, bien qu'elles soient essentielles pour certaines équipes. En conséquence, ces plates-formes prenaient beaucoup d'espace disque et étaient lentes à démarrer. De nombreux développeurs ont préféré utiliser des éditeurs de texte avancés tels que emacs et vim pour écrire leur code.

Bientôt, une nouvelle récolte d'éditeurs de code indépendants de la plate-forme a commencé à apparaître. Ils étaient légers et fournissaient de nombreuses fonctionnalités qui étaient principalement exclusives aux IDE. Je les ai énumérés ci-dessous dans l'ordre de leur publication:

Les développeurs Mac avaient accès à TextMate qui a été publié en octobre 2004. Le système d'extraits de code utilisé par tous les éditeurs ci-dessus provenait de TextMate. Après les avoir tous utilisés, j'ai senti que l'éditeur qui suivait était une amélioration significative par rapport à l'actuel. Selon une enquête auprès des développeurs réalisée par Stack OverFlow en 2019, Visual Studio Code est l'environnement de développement de code le plus populaire avec une utilisation de 50,7%. Visual Studio IDE vient en deuxième position et NotePad ++ en troisième position.

C'est assez d'historique et de statistiques pour l'instant. Explorons comment utiliser les fonctionnalités de Visual Studio Code.

Installation et mises à jour

Le programme d'installation du package de Visual Studio Code est inférieur à 100 Mo et consomme moins de 200 Mo lorsqu'il est entièrement installé. Lorsque vous visitez la page de téléchargement votre système d'exploitation est automatiquement détecté et le lien de téléchargement correct est mis en surbrillance.

La mise à jour du code VS est très simple. Il affiche une invite de notification chaque fois qu'une mise à jour a été publiée. Pour les utilisateurs de Windows, vous devrez cliquer sur la notification pour télécharger et installer la dernière version. Le processus de téléchargement se déroule en arrière-plan pendant que vous travaillez. Lorsqu'il est prêt à installer, une invite de redémarrage apparaît. Cliquer sur ceci installera la mise à jour pour vous et redémarrera VS Code.

Pour les distributions basées sur Ubuntu, cliquer sur la notification de mise à jour ouvrira simplement le site Web pour que vous téléchargiez le dernier programme d'installation. Un moyen beaucoup plus simple consiste simplement à exécuter sudo apt update && sudo apt upgrade -y . Cela mettra à jour tous les packages Linux installés, y compris Visual Studio Code. La raison pour laquelle cela fonctionne est que VS Code a ajouté son référentiel à votre registre de référentiel de packages lors de l'installation initiale. Vous pouvez trouver les informations de mise en pension sur ce chemin: /etc/apt/sources.list.d/vscode.list .

Interface utilisateur

Commençons par nous familiariser avec l'interface utilisateur: [19659020] Interface utilisateur VS Code  » width= »940″ height= »645″ class= »alignleft size-full wp-image-175827″/>

L'interface utilisateur de Visual Studio Code est divisée en cinq zones principales que vous pouvez facilement ajuster.

• Barre d'activité : permet de basculer entre les vues: explorateur, recherche, contrôle de version, débogage et extensions.
• Barre latérale : contient la vue active.
• Éditeur : c'est ici que vous modifiez les fichiers et prévisualisez les fichiers de démarques. Vous pouvez organiser plusieurs fichiers ouverts côte à côte.
• Panneau : affiche différents panneaux: terminal intégré, panneaux de sortie pour les informations de débogage, les erreurs et les avertissements.
• Statut : affiche des informations sur le projet et fichier ouverts. Contient également des boutons pour exécuter des actions de contrôle de version et activer / désactiver les fonctions d'extension.

Il y a aussi la barre de menus supérieure où vous pouvez accéder au système de menus de l'éditeur. Pour les utilisateurs de Linux, le terminal intégré par défaut sera probablement le shell Bash . Pour les utilisateurs de Windows, c'est PowerShell . Heureusement, il y a un sélecteur de shell situé dans la liste déroulante du terminal qui vous permettra de choisir un autre shell. S'il est installé, vous pouvez choisir l'une des options suivantes:

• Invite de commandes
• PowerShell
• PowerShell Core
• Git Bash
• WSL Bash

Utilisation de projets

Contrairement aux IDE complets, Visual Studio Le code ne fournit pas de création de projet ni de modèles de projet de manière traditionnelle. Il fonctionne simplement avec des dossiers. Sur ma machine de développement Linux, j'utilise le modèle de dossier suivant pour stocker et gérer mes projets:

 / home / {username} / Projects / {company-name} / {repo-provider} / {project-name}

Le dossier Projets est ce que j'appelle l'espace de travail . En tant que rédacteur et développeur indépendant, je sépare les projets en fonction de la société pour laquelle je travaille et du repo que j'utilise. Pour les projets personnels, je les stocke sous mon propre «nom d'entreprise» fictif. Pour les projets que j'expérimente à des fins d'apprentissage et que je n'ai pas l'intention de garder longtemps, je vais simplement utiliser un nom tel que jouer ou tuts comme substitut de {repo-provider} .

Si vous souhaitez créer un nouveau projet et l'ouvrir dans VS Code, vous pouvez utiliser les étapes suivantes. Ouvrez un terminal et exécutez les commandes suivantes:

 $ mkdir vscode-demo
$ cd vscode-demo
# Lancer Visual Studio Code
$ code.

Vous pouvez également le faire dans l'Explorateur de fichiers. Lorsque vous accédez au menu contextuel de la souris, vous devriez pouvoir ouvrir n'importe quel dossier dans VS Code.

Si vous souhaitez créer un nouveau projet lié à un référentiel distant, il est plus facile d'en créer un sur le site du référentiel – par exemple, GitHub ou BitBucket

Prenez note de tous les champs qui ont été remplis et sélectionnés. Ensuite, accédez au terminal et exécutez ce qui suit:

 # Accédez au dossier workspace / company / repo
$ cd Projets / sitepoint / github /

# Clonez le projet sur votre machine
$ git clone git@github.com: {insert-username-here} /vscode-nextjs-demo.git

# Projet ouvert dans VS Code
$ cd vscode-nextjs-demo
$ code.

Une fois l'éditeur opérationnel, vous pouvez lancer le terminal intégré à l'aide du raccourci clavier Ctrl + ~ (touche tilde). Utilisez les commandes suivantes pour générer package.json et installer les packages:

 # Générez le fichier `package.json` avec les paramètres par défaut
$ npm init -y

# Installer les dépendances des packages
$ npm installer next react react-dom

Ensuite, ouvrez package.json et remplacez la section scripts par celle-ci:

 "scripts": {
  "dev": "suivant",
  "build": "build suivant",
  "start": "next start"
}

L'ensemble de la fenêtre Visual Studio Code devrait ressembler à ceci:

Avant de regarder la section suivante, je voudrais mentionner que VS Code prend également en charge le concept d'espaces de travail multi-racines . Si vous travaillez avec des projets connexes – front-end, back-end, documents, etc. – vous pouvez tous les gérer dans un seul espace de travail dans un seul éditeur. Cela facilitera la synchronisation de votre code source et de votre documentation.

Contrôle de version avec Git

Visual Studio Code est intégré au gestionnaire de contrôle de source Git. Il fournit une interface UI où vous pouvez mettre en scène, valider, créer de nouvelles branches et basculer vers celles existantes. Commettons les changements que nous venons de faire dans notre projet. Dans la barre d'activité ouvrez le panneau de contrôle de la source et localisez le bouton Stage All Changes plus comme indiqué ci-dessous.

Cliquez dessus. Ensuite, entrez le message de validation «Dépendances de next.js installées», puis cliquez sur le bouton Valider en haut. Il a l'icône de coche. Cela va valider les nouvelles modifications. Si vous regardez l'état situé en bas, vous verrez diverses icônes d'état dans le coin gauche. Le 0 ↓ signifie qu'il n'y a rien à retirer du dépôt distant. Le 1 ↑ signifie que vous avez un commit que vous devez envoyer à votre dépôt à distance. Cliquer dessus affichera une invite sur l'action qui aura lieu. Cliquez sur OK pour tirer et pousser votre code. Cela devrait synchroniser votre référentiel local avec le référentiel distant.

Pour créer une nouvelle branche ou basculer vers une branche existante, cliquez simplement sur le nom de la branche master dans la barre d'état, dans le coin inférieur gauche . Cela fera apparaître un panneau de branche pour que vous puissiez prendre une action.

Consultez les extensions suivantes pour une expérience encore meilleure avec Git:

La prise en charge d'un type différent de SCM, tel que SVN, peut être ajoutée via l'installation de l'extension SCM appropriée à partir du marché.

Création et exécution de code

Sur la barre d'activité tête retournez au Explorateur Panel et utilisez le bouton Nouveau dossier pour créer le dossier pages à la racine du projet. Sélectionnez ce dossier et utilisez le bouton Nouveau fichier pour créer le fichier pages / index.js . Copiez le code suivant:

 function HomePage () {
  return & lt; div & gt; Bienvenue dans Next.js! & lt; / div & gt ;;
}

exporter la page d'accueil par défaut;

Avec le Explorateur Panel vous devriez voir une section intitulée NPM Scripts . Développez-le et survolez dev . Un bouton d'exécution (icône de lecture) apparaîtra à côté. Cliquez dessus et cela lancera un serveur de développement Next.js à l'intérieur du Terminal intégré .

La rotation devrait prendre quelques secondes. Utilisez Ctrl + Cliquez sur sur l'URL http: // localhost: 3000 pour l'ouvrir dans votre navigateur. La page devrait s'ouvrir avec succès affichant le message "Bienvenue". Dans la section suivante, nous verrons comment modifier les préférences de Visual Studio Code.

Paramètres utilisateur et espace de travail

Pour accéder aux paramètres de préférence VS Code, utilisez la touche de raccourci Ctrl + . Vous pouvez également y accéder via la commande de menu comme ceci:

• Sous Windows / Linux – Fichier > Préférences > Paramètres
• Sur macOS – Code > Préférences > Paramètres

Par défaut, une interface graphique Éditeur de paramètres doit apparaître. Il aide les utilisateurs à modifier facilement leurs préférences, car des milliers de paramètres modifiables sont disponibles. L'éditeur de paramètres fournit des noms conviviaux et une description de ce que fait chaque paramètre. De plus, les paramètres associés ont été regroupés et une barre de recherche permet de localiser un paramètre spécifique.

Lorsque vous modifiez les paramètres à l'aide de l'éditeur, faites attention à la portée active à le haut. Notez que tous les paramètres ne peuvent pas être configurés via l'interface graphique. Pour cela, vous devez éditer le fichier settings.json directement. Lorsque vous faites défiler vers le bas Éditeur de paramètres vous rencontrerez un raccourci qui vous amènera à ce fichier.

Il existe deux étendues différentes dans lesquelles les paramètres de Visual Studio Code sont classés:

• Utilisateur Paramètres : les paramètres sont stockés sous le compte utilisateur. Ils prendront effet sur tous les projets sur lesquels vous travaillez.
• Espace de travail : Les paramètres sont stockés dans le dossier du projet ou de l'espace de travail. Ils s'appliqueront uniquement dans ce projet spécifique.

Selon votre plate-forme, vous pouvez localiser le paramètre utilisateur de VS Code dans les emplacements suivants:

• Windows: % APPDATA% Code User settings.json
• macOS: $ HOME / Library / Application Support / Code / User / settings.json
• Linux: $ HOME / .config / Code / User / settings.json

Pour Workspace créez simplement un dossier .vscode à la racine de votre projet. Créez ensuite le fichier settings.json dans ce dossier. Si vous travaillez avec le panneau Editeur de paramètres il le fera automatiquement pour vous lorsque vous modifierez les paramètres sous la portée Espace de travail . Voici un sous-ensemble des paramètres globaux avec lesquels je préfère travailler:

 {
  "editor.minimap.enabled": false,
  "window.openFoldersInNewWindow": "on",
  "diffEditor.ignoreTrimWhitespace": false,
  "files.trimTrailingWhitespace": vrai,
  "javascript.updateImportsOnFileMove.enabled": "toujours",
  "workbench.editor.enablePreview": false,
  "workbench.list.openMode": "doubleClick",
  "window.openFilesInNewWindow": "par défaut",
  "editor.formatOnPaste": vrai,
  "editor.defaultFormatter": "Code esbenp.prettierVS",
  "editor.formatOnSave": vrai,
  "editor.tabSize": 2,
  "explorer.confirmDelete": faux
}

J'ai tendance à travailler avec plusieurs projets simultanément, d'où le paramètre window.openFoldersInNewWindow me permet d'ouvrir de nouveaux dossiers de projet sans fermer (remplacer) le dossier actif. Pour editor.defaultFormatter je l'ai défini sur Prettier qui est une extension que j'ai installée. Nous en discuterons dans une section ultérieure sous peu. Voyons maintenant les associations linguistiques.

Language Association

Je fais beaucoup de projets avec React. Dernièrement, la plupart des frameworks React génèrent des composants qui utilisent l'extension .js au lieu de .jsx . Par conséquent, la mise en forme et la colorisation de la syntaxe deviennent un problème lorsque vous commencez à écrire du code JSX. Pour résoudre ce problème, vous devez associer les fichiers .js à JavaScriptReact . Vous pouvez facilement le faire en changeant Mode langue via le panneau de commande Ctrl + Maj + P . Vous pouvez également mettre à jour settings.json en ajoutant cette configuration:

 {
  "files.associations": {
    "* .js": "javascriptreact"
  }
}

La ​​prochaine fois que vous ouvrirez un fichier JS, il sera traité comme un fichier React JSX. Je l'ai spécifié dans mes paramètres globaux car je travaille souvent avec des projets React. Malheureusement, cela rompt une fonction intégrée appelée Emmet . C'est un plugin populaire qui aide les développeurs à compléter automatiquement le code HTML et CSS de manière très intuitive. Vous pouvez résoudre ce problème en ajoutant la configuration suivante dans settings.json :

 {
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

La ​​prochaine fois que vous aurez du mal à activer Emmet pour une extension de fichier ou une langue particulière, vérifiez si cela peut être résolu en ajoutant l'association de langue dans emmet.includeLanguages ​​. Pour plus d'informations, consultez la documentation officielle de VS Code Emmet .

Raccourcis clavier

Jusqu'à présent, nous avons couvert deux raccourcis clavier:

• Ctrl + : Paramètres ouverts
• Ctrl + Maj + P : Ouvrir la palette de commandes

La palette de commandes donne accès à toutes les fonctionnalités de Visual Studio Code, y compris les raccourcis clavier pour les opérations courantes. Si vous installez une extension, toutes les actions déclenchées manuellement seront répertoriées ici. Cependant, pour des extensions telles que Prettier et Beautify elles utiliseront la même commande Format . Visual Studio Code possède également son propre plug-in de formateur intégré. Pour spécifier quel plugin doit exécuter l'action, vous devez vous rendre dans l'éditeur de paramètres et modifier la configuration du formateur par défaut . Voici un exemple de la façon dont je l'ai défini dans le mien:

 {
  "editor.defaultFormatter": "Code esbenp.prettierVS"
}

Vous pouvez également spécifier un formateur différent pour un mode de langue spécifique. Voici plusieurs autres raccourcis clavier que vous devez mémoriser:

• Ctrl + P vous permettra de naviguer vers n'importe quel fichier ou symbole en tapant son nom
• Ctrl + L'onglet vous fera parcourir le dernier ensemble de fichiers ouverts
• Ctrl + Shift + O vous permettra de naviguer vers un symbole spécifique dans un fichier
• Ctrl + G vous permettra de naviguer vers une ligne spécifique dans un fichier

Voici mes commandes préférées que j'utilise souvent lors de l'écriture de code :

• Ctrl + D : appuyez plusieurs fois pour sélectionner des mots clés identiques. Lorsque vous commencez à taper, il renomme tous les mots-clés sélectionnés
• Ctrl + Shift + Haut / Bas : Ajoutez un curseur au-dessus ou en dessous pour en éditer plusieurs lignes à la fois
• Alt + Décalage + Cliquez sur : ajoutez le curseur à plusieurs emplacements afin de modifier simultanément différentes sections de code
• ] Ctrl + J : Ajoutez 2 lignes ou plus en une. Fonctionne parfaitement si vous avez un formateur actif lorsque vous modifiez le code
• Ctrl + F : Recherchez un mot-clé dans le fichier actuel
• Ctrl + H : Rechercher et remplacer dans le fichier actuel
• Ctrl + Shift + F : Rechercher dans tous les fichiers

Si vous visitez les options du menu vous trouverez des touches de raccourci pour la plupart des commandes. Personnellement, je ne me suis jamais habitué à certaines des touches de raccourci par défaut fournies avec Visual Studio Code en raison de l'utilisation d'éditeurs tels qu'Atom depuis longtemps. La solution que j'ai trouvée était simplement d'installer le Atom Keymap . Cela me permet d'utiliser la touche de raccourci Ctrl + pour basculer la barre latérale . Si vous souhaitez modifier vous-même les liaisons du clavier, accédez simplement au menu sous Fichier > Préférences > Raccourcis clavier . ( Code > Préférences > Raccourcis clavier sur macOS).

Fonctionnalités de l'éditeur de code

Dans cette section , nous examinerons rapidement les différentes fonctionnalités conviviales fournies par Visual Studio Code pour vous aider à écrire du code plus rapide, plus propre et plus facile à gérer.

Intellisense

Il s'agit d'une fonctionnalité populaire également connue sous le nom de «complétion de code» ou de saisie semi-automatique. . Prêt à l'emploi, VS Code fournit Intellisense pour:

• JavaScript, TypeScript
• HTML
• CSS, SCSS et moins

Lorsque vous tapez votre code, une fenêtre contenant une liste d'options possibles apparaît. Plus vous tapez, plus la liste est courte. Vous pouvez appuyer sur Entrée ou Onglet une fois que votre mot-clé souhaité est mis en surbrillance pour compléter automatiquement votre code. Appuyez sur Esc pour supprimer la fenêtre contextuelle. Insertion d'un . à la fin d'un mot-clé ou en appuyant sur Ctrl + barre d'espace déclenchera l'apparition de la fenêtre contextuelle IntelliSense.

Si vous travaillez avec une langue qui est non pris en charge dès la sortie de la boîte, vous pouvez installer une extension de langage à partir du marché pour activer IntelliSense pour le langage de programmation souhaité. Consultez les documents officiels pour en savoir plus sur la façon de personnaliser IntelliSense.

Extraits de code

Saisie de code répétitif tel que instructions if pour les boucles et la déclaration des composants peut être un peu fatigante. Vous pourriez vous retrouver à copier et coller du code pour travailler plus rapidement. Heureusement, Visual Studio Code offre une fonctionnalité appelée Snippets qui sont simplement des modèles de code. Par exemple, au lieu de taper console.log tapez simplement log et IntelliSense vous invitera à insérer l'extrait de code pour vous.

Il existe de nombreux extraits de code auxquels vous pouvez accéder tant que vous 'ai mémorisé la sténographie ou le mot clé qui déclenche l'insertion d'extraits de code. Étant donné que vous êtes novice, vous pouvez accéder à une liste de tous les extraits disponibles via Palette de commandes > Insérer des extraits :

Faites défiler vers le haut et vers le bas pour afficher la liste complète. Notez que la plupart des extraits de code ont des onglets qui vous permettent de remplacer les sections de code pertinentes lorsque vous les insérez. Vous pouvez trouver plus d'extensions d'extraits sur le marché. Tu peux aussi créer le tien. Cet article vous montre comment faire les deux. Vous pouvez consulter la documentation officielle pour plus d'informations sur la définition de vos propres extraits.

Formatage

Souvent, lorsque vous saisissez ou collez du code provenant de différentes sources, nous avons tendance à mélanger les styles de codage. Par exemple:

• indentation avec espace vs tabulations
• se terminant par un point-virgule
• guillemets doubles ou guillemets simples

La mise en forme est importante, car elle rend le code lisible. Cependant, cela peut prendre du temps lorsque vous rencontrez de grandes sections de code non formaté. Heureusement, Visual Studio Code peut effectuer le formatage pour vous avec une seule commande. Vous pouvez exécuter la commande de formatage via la palette de commandes . Visual Studio Code prend en charge la mise en forme des langues suivantes prédéfinies:

• JavaScript
• TypeScript
• JSON
• HTML

Vous pouvez personnaliser le comportement de mise en forme de Visual Studio Code en modifiant les paramètres suivants sur true ou false :

• editor.formatOnType : formater la ligne après avoir tapé
• editor.formatOnSave : formater un fichier lors de l'enregistrement [19659030] editor.formatOnPaste : formatez le contenu collé

Cependant, les formateurs intégrés peuvent ne pas être conformes à votre style de codage. Si vous travaillez avec des frameworks tels que React, Vue ou Angular, vous constaterez que les formateurs intégrés ont tendance à gâcher votre code. Vous pouvez résoudre ce problème en désactivant le formatage pour une langue spécifique:

 "html.format.enable": false

Cependant, la meilleure solution consiste à installer une extension de formateur à partir du marché. Mon préféré est [Prettier] (https://marketplace.visualstudio.com/items?itemName=esbenp.prettierVS Code), car il prend en charge un grand nombre de langues, notamment:

• Flow · JSX · JSON
• CSS · SCSS · Moins
• Vue · Angulaire
• GraphQL · Markdown · YAML

Après l'avoir installé, vous devrez le définir comme formateur par défaut:

 {
  "editor.defaultFormatter": "Code esbenp.prettierVS",
  "& lsqb; javascript & rsqb;": {
    "editor.defaultFormatter": "Code esbenp.prettierVS"
  }
}

Il est également recommandé d'installer le package plus joli localement en tant que dépendance de développement:

 npm install prettier -D --save-exact

Les options de formatage par défaut que Prettier applique peuvent fonctionner pour vous. Sinon, vous pouvez le personnaliser en créant un fichier de configuration .prettierrc soit à la racine de votre projet, soit dans votre répertoire personnel. Vous pouvez placer vos règles de mise en forme personnalisées ici. Voici un exemple:

 {
  "trailingComma": "tous",
  "tabWidth": 2,
  "semi": faux,
  "singleQuote": vrai
}

N'hésitez pas à consulter d'autres extensions de formatage . Cependant, vous constaterez que Prettier est le plus populaire.

Linting

A Lint ou Linter est un outil qui analyse votre code et recherche les erreurs de syntaxe, problèmes de style, appels à des variables non déclarées, utilisation de fonctions obsolètes, utilisation abusive de la portée et de nombreux autres problèmes. Le code Visual Studio n'est fourni avec aucun Linter. Cependant, cela facilite la configuration d'un langage de programmation que vous utilisez. Par exemple, si vous travaillez sur un nouveau projet Python, vous obtiendrez une invite pour en installer un pour vous. Vous pouvez également ouvrir la palette de commandes ( Ctrl + Maj + P ) et sélectionner le Python: sélectionner le linter [19459004

Pour JavaScript, vous devez installer une extension telle que ESLint qui est la plus populaire. Cette extension nécessite que vous installiez ESLint en tant que dépendance de développement. Vous pouvez également avoir besoin d'un ou plusieurs plug-ins ESLint qui vous aideront à utiliser le style de codage et le cadre que vous utilisez. Vous pouvez consulter notre guide sur la façon de configurer ESLint. Il existe également d'autres outils de linter que vous pouvez consulter. Ma recommandation est d'aller avec ESLint car il est plus facile à configurer et prend en charge plus de styles et de cadres JavaScript.

Une fois que vous avez configuré l'outil de linting, VS Code lint automatiquement votre code chaque fois que vous enregistrez le fichier. Vous devez également mettre à jour vos scripts package.json pour inclure une commande permettant d'exécuter l'outil lint.

Débogage

Si vous utilisez des instructions print pour déboguer, vous devez cesser et vous abstenir car il existe une meilleure façon pour déboguer votre code. Avec VS Code, vous pouvez définir des points d'arrêt et inspecter des variables pendant l'exécution de votre code.

Consultez notre guide sur le débogage de projets JavaScript avec VS Code et Chrome Debugger pour une description détaillée instructions sur la façon de déboguer votre code.

Résumé

Nous arrivons maintenant à la fin du guide. Comme indiqué précédemment, les informations ici vous aideront à démarrer votre chemin dans l'amélioration de votre flux de travail de codage avec Visual Studio Code. Je vous recommande de consulter notre top 10 des extensions indispensables pour VS Code . Alors que la plupart des outils VS Code sont faciles à apprendre et à intégrer dans votre flux de travail, d'autres ont besoin de temps pour comprendre et s'habituer. Néanmoins, la maîtrise des fonctionnalités de VS Code fera de vous un développeur de logiciels efficace et meilleur.

Si vous voulez atteindre le pic absolu des performances de production avec Visual Studio Code, consultez Visual Studio Code: Édition de bout en bout et outils de débogage pour les développeurs Web . C'est un livre fantastique de Wiley que vous pouvez lire en ligne (ou non!) Dans notre bibliothèque Premium.

J'écris du code clair, lisible et modulaire. J'adore apprendre de nouvelles technologies qui améliorent l'efficacité et la productivité de mon flux de travail.