Visual Studio Code et Emmet - Coder plus vite avec Emmet
Chapitre 2 - Prise en main de Visual Studio Code

Installer Visual Studio code

Ce chapitre parle seulement de l'installation de Visual Studio Code ainsi que de l'extension pour passer VS Code en français.

Ouvrir un fichier ou un projet complet

Il y a plusieurs façons d'ouvrir un fichier ou un projet complet dans Visual Studio Code. La plus simple est de faire un clic droit sur le fichier ou le dossier et de choisir Ouvrir avec Code. Il est aussi possible d'ouvrir un fichier ou un projet complet depuis l'interface de Visual Studio Code via le menu Fichier → Ouvrir un dossier ou Fichier → Ouvrir un fichier. Il est aussi possible d'ouvrir un projet complet en glissant le dossier dans la fenêtre de Visual Studio Code.

Gestion des fichiers et des dossiers

Il y a un lien entre l'explorateur de fichiers de Windows et l'explorateur de fichiers de Visual Studio Code. Si vous créez un fichier ou un dossier dans l'explorateur de fichiers de Windows, il sera visible dans l'explorateur de fichiers de Visual Studio Code. Il est aussi possible de créer un fichier ou un dossier directement depuis l'explorateur de fichiers de Visual Studio Code. Il suffit de faire un clic droit sur le dossier et de choisir "Nouveau fichier" ou "Nouveau dossier". Il est aussi possible de renommer ou supprimer un fichier ou un dossier en faisant un clic droit dessus.

Il y a une indentation dans l'explorateur de fichiers de Visual Studio Code. Si vous créez un fichier ou un dossier dans un dossier, il sera indenté par rapport au dossier parent. De même que s'il y a un sous-dossier, il sera aussi indenté. Il est aussi possible de déplacer un fichier ou un dossier en le glissant dans un autre dossier.

Ecrire du code

Pour commencer un fichier HTML, il suffit de taper html. Un menu contextuel va s'ouvrir avec 3 choix. Il faut choisir le second choix html:5. De cette manière, Visual Studio Code va créer un fichier HTML avec la structure de base.
Il y aura certains élément qui seront sélectionnés. Avec la touche TAB, il est possible de passer d'un élément à l'autre. De cette manière, il est possible d'accéder rapidement au titre du document.

Il faut changer encore la langue du document. Il faut remplacer en par fr afin que le document soit reconnu comme un document français.

Gestion des enregistrements

Lors de la rédaction d'un document, avant la sauvegarde, on peut constater 2 choses. l'icône de l'explorateur de fichiers a reçu un bullet number pour mentionner le nombre de fichiers non sauvegardés. De plus, dans l'onglet du fichier, il y a un petit rond plein qui indique que le fichier n'est pas encore sauvegardé.

Astuce :
Pour créer le lien entre le fichier HTML et le fichier CSS, il faut ajouter la balise <link rel="stylesheet" href="style.css"> dans la section <head>. Il faut aussi faire attention à l'emplacement du fichier CSS. Le chemin d'accès doit être relatif au fichier HTML.
Pour créer la balise <link>, il faut taper link et choisir link:css.

Enregistrer tous les fichiers en même temps

Il est possible d'enregistrer tous les fichiers ouverts en même temps. Il suffit de faire CTRL + K puis S (après avoir relâché CTRL + K). Il est aussi possible de faire Fichier → Enregistrer tout.
Si le raccourci n'est pas pratique, il est possible de le changer. Il faut aller dans Fichier → Préférences → Raccourcis clavier. Dans la barre de recherche, il faut taper save all. Il faut choisir le raccourci qui vous convient le mieux.

Manipuler les lignes de code

Déplacer une ligne de code

Il est possible de déplacer une ligne de code vers le haut ouv ert le bas. Pour cela, il suffit de faire ALT + ↑ ou ALT + ↓.

Dupliquer une ligne de code

Il est aussi possible de dupliquer une ligne de code. Il suffit de faire 

Mettre le focus sur plusieurs lignes de code

Il est possible de mettre le focus sur plusieurs lignes de code. Pour cela il faut appuyer sur ALT + L. Cela est utile pour faire des modifications sur plusieurs lignes de code en même temps.

Changer la langue du clavier

Si par mégarde vous changez la langue du clavier, il est possible de revenir à la langue d'origine. Il suffit de faire MAJ + ALT

