Indenter automatiquement son code avec Prettier sur Visual Studio Code

Prettier est un formateur de code dit "opinionated". Il applique un style cohérent en analysant votre code et en le réimprimant avec ses propres règles qui tiennent compte de la longueur maximale des lignes, en enveloppant le code si nécessaire. Entre autre, Prettier permet d'indenter automatiquement votre code lorsque vous sauvegardez.

Installation#

Recherchez Prettier sur la marketplace de VS Code ou cliquez directement sur ce lien. Cliquez ensuite sur installer.

Format on save#

Par défaut, Prettier ne formatte pas automatiquement votre code quand vous sauvegardez. Pour activer cette option, rendez-vous dans les paramètres de VS Code (molette en bas à gauche) puis sur "settings".

Recherchez "format on save" et cochez la case "Format a file on save".

Retournez dans votre code, et sauvegardez (Command + S). Normalement, votre code s'indente automatiquement selon les règles définies dans Prettier !

Autres configurations#

Vous pouvez configurer les différentes règles de Prettier en vous rendant dans les paramètres et en tappant simplement "Prettier".

Parmis les différents paramètres, ceux qui peuvent vous intéresser sont :

• "Print Width", la longueur maximale d'une ligne avant que Prettier la divise en plusieurs lignes;
• "Single Quote", si vous préférez utiliser des singles quotes plutôt que des doubles quotes ( ' vs " );
• "Semi", pour ajouter un point virgule automatiquement à la fin de chaque ligne;
• "Tab width", configuré à 2 espaces personnellement;
• "Use Tabs", qui est décoché personnellement. Même si j'appuie sur la touche tab pour indenter mon code manuellement, je préfère que Prettier remplace tout par des espaces pour que le code s'affiche mieux sur GitHub.