Lorsque vous tapez des commandes dans VS Code, essayer d’être soigné peut parfois être la dernière chose à laquelle vous pensez. Bien que le formatage ne soit pas nécessaire pour qu’un programme s’exécute, il aide grandement lors du débogage et de la recherche d’erreurs.
Dans cet article, nous vous montrerons comment formater le code dans VS Code ainsi que d’autres conseils utiles pour garder votre code bien organisé.
Comment formater le code
VS Code a des commandes intégrées pour organiser le code actuellement tapé au format standard. Ces touches de raccourci ne nécessitent aucune extension supplémentaire et peuvent être utilisées à tout moment. Les raccourcis sont les suivants :
Pour PC
Formatez l’intégralité du document :
Ouvrez le fichier avec le code que vous souhaitez formater.
Appuyez sur « Maj + Alt + F ».
Enregistrez les modifications en cliquant sur « Fichier » dans le coin supérieur gauche puis en choisissant « Enregistrer » ou en appuyant sur « Ctrl + S ».
Formatage du code sélectionné uniquement :
Sur le fichier contenant les lignes de code que vous souhaitez formater, sélectionnez les lignes en les surlignant avec votre souris.
Appuyez sur « Ctrl + K ».
Appuyez sur « Ctrl + F ».
Enregistrez les modifications soit en choisissant « Enregistrer » dans le menu Fichier dans le coin supérieur gauche, soit en appuyant sur « Ctrl + S ».
Notez que si vous appuyez sur « Ctrl + F » sans appuyer d’abord sur « Ctrl + K », vous ouvrirez le menu Rechercher. Si cela se produit, fermez simplement le clic sur le bouton « x » ou appuyez sur Esc.
Déplacer les lignes vers le haut ou vers le bas :
Déplacez votre curseur au début de la ligne que vous souhaitez déplacer.
Maintenez la touche Alt enfoncée.
Pour déplacer la ligne vers le haut, appuyez sur la flèche vers le haut. Pour le déplacer vers le bas, appuyez sur la flèche vers le bas.
Enregistrez votre fichier en le choisissant dans le menu Fichier dans le coin supérieur gauche de la fenêtre ou en appuyant sur « Ctrl + S ».
Modifier l’indentation d’une seule ligne :
Déplacez votre curseur au début de la ligne dans laquelle vous souhaitez modifier l’indentation.
Appuyez sur « Ctrl + ] » pour augmenter l’indentation.
Appuyez sur « Ctrl + [“ to decrease the indent.
Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
For Mac
Format the entire document:
Open the file with the code that you wish to format.Press “⇧ + ⌥ + F.”
Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.Formatting selected code only:
Highlight the part of the document that you wish to format.Press “⌘ + K”.
Press “⌘ + F”.
Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.
Move lines up or down:
Place your cursor at the beginning of the line you want to edit.Hold down the “⌥” Key.
To move a line up, press the up arrow. To move it down, press the down arrow.
Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
Change indentation of a single line:
Move your cursor to the beginning of the line in which you want to change the indention.Press “⌘ + ]” pour augmenter l’indentation.
Appuyez sur « ⌘ +[« pourdiminuerleretrait[“todecreasetheindent
Enregistrez le fichier en appuyant sur « ⌘ + S » ou en choisissant « Enregistrer » dans le menu Fichier dans le coin supérieur gauche de la fenêtre.
Code de format de code VS lors de l’enregistrement
VS Code n’a pas de commande native qui formate votre document lors de l’enregistrement. Au lieu de cela, cela peut être fait en installant une extension de formatage sur votre application VS Code. La plus populaire de ces extensions est Prettier qui fournit de nombreuses fonctionnalités de formatage à VS Code. Prettier peut être installé en procédant comme suit :
Ouvrez le code VS.
Cliquez sur le bouton Extensions situé dans le menu de gauche. C’est l’icône qui ressemble à quatre cases. Alternativement, vous pouvez appuyer sur « Ctrl + Shit + x » pour PC ou « ⌘ + ⇧ + x » sur Mac.
Dans la barre de recherche en haut du menu, tapez Prettier.
Cliquez sur le bouton Installer dans le coin inférieur droit de l’icône Prettier.
Attendez que l’extension termine l’installation.
Avant que Prettier puisse commencer à formater automatiquement votre document lors de l’enregistrement, vous devrez configurer l’extension pour activer la fonctionnalité. Cela se fait en procédant comme suit :
Ouvrez la fenêtre des paramètres en appuyant sur « Ctrl + », sur PC ou « ⌘ + », sur Mac.
Dans la barre de recherche, tapez formateur. Cela devrait faire apparaître plusieurs paramètres de formatage.
Dans le paramètre Éditeur : Formateur par défaut, assurez-vous que l’extension sélectionnée est Plus jolie. S’il n’y a pas de formateur par défaut ou si VS Code utilise un autre formateur par défaut, appuyez sur la flèche déroulante. Sélectionnez « Prettier – Code Formatter » dans la liste. Alternativement, Prettier peut apparaître sur la liste sous le nom « esbenp.prettier-vscode ».
Assurez-vous que l’option « Éditeur : formater lors de l’enregistrement » a été cochée. Si ce n’est pas le cas, activez la coche.
Tapez « Prettier » dans la barre de recherche des paramètres.
Faites défiler vers le bas jusqu’à ce que vous trouviez la ligne « Prettier: Require Config ». Assurez-vous que la case a été cochée. Ce paramètre empêche Prettier de formater des documents sans fichier de configuration. C’est pratique lorsque vous regardez du code téléchargé qui peut avoir ses propres règles de formatage. Cela vous évite d’écraser involontairement les options de formatage. Notez que les fichiers sans titre seront toujours formatés automatiquement même si ce paramètre est coché.
Vous pouvez modifier des paramètres spécifiques de Prettier en fonction de vos préférences. Une fois que vous avez terminé, vous pouvez quitter ce menu.Comme vous avez configuré Prettier pour formater automatiquement uniquement lorsqu’il y a un fichier de configuration, vous devez en créer un pour chaque projet. Cela se fait en suivant ces étapes :
Sélectionnez la racine de votre projet dans le menu de gauche.
Cliquez sur le bouton nouveau fichier pour créer un fichier de configuration.
Nommez ce fichier « .prettierrc ».
Sur le fichier, entrez simplement {}.
Prettier formatera désormais automatiquement votre document chaque fois que vous l’enregistrerez.Conseils pour garder le code organisé
Bien que l’indentation ne soit pas nécessaire à l’exécution d’un programme, elle peut faciliter le débogage en compartimentant le code en modules gérables. Les instructions If-Then ou les cas imbriqués, par exemple, peuvent en bénéficier en permettant à chaque option alternative de se distinguer visuellement les unes des autres. Cela est pratique lorsque vous avez affaire à des erreurs de logique plutôt qu’à des erreurs de syntaxe.Si vous nommez des modules ou de courtes lignes de code, prenez l’habitude d’utiliser des titres descriptifs plutôt que de simplement l’appeler module 1, module 2, etc. Cela permet de savoir plus facilement quelle partie du code remplit une fonction particulière.C’est toujours une bonne idée d’utiliser les commentaires à votre avantage. Que vous incluiez une description rapide ou que vous ajoutiez simplement une note pour vous-même, les commentaires sont extrêmement utiles lors du débogage.Code d’organisation
Garder vos projets correctement formatés facilite non seulement la lecture, mais aide également à identifier les erreurs et à garder votre code organisé. Bien que non nécessaire au fonctionnement d’un programme, savoir formater vos fichiers en VS Code est un avantage certain.
Connaissez-vous d’autres façons de formater vos fichiers dans VS Code ? N’hésitez pas à partager vos réflexions dans la section des commentaires ci-dessous.
