Comment formater automatiquement le code dans VS Code

Si vous envisagez d’apprendre à coder ou si vous l’é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 sera plus facile à lire pour les gens.

Toutes ces règles spécifiques concernant l’indentation et l’espacement des lignes sont importantes, mais il est facile de les oublier lorsque vous êtes concentré sur votre 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 d’autres vous obligent à intégrer des extensions spécialisées.

Comment formater automatiquement HTML

Hypertext Markup Language ou HTML est un langage de codage utilisé pour créer et afficher des pages Web. Les développeurs Web et les ingénieurs logiciels utilisent HTML au quotidien et peuvent bénéficier d’un outil de formatage automatique.

Si vous préférez l’éditeur de code VS, voici comment vous pouvez trouver Prettier, le formateur de code populaire, et activer la fonction de formatage automatique.

• Ouvrez Visual Studio Code sur votre ordinateur.

• Cliquez sur l’onglet des extensions sur le côté gauche de l’écran. Il se présente sous la forme de quatre blocs.

• Entrez « Prettier code formatter » dans le champ de recherche.

• Vous obtiendrez plusieurs résultats de recherche, mais choisissez celui créé par Prettier et non par une autre personne ou entreprise.

• Cliquez sur le bouton « Installer » et l’extension se téléchargera en quelques secondes.

En installant le formateur Prettier, vous pouvez activer la fonction de formatage automatique et garantir des styles cohérents lors de l’écriture de 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.

• Tapez « Format » dans la boîte de recherche et cliquez sur l’onglet « Utilisateur ».

• Cliquez sur l’option Formatage par défaut et sélectionnez Plus joli dans la liste.

• Faites défiler un peu jusqu’à ce que vous voyiez l’option « Éditeur : formater lors de l’enregistrement ».

• Cochez la case à côté de cette option.

• Revenez à votre dossier et vérifiez si le réglage fonctionne.

Prettier devrait automatiquement formater les fichiers HTML lorsque vous les enregistrez.

Format JSON automatique

La notation d’objet 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 des fichiers JSON pour lire les données des serveurs et les afficher à l’écran.

Lorsque vous créez un fichier JSON dans l’éditeur de code Visual Studio, vous devez également faire attention au formatage. La bonne nouvelle est que vous pouvez utiliser les extensions de formateur Prettier dans VS Code pour garantir un style cohérent dans vos fichiers JSON.

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

• Lancez VS Code et accédez à l’onglet Extensions attribué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, choisissez celui qui dit « Prettier » en tant que développeur.

• Cliquez sur « Installer » et attendez quelques secondes que le formateur se charge.

Une fois le formateur Prettier installé, assurez-vous que la fonction de formatage automatique est activée en suivant les étapes ci-dessous.

• Créez un nouveau fichier JSON ou ouvrez un fichier qui n’a pas encore été formaté.
• Cliquez sur « Paramètres » dans le coin inférieur gauche.

• Recherchez « Formater ».

• Cliquez sur la section Format par défaut. sélectionnez « Plus beau » dans la liste déroulante.

• Faites défiler vers le bas et arrêtez-vous lorsque vous voyez l’option « Éditeur : formater lors de l’enregistrement ».

• Cochez la case à côté de cette option.

• Assurez-vous que la fonction de formatage automatique fonctionne.

C’est tout. L’extension Prettier de l’éditeur VS Code simplifie le formatage automatique.

Format Python automatique

Python est l’un des langages de programmation les plus populaires de nos jours et est largement utilisé par les développeurs Web et les passionnés de programmation. Il est utilisé pour concevoir et créer des logiciels et des sites Web, analyser des données, automatiser des tâches, etc.

Si vous utilisez VS Code pour modifier un 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. L’un des meilleurs formateurs Python dans VS Code est Black, et il peut être utilisé pour formater le code chaque fois que vous enregistrez automatiquement un fichier. Cependant, avant d’utiliser Black, vous devez télécharger l’extension Microsoft Python pour VS Code :

• Ouvrez VS Code et recherchez « Python » dans le champ de recherche.

• Assurez-vous qu’il s’agit d’une extension Microsoft et cliquez sur Installer.

• Pour installer le formateur Phyton, entrez le texte suivant dans l’environnement virtuel : « $ pip install black ».
• Allez dans « Paramètres » dans VS Code et recherchez « Fournisseur de formatage Phyton ».

• Sélectionnez « Noir » dans le menu déroulant.

• Faites défiler vers le bas et recherchez l’option « Éditeur : formater lors de l’enregistrement ».

• Cochez la case à côté de cette option.

Noir, le formateur Python formatera désormais automatiquement le code à chaque fois que vous enregistrerez un fichier.

Formatage automatique du code VS lors de l’enregistrement

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 chacun d’entre eux formate automatiquement le fichier lors de son enregistrement.

Voici comment ça fonctionne.

• Ouvrez l’éditeur de code Visual Studio.

• Cliquez sur l’icône d’engrenage « Paramètres » dans le coin inférieur gauche.

• Trouvez « Formatter » et cliquez sur « Editor: Default Formatter ».

• Sélectionnez le formateur de code que vous souhaitez utiliser dans le menu déroulant.

• Faites défiler un peu vers le bas et cochez la case à côté de l’option « Éditeur : Formater à l’enregistrement ».

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

Questions fréquemment posées

Pourquoi le « Formatage à l’enregistrement » automatique ne fonctionne-t-il pas ?

Si vous avez l’option « Formater lors de l’enregistrement » dans le formateur de VS Code et qu’elle ne fonctionne pas correctement, vous avez probablement affaire à un bogue.

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

Comment désactiver le formatage automatique dans VS Code ?

La désactivation de la fonction de formatage automatique est très simple. Suivez les étapes ci-dessous 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. Recherchez l’option « Éditeur : formater lors de l’enregistrement » et décochez la case à côté.

Mise en forme automatique facile du code dans Visual Studio Code

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

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

Mais la bonne nouvelle est que l’éditeur de code VS dispose de nombreux outils de formatage de code qui peuvent faciliter et accélérer l’écriture de code lisible.

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

Quel langage de programmation utilisez-vous et quel formateur fonctionne le mieux ? Faites-le nous savoir dans les commentaires ci-dessous.