Comment formater automatiquement dans VS Code pour gagner du temps et des efforts [2023]

0 Partages

Visual Studio Code, communément appelé VS Code, est l’un des éditeurs de code les plus utilisés. VS Code a un support intégré pour Node.js, JavaScript et TypeScript. Cependant, vous pouvez utiliser diverses extensions pour le rendre accessible à la plupart des autres langages et runtimes.

Microsoft est la société qui a développé cet éditeur de code gratuit et open-source.

VS Code est populaire en raison de ces fonctionnalités ;

Intellisense : VS Code fournit l’auto-complétion du code et la coloration syntaxique.
Multiplateforme : vous pouvez utiliser cet éditeur de code sur les systèmes d’exploitation Linux, Windows et macOS.
Disponibilité de diverses extensions : La disponibilité de diverses extensions peut également transformer VS Code en un environnement de développement intégré (IDE).
Prise en charge multilingue : vous pouvez utiliser cet outil avec presque tous les langages de programmation via les extensions VS Code.
Terminal intégré : le terminal intégré dans VS Code permet aux développeurs d’exécuter des commandes Git directement depuis l’éditeur de code. Vous pouvez ainsi valider, pousser et tirer des modifications depuis cet éditeur.

Table des matières

Formatage automatique dans VS Code

Conditions préalables

VS Code : cet éditeur de code est téléchargeable gratuitement. Si vous ne l’avez pas installé sur votre machine, téléchargez-le depuis le site officiel, en fonction de votre système d’exploitation.
Sélectionnez la langue à utiliser : vous devez décider de la langue à utiliser car il existe différents formateurs pour différentes langues.
Un formateur : VS Code utilise des extensions pour le formatage du code. Nous utiliserons Prettier dans cet article. Cependant, vous êtes libre d’utiliser n’importe quel formateur adapté à la langue que vous utilisez.

Le formatage automatique est une fonctionnalité qui formate automatiquement des blocs/lignes de code ou un fichier sur l’éditeur de code en fonction de règles et de directives spécifiques. Cette fonctionnalité est basée sur un fichier de configuration spécifiant les règles de mise en forme sur l’indentation, les sauts de ligne et l’espacement.

Lorsque la fonction de formatage automatique est activée, toutes ces règles seront appliquées à tous les fichiers de votre base de code au fur et à mesure que vous l’écrivez.

Cependant, vous pouvez également désactiver la mise en forme automatique pour un bloc de code spécifique si vous souhaitez qu’il se démarque des autres. Pour ce faire, vous pouvez envelopper le morceau de code dans un bloc de commentaire qui précise les règles à appliquer.

Avantages des codes de formatage automatique dans le code VS

Gain de temps : l’écriture de code et le formatage peuvent prendre du temps. Le formatage automatique vous fait gagner du temps, et vous pouvez ainsi vous concentrer davantage sur le processus d’écriture et la syntaxe.
Cohérence : même si le code source n’apparaît pas côté client, il doit y avoir une certaine cohérence. La mise en forme automatique est pratique, en particulier pour les grands projets avec plusieurs contributeurs.
Respecte les meilleures pratiques : la fonction de mise en forme automatique est pratique pour appliquer des conventions d’indentation, d’espacement et de dénomination cohérentes.
Pour une lecture facile du code : un code bien formaté est facile à suivre lors des révisions de code. Les nouveaux développeurs qui rejoignent votre organisation comprendront facilement un code bien formaté.

Comment activer le format automatique dans le code VS et le personnaliser

Suivez ces étapes pour activer la mise en forme automatique :

Vous avez besoin d’un formateur sous la forme d’une extension pour activer la mise en forme automatique dans VS Code. Vous pouvez trouver l’icône des extensions dans le menu de votre VS Code.

Installez l’extension Plus jolie. Rechercher plus joli; vous trouverez de nombreuses extensions partageant le même nom. Cliquez sur le premier, développeur par Prettier, et cliquez sur « installer ».

Une fois Prettier installé sur votre VS Code, vous pouvez activer la fonction de formatage automatique.

Nous utilisons un simple fichier HTML d’une page de connexion pour montrer comment activer le formatage automatique.

Nous utiliserons ce code :

<!DOCTYPE html>

<html>

 <head>

 <title>Login Form</title>

 </head>

 <body style>

 <h2 style="text-align: center; margin-top: 50px;">Login </h2>

 <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);">

             <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label>

 <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>

<label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label>

 <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>

<input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">

 </form>

 </body>

</html>

Même si le code ci-dessus est fonctionnel, il est difficile à lire et à suivre car il n’est pas indenté comme prévu. Nous utiliserons Prettier pour formater automatiquement le code.

Suivez ces étapes.

Créez un fichier HTML (index.html) et ajoutez le code ci-dessus

Localisez les paramètres dans la partie inférieure gauche de votre code VS

3. Tapez Formatter dans la barre de recherche et sélectionnez Prettier dans l’onglet Editor:Default Formatter.

4. Localisez Editor: Format on Save et cochez la case.

5. Enregistrez votre fichier HTML, sélectionnez les entrées sur votre document HTML, cliquez avec le bouton droit et sélectionnez Formater le document.

6. Vérifiez si votre document a été formaté. Cette extension formatera automatiquement tous les autres codes que vous écrivez sur votre VS Code.

