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 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).
- Support multilingue: Vous pouvez utiliser cet outil avec presque tous les langages de programmation via les extensions VS Code.
- Borne intégrée: 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.
Auto-Formatting in 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é 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.
Benefits of Auto-formatting codes in VS code
- 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 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 lors des revues de code. Les nouveaux développeurs qui rejoignent votre organisation comprendront facilement un code bien formaté.
How to enable Auto Format in VS code and customize it
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
extensionsicône dans le menu de votre VS Code. - Installer
Prettierextension. 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
- Localiser
Settingsen 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. 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 Format 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. 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. Créer 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éer un .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 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 vérifier De plus beaux documents pour comprendre comment créer des paramètres de configuration cohérents.
Best Practices for Auto Format in 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 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 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.
Code Formatting Shortcuts
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 ;
Windows
Shift + Alt + Fcombinaison met en forme le document entier.Ctrl + K, Ctrl + Fcombinaison met en forme une section de votre code que vous avez sélectionné. Par exemple, une div.
macOS
Shift + Option + Fcombinaison met en forme l'ensemble du document.Ctrl + K, Ctrl + Fcombinaison met en forme une section de votre code que vous avez sélectionné. Par exemple, une div.
Ubuntu
Ctrl + Shift + Icombinaison met en forme le document entier.Ctrl + K, Ctrl + Fcombinaison 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 Shortcutspour 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.