Fonctionnalités visuelles

Zoom de l'interface VS Code

Il est possible de zoomer sur l'interface de VS Code. Il suffit de faire CTRL + + pour zoomer et CTRL + - pour dézoomer.
Il est aussi possible de faire CTRL + 0 pour revenir à la taille d'origine.

Retour à la ligne automatique

A l'aide du raccourci ALT + Z, il est possible de faire un retour à la ligne automatique. Cela permet d'éviter d'avoir une barre de défilement horizontale.
Il est aussi possible de faire Affichage → Retour à la ligne automatique. En anglais, cela s'appelle Word Wrap.

Affichage des fenêtres

En cliquant sur un fichier dans l'explorateur de fichiers, il s'ouvre en mode aperçu dans un onglet. Il est reconnaissable car le nom du fichier est en italique. Si vous voulez ouvrir le fichier dans un onglet à part entière, il suffit de faire un double-clic sur le fichier.

Avec l'icône des deux pages en haut à droite, il est possible de fractionner l'éditeur en deux. Cela permet d'avoir deux fichiers ouverts en même temps. C'est celui qui a le focus qui sera dupliqué sur la droite. Il sera nécessaire de fermer l'original sur la gauche pour ne pas avoir deux fois le même fichier ouvert.

La barre d'activité

La barre d'activité est située à gauche de l'interface de Visual Studio Code. Elle permet d'accéder rapidement aux différentes fonctionnalités de l'éditeur. Il y a 5 icônes principales :

Avec un G maintenu, il est possible d'organiser la barre d'activité. Il suffit de glisser-déposer les icônes pour les réorganiser. Avec un D dans la barre d'activité, il est possible de déterminer si une fonctionnalité est activée ou non.

Modifier le thème de Visual Studio Code

Pour modifier le thème de Visual Studio Code, il faut aller dans Fichier → Préférences → Thème de couleur. Il est aussi possible de faire CTRL + K puis CTRL + T. Il y a plusieurs thèmes disponibles par défaut. Il est aussi possible d'installer des thèmes supplémentaires depuis le marketplace.

Pour installer un thème, il faut aller dans les Thèmes par couleur (comme pour la modification) et rechercher le thème souhaité. Une fois installé, il suffit de le sélectionner dans le menu des thèmes de couleur.

Disposition de l'éditeur

La disposition de l'éditeur permet de modifier l'affichage des fichiers ouverts. Pour ce faire, il faut aller dans le menu Affichage → Disposition de l'éditeur. Il est possible de choisir entre plusieurs dispositions :

Il est aussi possible de fractionner avec un D de souris.

Il est possible d'afficher l'éditeur sur trois colonnes. Il faut aller dans le menu Affichage → Disposition de l'éditeur et choisir Trois colonnes.

Il est possible ensuite de déplacer les fichiers ouverts par glisser-déposer dans les différentes colonnes.

Les extensions

Les extensions sont des modules complémentaires qui permettent d'ajouter des fonctionnalités à Visual Studio Code. Il y a plusieurs extensions disponibles dans le marketplace. Pour accéder au marketplace, il faut cliquer sur l'icône Extensions dans la barre d'activité ou faire Affichage → Extensions.

Une fois dans le marketplace, il est possible de rechercher des extensions par mots-clés. Il suffit de taper le nom de l'extension dans la barre de recherche. Il est aussi possible de parcourir les extensions par catégories.

Pour installer une extension, il suffit de cliquer sur le bouton Installer à côté de l'extension souhaitée. Une fois installée, l'extension sera disponible dans Visual Studio Code.

Pour désinstaller une extension, il suffit de cliquer sur le bouton Désinstaller à côté de l'extension souhaitée. Il est aussi possible de désactiver une extension sans la désinstaller en cliquant sur le bouton Désactiver.

Pour mettre à jour une extension, il suffit de cliquer sur le bouton Mettre à jour à côté de l'extension souhaitée. Il est aussi possible de mettre à jour toutes les extensions en cliquant sur le bouton Mettre à jour tout.

Pour configurer une extension, il faut aller dans les paramètres de Visual Studio Code. Il suffit de faire Fichier → Préférences → Paramètres. Dans la barre de recherche, il faut taper le nom de l'extension. Il est possible de modifier les paramètres de l'extension depuis cette interface.

Les extensions utiles

Voici quelques extensions utiles pour Visual Studio Code :