Toutes ces règles spécifiques concernant les retraits et l’espacement des lignes sont essentielles, mais il est facile de les oublier lorsqu’on se concentre sur son travail.

C’est pourquoi VS Code vous permet d’utiliser des extensions de formatage automatique qui peuvent vous aider tout au long du processus. Certaines extensions de formatage automatique peuvent formater plus d’un langage de programmation, tandis que vous devrez intégrer des extensions spécialisées pour d’autres.

Comment formater automatiquement du HTML

Le langage de balisage hypertexte ou HTML est un langage de codage utilisé pour construire et afficher des pages web. Les développeurs web et les ingénieurs logiciels utilisent le HTML tous les jours et peuvent bénéficier d’un outil de formatage automatique.

Si votre éditeur de code préféré est VS Code, voici comment trouver Prettier, un formateur de code populaire, et activer la fonction de formatage automatique.

1. Ouvrez Visual Studio Code sur votre ordinateur.
   
2. Naviguez jusqu’à l’onglet “extension” sur le côté gauche de l’écran. Il est représenté par quatre blocs.
   
3. Dans le champ de la barre de recherche, saisissez “Prettier code formatter”.”
   
4. Vous obtiendrez plusieurs résultats de recherche, mais sélectionnez celui qui a été fait par Prettier, et non par une autre personne ou société.
   
5. Cliquez sur le bouton “Installer”, et l’extension sera téléchargée en quelques secondes.
   

Une fois que vous avez installé le formateur Prettier, vous pouvez activer la fonction de formatage automatique et assurer un style cohérent lorsque vous écrivez du code.

1. Ouvrez ou créez un nouveau fichier HTML dans VS Code.
   
2. Allez dans “Paramètres”, situé dans le coin inférieur gauche de l’écran.
   
3. Entrez “Format” dans la boîte de recherche et passez à l’onglet “Utilisateur”.
   
4. Cliquez sur l’option “Formateur par défaut” et sélectionnez “Prettier” dans la liste.
   
5. Descendez un peu jusqu’à ce que vous voyiez l’option “Editor: Format On Save”.
   
6. Cochez la case à côté de cette option.
   
7. Retournez à votre fichier et vérifiez si le réglage fonctionne.

Prettier devrait automatiquement formater vos fichiers HTML au fur et à mesure que vous les enregistrez.

Formatage automatique de JSON

La notation d’objets JavaScript ou JSON est classée comme un format d’échange de données indépendant du langage. Les applications mobiles et les programmes informatiques utilisent les fichiers JSON pour lire les données des serveurs et les afficher à l’écran.

Lorsque vous créez un fichier JSON dans l’éditeur Visual Studio Code, vous devez également tenir compte du formatage. La bonne nouvelle est que vous pouvez utiliser les extensions de formateur Prettier dans VS Code pour appliquer un style cohérent à vos fichiers JSON.

Voici tout ce que vous devez faire pour activer la fonction de formatage automatique des fichiers JSON.

1. Lancez VS Code et allez dans l’onglet “extensions” sur le côté gauche de la fenêtre.
   
2. Recherchez “Prettier code formatter” dans le champ de recherche.
   
3. Le premier résultat est généralement celui sur lequel vous voulez cliquer. Cependant, pour être sûr, sélectionnez celui qui a “Prettier” listé en tant que développeur.
   
4. Cliquez sur “Installer” et attendez quelques secondes pour que le formateur se télécharge.
   

Lorsque le formateur Prettier est installé, assurez-vous que la fonction de formatage automatique est activée en suivant les étapes suivantes.

1. Créez un nouveau fichier JSON ou ouvrez-en un qui n’a pas encore été formaté.
2. Cliquez sur “Paramètres” dans le coin inférieur gauche.
   
3. Recherchez “Format.”
   
4. Cliquez sur la section “Formateur par défaut”. dans la liste déroulante, sélectionnez “Prettier.”
   
5. Faites défiler vers le bas et arrêtez-vous lorsque vous voyez l’option “Editor: Format On Save”.
   
6. Cliquez sur la case à cocher à côté de cette option.
   
7. Vérifiez que la fonction de formatage automatique fonctionne.

C’est tout ce qu’il y a à faire. L’extension Prettier dans l’éditeur VS Code rend le formatage automatique sans effort.

Format automatique Python

