Formater son code signifie structurer l’affichage en fonction des balises et des accolades de son fichier.

Formater son code n’est pas seulement important pour une meilleure lecture du code, cela permet aussi de détecter les erreurs de syntaxe !

Beaucoup de programmeurs débutants négligent le formatage alors qu’il est extrêmement important !
Heureusement, VSCode permet de mettre en place le formatage automatique du code, ce qui est bien pratique.

Enfin, formater son code vous assure une bonne continuité de mise en page lorsqu’on travaille en équipe.

Formater du code

Voici mon fichier html non formaté :

(Pour info, pour arriver à ce résultat, j’ai sélectionné tout le code du fichier, puis j’ai entré le raccourci SHIFT+TAB jusqu’à ce que tout le code soit collée à gauche)

Il suffit maintenant d’ouvrir la palette de commande et de rechercher les commandes de formatage avec format, puis de lancer le formatage :

Et voilà ! Maintenant mon code est correctement formaté, et en plus il respecte les standards de formatage du langage html.

Vous pouvez apprendre le raccourci clavier de cette commande…
Il est aussi possible de formater uniquement une portion de code avec la commande “Mettre en forme la sélection avec…”

Détecter des erreurs de syntaxe

VSCode va, pour certains langages, afficher une petite ligne rouge en cas d’erreur de syntaxe.
Cela dit, cela ne permet pas toujours de comprendre quelle est l’erreur, notamment lorsqu’on oublie de fermer une fonction ou une classe avec une accolade fermante.
En formatant votre fichier, vous allez pouvoir observer alors un décalage dans le code, qui va permettre de détecter plus facilement ce qui ne va pas :

Dans l’exemple suivant, je n’ai pas fermé ma première fonction.
J’ai ensuite commencé une nouvelle fonction.
En formattant mon fichier, je peux voir que ma deuxième fonction n’est pas correctement aligné à gauche du fichier.
Je peux donc comprendre que VSCode voit cette fonction comme faisant partie de la première, ce qui n’est pas correct :

Observez les lignes verticales sous les instructions function. Ces lignes permettent de délimiter le corps de mes fonctions et sont une grande aide visuelle.
Il me suffit alors d’ajouter l’accolade fermante à ma première fonction, de formater mon code à nouveau, et voilà !

On voit bien maintenant qu’il n’y a plus de décalage. Le formatage m’a aidé à régler le problème.

Mettre en forme automatiquement à la sauvegarde

Pour éviter les oublis de formatage, une option est disponible pour que le fichier soit automatiquement formater lorsqu’on le sauvegarde :

Cliquez sur le petit engrenage en bas à gauche ou à droite de VSCode, puis sélectionnez Paramètres :

Tapez format dans la barre de recherche, et vous pouvez ensuite sélectionner les différentes options de formatage (lorsque l’on colle du code, lorsque l’on sauvegarde un fichier, lorsque l’on tape du code) :

Dans un premier temps, le “format on save” est une bonne option.