6. Ajustez les paramètres de configuration de Prettier : Prettier est configuré pour effectuer beaucoup de choses par défaut. Cependant, vous pouvez toujours le personnaliser en fonction de vos besoins. Accédez aux paramètres de votre code VS, recherchez Prettier et ajustez les paramètres à votre guise.

7. Créez un fichier de configuration plus joli : les paramètres que vous avez configurés sur votre machine peuvent différer des autres si vous travaillez en équipe. Un fichier de configuration Prettier vous assurera d’avoir un style de code cohérent pour votre projet. Créez un fichier .prettierrc avec l’extension .json pour configurer les paramètres de votre projet. Nous pouvons ajouter ce code au fichier JSON à des fins de démonstration ;

{

  "trailingComma": "es5",

  "tabWidth": 4,

  "semi": false,

  "singleQuote": true

}

Le bloc de code ci-dessus spécifie quatre choses, les virgules de fin, la largeur de tabulation, l’utilisation de points-virgules et s’il faut utiliser des guillemets simples ou doubles. Dans ce cas;

Une virgule de fin ne sera ajoutée que lorsque le code sera transpilé vers es5.
La largeur de tabulation, le nombre d’espaces pour chaque tabulation, est définie sur 4.
Semi indique si vous devez ou non ajouter des points-virgules à votre code à la fin des instructions. Nous l’avons défini comme faux, ce qui signifie que les points-virgules ne seront pas ajoutés.
Vous pouvez utiliser des guillemets simples ou doubles dans votre code. Nous avons spécifié que nous devrions utiliser des guillemets simples pour ce projet.

Vous pouvez consulter les documents Prettier pour comprendre comment créer des paramètres de configuration cohérents.

Meilleures pratiques pour le formatage automatique dans VS Code

Utilisez le bon format

Même si nous avons utilisé Prettier dans cet article à des fins de démonstration, cela ne signifie pas qu’il s’applique à toutes les langues. Il existe des centaines d’extensions de formatage pour VS Code, et c’est à vous de déterminer ce qui convient à vos besoins. Par exemple, des formateurs tels que Prettier et Beautify conviennent à HTML et CSS. D’autre part, vous pouvez utiliser les extensions Black ou Python pour formater votre code Python.

Utiliser un style de code cohérent

Comme vous l’avez vu, vous pouvez personnaliser les paramètres du formateur. Si vous travaillez en équipe, assurez-vous d’avoir les mêmes configurations pour créer un style de code cohérent. La meilleure approche consiste à créer un fichier .prettierrc.extension pour inclure toutes les configurations de votre projet.

Utiliser des linters

Vous pouvez utiliser des linters pour vérifier les violations de style, les erreurs de syntaxe et les erreurs de programmation dans votre code. La combinaison des linters avec le formatage automatique vous fera gagner beaucoup de temps et d’efforts pour rendre votre code lisible et débogage.

Utiliser les raccourcis clavier

VS Code propose des centaines de raccourcis pour vous faire gagner du temps lors du formatage. Vous pouvez même personnaliser ces commandes en quelque chose de mémorable.

Vérifiez votre code avant de vous engager

Même si le peluchage et la mise en forme automatique peuvent résoudre certains problèmes sur votre code ; vous devez encore revoir votre code avant d’entrer la commande commit.

Raccourcis de formatage du code

VS Code est un éditeur de code multiplateforme que vous pouvez utiliser sur les systèmes Windows, Mac et Linux tels qu’Ubuntu. Vous pouvez utiliser les raccourcis suivants pour formater l’intégralité du document ou des zones spécifiques de votre code en surbrillance ;

les fenêtres

La combinaison Maj + Alt + F formate le document entier.
La combinaison Ctrl + K, Ctrl + F formate une section de votre code que vous avez sélectionnée. Par exemple, une div.

macOS

La combinaison Maj + Option + F formate l’ensemble du document.
La combinaison Ctrl + K, Ctrl + F formate une section de votre code que vous avez sélectionnée. Par exemple, une div.

Ubuntu

La combinaison Ctrl + Maj + I formate le document entier.
La combinaison Ctrl + K, Ctrl + F formate une section de votre code que vous avez sélectionnée. Par exemple, une div.

Cependant, notez que certains de ces raccourcis peuvent échouer si vous avez personnalisé votre code VS avec divers raccourcis.

Vous pouvez vérifier vos raccourcis VS Code en suivant ces étapes.

Ouvrez VS Code et cliquez sur l’élément Fichier dans le coin supérieur gauche.
Faites défiler jusqu’à Préférences
Cliquez sur Raccourcis clavier pour afficher tous les raccourcis que vous pouvez utiliser.

Conclusion

Le formatage automatique peut vous faire gagner beaucoup de temps lorsque vous l’activez. Le choix d’une extension sera différent selon la langue que vous utilisez. Vous pouvez installer plusieurs formateurs de code en fonction des langages de programmation que vous utilisez pour vos projets.

Vérifiez toujours la documentation du formateur que vous choisissez pour votre code. Cela vous permettra de comprendre les langues prises en charge et de savoir comment en tirer le meilleur parti.

Consultez notre article sur les meilleures extensions VS Code que les développeurs devraient utiliser.