De nos jours, Python est l’un des langages de programmation les plus populaires et est largement utilisé par les développeurs web et les amateurs de codage. Le langage Python est utilisé pour concevoir et construire des logiciels et des sites web, analyser des données, automatiser des tâches, et bien plus encore.

Si vous utilisez VS Code pour éditer le fichier Python, vous devrez utiliser le bon formateur. Bien que Prettier fonctionne avec de nombreux langages de programmation, il n'est pas compatible avec Python.

Heureusement, VS Code offre une solution. Black est l’un des meilleurs formateurs Python dans VS Code, et il peut être utilisé pour formater le code chaque fois que vous enregistrez un fichier automatiquement. Cependant, avant d’utiliser Black, vous devez télécharger l’extension Python de Microsoft pour VS Code:

1. Ouvrez VS Code et recherchez “Python” dans la boîte de recherche.
   
2. Assurez-vous qu’il s’agit bien d’une extension Microsoft et cliquez sur “Installer”.”
   
3. Pour installer le formateur Phyton, entrez le texte suivant dans votre environnement virtuel: “$ pip install black”.
4. Allez dans “Paramètres” dans VS Code et cherchez “Fournisseur de formatage Phyton”.”
   
5. Dans le menu déroulant, sélectionnez “Black.”
   
6. Faites défiler l’écran vers le bas et repérez l’option “Editor: Formater lors de l’enregistrement”.
   
7. Cochez la case à côté de cette option.
   

Black, le formateur Python formatera automatiquement le code à chaque fois que vous sauvegarderez le fichier.

VS Code Auto Format On Save

Vous pouvez activer la fonction de formatage automatique quel que soit le langage de programmation ou le formateur de code que vous utilisez dans VS Code.

La plupart des développeurs utilisent plusieurs extensions de formatage de code dans VS Code, vous pouvez donc vous assurer que chacune d’entre elles formate automatiquement le fichier lorsque vous l’enregistrez.

Voici comment cela fonctionne.

1. Ouvrez l’éditeur Visual Studio Code.
   
2. Cliquez sur l’icône de l’engrenage “Paramètres” dans le coin inférieur gauche.
   
3. Recherchez “Formatter” et cliquez sur l’option “Editor: Formateur par défaut”.
   
4. Dans le menu déroulant, sélectionnez le formateur de code que vous souhaitez utiliser.
   
5. Descendez un peu et cochez la case à côté de l’option “Editor: Format On Save”.
   

Vous pouvez répéter le processus pour chaque formateur de code que vous utilisez dans VS Code.

FAQ

Pourquoi la fonction automatique “Format On Save” ne fonctionne-t-elle pas?

Si vous avez l’option “Format On Save” dans un formateur de VS Code, et qu’elle ne fonctionne pas correctement, vous avez probablement affaire à un problème.

Peut-être que la version du formateur que vous avez a des problèmes et que vous devez vérifier si une mise à jour est disponible. Cependant, le problème n’est peut-être pas de votre côté, et il sera résolu par les développeurs de VS Code.

Comment désactiver le formatage automatique dans VS Code?

Désactiver la fonction de formatage automatique est un jeu d’enfant. Suivez les étapes suivantes pour désactiver le formatage automatique.

1. Ouvrez l’éditeur VS Code et cliquez sur l’icône “Paramètres”.

2. Recherchez “Formateur” et sélectionnez le formateur pour lequel vous souhaitez désactiver le formatage automatique.

3. Trouvez l’option “Editor: Formater lors de l’enregistrement” et décochez la case à côté.

Formatage automatique du code sans effort dans Visual Studio Code

L’un des meilleurs aspects de l’utilisation de VS Code est son interface bien conçue, qui permet même aux débutants de s’y retrouver dans l’éditeur.

Un formatage correct et continu du code est essentiel pour un code lisible, mais ces conventions peuvent être fastidieuses si vous devez les faire manuellement.

Mais la bonne nouvelle, c’est que l’éditeur de VS Code dispose de nombreux formateurs de code qui peuvent faciliter et accélérer l’écriture d’un code lisible.

Qu’il s’agisse de Prettier, Black ou de toute autre extension, les utilisateurs ont toujours la possibilité de formater automatiquement le code au moment où ils enregistrent le fichier.

Quel langage de programmation utilisez-vous et quel formateur fonctionne le mieux? Faites-nous part de vos commentaires dans la section ci-dessous.