In Développement | Dernière mise à jourated: le 13 mars 2023

Cloudways propose un hébergement cloud géré aux entreprises de toutes tailles pour héberger un site Web ou des applications Web complexes.

How to Auto-Format in VS Code to Save Time and Effort

By Titus Kamunya

How-to-Auto-Format-in-VS-Code-to-Save-Time-and-Effort

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.
Multiplate-forme: Vous pouvez utiliser cet éditeur de code sous Linux, Windows et les systèmes d'exploitation macOS.
Disponibilité de diverses extensions : La disponibilité de diverses extensions peut également transformer VS Code en une intégrationated environnement de développement (IDE).
Support multilingue: Vous pouvez utiliser cet outil avec presque tous les langages de programmation via les extensions VS Code.
Intégréateborne d: Le terminal intégré dans VS Code permet aux développeurs d'exécuter Commandes Git directement depuis l'éditeur de code. Vous pouvez ainsi valider, pousser et tirer des modifications depuis cet éditeur.

Formatage automatique dans VS Code

Pré-requis

Code VS : Cet éditeur de code est téléchargeable gratuitement. Si vous ne l'avez pas installé sur votre machine, téléchargez-le sur le site officiel, selon 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é automatiqueally formate des blocs/lignes de code ou un fichier sur l'éditeur de code en fonction de règles et directives spécifiques. Cette fonctionnalité est basée sur un fichier de configuration spécifiant les règles de formatage 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.

However, you can also disable autoformatting for a specific code block if you want it to stand out from the rest. To achieve this, you can wrap the piece of code in a comment block that specifies the rules to be applied.

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 permet ainsi de vous concentrer davantage sur l'écriture process et la syntaxe.
Cohérence: Même si le code source n'apparaît pas côté client, il devrait y avoir une certaine cohérence. Le formatage automatique est pratique, en particulierally pour les grands projets avec plusieurs contributeurs.
Respecte les meilleures pratiques : La fonction de formatage 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 pendant le code revvues. 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 le extensions icône dans le menu de votre VS Code.
Installer Prettier extension. 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 démontrerate 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.

Create un fichier HTML (index.html) et ajoutez le code ci-dessus
Localiser Settings en bas à gauche de votre VS Code

3. Type Formatter dans la barre de recherche et sélectionnez Prettier sur le Editor:Default Formatter languette.

4. Localisationate Editor: Format on Save et cocher la box.

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

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

6. Ajuster les paramètres de configuration plus jolie: Prettier est configuré pour effectuer beaucoup de choses par défaut. Cependant, vous pouvez toujours le personnaliser en fonction de vos besoins. Aller à Settings sur votre VS Code, recherchez Prettier, et ajustez les paramètres à votre convenance.

7. Create 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 plus joli vous garantira un style de code cohérent pour votre projet. Créate a .prettierrc fichier avec .json extension 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-indiquéates si vous devez ajouter ou non des points-virgules à votre code à la fin de statements. Nous l'avons défini sur false, 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 vérifier De plus beaux documents comprendre comment créerate 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 convient à HTML et CSS. D'autre part, vous pouvez utiliser Black or Python extensions 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 à créer.ate 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 linters to check for style violations, syntax errors, and programming mistakes in your code. Combining linters with auto-formating will save you a lot of time and effort in making your code readable and debugging.

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 le formatage automatique peuvent résoudre certains problèmes sur votre code ; tu dois encore revVérifiez 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 Windows, Mac et systèmes basés sur Linux tels qu'Ubuntu. Vous pouvez utiliser les raccourcis suivants pour formater l'intégralité du document ou des zones spécifiques mises en surbrillance de votre code ;

Windows

Shift + Alt + F combinaison met en forme le document entier.
Ctrl + K, Ctrl + F combinaison met en forme une section de votre code que vous avez sélectionné. Par exemple, une div.

macOS

Shift + Option + F combinaison met en forme l'ensemble du document.
Ctrl + K, Ctrl + F combinaison met en forme une section de votre code que vous avez sélectionné. Par exemple, une div.

Ubuntu

Ctrl + Shift + I combinaison met en forme le document entier.
Ctrl + K, Ctrl + F combinaison met en forme une section de votre code que vous avez sélectionné. 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 le File élément dans le coin supérieur gauche.
Faites défiler jusqu'à Preferences
Cliquez sur Keyboard Shortcuts 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.

Découvrez notre article sur le meilleures extensions de code VS les développeurs doivent utiliser.