Si vous envisagez d’apprendre à coder ou si vous en écrivez déjà tous les jours, un éditeur de code fiable, comme Visual Studio Code, est indispensable. Lorsque vous écrivez du code, vous devez penser au formatage, car il facilite sa lecture par les êtres humains.
Toutes ces règles spécifiques concernant les retraits et les interlignes sont essentielles mais aussi faciles à oublier lorsque vous vous concentrez sur votre travail.
C’est pourquoi VS Code vous permet d’utiliser des extensions de formatage automatique qui peuvent vous aider dans votre travail. 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
Hyper Text Markup Language 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 de prédilection est VS Code, voici comment trouver Prettier, un formateur de code populaire, et activer la fonction de formatage automatique.
- Ouvrez Visual Studio Code sur votre ordinateur.
- Naviguez vers l’onglet extension sur le côté gauche de l’écran. Il est représenté par quatre blocs.
- Dans le champ de la barre de recherche, entrez “Prettier code formatter”.
- Vous obtiendrez plusieurs résultats de recherche, mais sélectionnez celui qui a été fait par Prettier, pas par une autre personne ou société.
- Cliquez sur le bouton “Installer”, et l’extension se téléchargera 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.
- Ouvrez ou créez un nouveau fichier HTML dans VS Code.
- Allez dans “Paramètres”, situé dans le coin inférieur gauche de l’écran.
- Entrez “Format” dans la boîte de recherche et passez à l’onglet “Utilisateur”.
- Cliquez sur l’option “Formateur par défaut” et sélectionnez “Prettier” dans la liste.
- Faites défiler l’écran un peu plus bas jusqu’à ce que vous voyiez l’option “Editor: Format On Save”.
- Cochez la case à côté de cette option.
- Retournez à votre fichier et vérifiez si le paramètre fonctionne.
Prettier devrait automatiquement formater vos fichiers HTML lorsque vous les enregistrez.
Auto Format JSON
Le JavaScript Object Notation ou JSON est classé 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 veiller à son formatage. La bonne nouvelle est que vous pouvez utiliser les extensions du formateur Prettier dans VS Code pour imposer un style cohérent à vos fichiers JSON.
Voici tout ce que vous devez faire pour activer la fonction de formatage automatique des fichiers JSON.
- Lancez VS Code et allez dans l’onglet des extensions désignées sur le côté gauche de la fenêtre.
- Recherchez “Prettier code formatter” dans le champ de recherche.
- 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é comme développeur.
- 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 ces étapes.
- Créez un nouveau fichier JSON ou ouvrez-en un qui n’a pas encore été formaté.
- Cliquez sur “Paramètres” dans le coin inférieur gauche.
- Recherchez “Format”.
- Cliquez sur la section “Formateur par défaut”. dans la liste déroulante, sélectionnez “Plus joli”.
- Faites défiler vers le bas et arrêtez-vous lorsque vous voyez l’option “Editor: Format On Save”.
- Cochez la case à côté de cette option.
- Vérifiez que la fonction de formatage automatique fonctionne.
C’est tout. L’extension Prettier de l’éditeur de code VS rend le formatage automatique sans effort.
Formatage automatique de 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 passionnés de codage. Il 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. Si Prettier fonctionne pour de nombreux langages de programmation différents, il n’est pas compatible avec Python.
Heureusement, VS Code offre une solution. L’un des meilleurs formateurs Python de VS Code est Black, et il peut être utilisé pour formater le code lorsque vous enregistrez un fichier automatiquement. Cependant, avant d’utiliser Black, vous devez télécharger l’extension Python de Microsoft pour VS Code:
- Ouvrez VS Code et cherchez “Python” dans la boîte de recherche.
- Assurez-vous que c’est l’extension de Microsoft et cliquez sur “Installer”.
- Pour installer le formateur Phyton, entrez le texte suivant dans votre environnement virtuel: “$ pip install black”.
- Allez dans “Settings” dans VS Code et recherchez “Phyton formatting provider”.
- Dans le menu déroulant, sélectionnez “Black”.
- Faites défiler vers le bas et localisez l’option “Editor: Format On Save”.
- Cochez la case en regard de cette option.
Noir, le formateur Python formatera désormais automatiquement le code chaque fois que vous enregistrerez 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.
- Ouvrez l’éditeur Visual Studio Code.
- Cliquez sur l’icône en forme d’engrenage “Settings” dans le coin inférieur gauche.
- Recherchez “Formatter” et cliquez sur l’option “Editor: Default Formatter”.
- Dans le menu déroulant, sélectionnez le formateur de code que vous souhaitez utiliser.
- Faites défiler la page vers le bas 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.
FAQs
Pourquoi l’option automatique “Format On Save” ne fonctionne pas ?
Si vous disposez de l’option “Format On Save” dans un formateur VS Code et qu’elle ne fonctionne pas correctement, il s’agit probablement d’un problème.
Peut-être que la version du formateur que vous avez rencontre des problèmes et que vous devez vérifier si une mise à jour est disponible. Cependant, il se peut que le problème ne soit pas de votre côté et qu’il soit 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 ces étapes 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: Format On Save” et décochez la case située à 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 trouver leur chemin dans l’éditeur.
Un formatage correct et continu du code est essentiel pour un code lisible, mais ces conventions peuvent être lourdes si vous devez les faire manuellement.
Mais la bonne nouvelle est que l’éditeur 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 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-le nous savoir dans la section des commentaires ci-dessous.