Comment formater automatiquement dans VS Code pour gagner du temps et des effor…

Découverte de Visual Studio Code : Un Guide Complet

Visual Studio Code, ou VS Code, s'impose comme un éditeur de code de premier plan. Sa polyvalence est un atout majeur, avec une prise en charge native pour des environnements tels que Node.js, JavaScript et TypeScript. De plus, son écosystème d'extensions permet de l'adapter à une multitude d'autres langages et environnements d'exécution.

Cet outil puissant, développé par Microsoft, est proposé gratuitement et en open-source.

L'attrait de VS Code repose sur une combinaison de fonctionnalités clés :

Intellisense : Bénéficiez d'une saisie semi-automatique intelligente et d'une coloration syntaxique qui facilitent grandement l'écriture de code.
Compatibilité Multiplateforme : Utilisez VS Code sous Linux, Windows ou macOS sans aucune contrainte.
Richesse en Extensions : Une vaste bibliothèque d'extensions transforme VS Code en un véritable environnement de développement intégré (IDE) adapté à vos besoins spécifiques.
Prise en Charge Multilingue : Grâce à ses extensions, travaillez avec presque tous les langages de programmation.
Terminal Intégré : Gérez vos commandes Git directement depuis l'éditeur, facilitant ainsi le versionnement et la collaboration.

Le Formatage Automatique dans VS Code : Optimisez Votre Code

Découvrez comment le formatage automatique peut améliorer la lisibilité et la cohérence de votre code.

Prérequis Essentiels

VS Code : Téléchargez gratuitement l'éditeur depuis le site officiel, en choisissant la version adaptée à votre système.
Choix du Langage : Déterminez le langage de programmation que vous utilisez, car chaque langage nécessite un formateur spécifique.
Sélection d'un Formateur : VS Code s'appuie sur des extensions pour le formatage. Nous allons utiliser Prettier, mais vous pouvez opter pour un autre formateur en fonction de vos préférences et de votre langage.

Le formatage automatique permet d'uniformiser votre code en appliquant des règles précises concernant l'indentation, les sauts de ligne et l'espacement. Une fois activée, cette fonctionnalité assure une cohérence visuelle à travers tous vos fichiers.

Bien que le formatage automatique soit généralement souhaitable, vous pouvez le désactiver pour des portions de code spécifiques, en les isolant dans des blocs de commentaires qui définissent le style à ne pas modifier.

Avantages du Formatage Automatique de Code

Gain de Temps : Libérez-vous des tâches fastidieuses de formatage et concentrez-vous sur le développement.
Cohérence : Garantissez un code propre et homogène, particulièrement important pour les projets collaboratifs.
Conformité aux Bonnes Pratiques : Appliquez facilement les conventions d'indentation et d'espacement recommandées.
Facilité de Lecture : Améliorez la lisibilité du code, facilitant ainsi les révisions et la compréhension pour les nouveaux développeurs.

Activation et Personnalisation du Formatage Automatique

Voici les étapes à suivre pour activer le formatage automatique dans VS Code :

Installation d'une Extension de Formatage : Accédez à l'onglet des extensions dans VS Code et recherchez une extension telle que Prettier.
Installation de Prettier: Parmi les résultats, sélectionnez l'extension "Prettier - Code formatter" et cliquez sur "Installer".

Une fois Prettier installé, l'activation du formatage automatique est simple.

Pour illustrer le processus, nous allons utiliser un simple fichier HTML d'une page de connexion:

Voici le code non formaté que nous allons utiliser:

<!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>

Bien que ce code fonctionne, il est mal organisé et difficile à lire. Voici comment utiliser Prettier pour le formater automatiquement.

Création d'un Fichier HTML: Créez un fichier `index.html` et copiez-y le code HTML non formaté.
Accès aux Paramètres : Cliquez sur l'icône des paramètres en bas à gauche de l'interface VS Code.

Sélection du Formateur par Défaut : Recherchez "Formatter" et sélectionnez "Prettier" dans la liste déroulante "Editor: Default Formatter".

Activation du Formatage à la Sauvegarde : Recherchez "Editor: Format on Save" et cochez la case pour activer le formatage automatique lors de la sauvegarde du fichier.

Formatage du Document : Enregistrez le fichier HTML, sélectionnez tout le contenu du document, faites un clic droit et choisissez "Formater le document".
Vérification du Formatage: Votre code devrait être correctement indenté et formaté. Désormais, chaque sauvegarde de vos fichiers déclenchera le formatage automatique.
Personnalisation des Paramètres Prettier: Prettier offre de nombreux paramètres personnalisables. Accédez aux paramètres de VS Code, recherchez "Prettier" et ajustez les options selon vos préférences.

Fichier de Configuration Prettier (.prettierrc) : Pour garantir une cohérence du style de code dans une équipe, créez un fichier `.prettierrc` à la racine de votre projet. Utilisez l'extension `.json` et ajoutez les paramètres suivants :

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Ce code configure:

trailingComma : L'ajout de virgules de fin uniquement lors de la transpilation en ES5.
tabWidth : La largeur de tabulation est fixée à 4 espaces.
semi : L'absence de point-virgules à la fin des instructions.
singleQuote : L'utilisation de guillemets simples.

Consultez la documentation Prettier pour explorer les possibilités de configuration.

Bonnes Pratiques pour le Formatage Automatique

Choisir le Bon Formateur

Prettier n'est qu'un exemple. Choisissez un formateur adapté à chaque langage. Par exemple, utilisez Black ou Python pour Python, et des formateurs comme Prettier ou Beautify pour HTML et CSS.

Maintenir un Style de Code Cohérent

Personnalisez les paramètres du formateur et assurez-vous que toute l'équipe utilise les mêmes configurations pour un style homogène. L'utilisation d'un fichier `.prettierrc` facilite cette harmonisation.

Utiliser des Linters

Les linters détectent les erreurs de syntaxe et de style, améliorant ainsi la qualité et la lisibilité du code. Combinez-les au formatage automatique pour optimiser votre workflow.

Exploiter les Raccourcis Clavier

VS Code propose des raccourcis pour accélérer le formatage. Personnalisez-les pour un accès rapide.

Vérifier le Code Avant le Commit

Même avec le formatage automatique, il est essentiel de relire votre code avant de le valider.

Raccourcis de Formatage

Voici quelques raccourcis pour formater des parties spécifiques ou l'ensemble de votre code dans VS Code :

Windows

Maj + Alt + F : Formatage de l'ensemble du document.
Ctrl + K, Ctrl + F : Formatage d'une portion de code sélectionnée.

macOS

Maj + Option + F : Formatage de l'ensemble du document.
Ctrl + K, Ctrl + F : Formatage d'une portion de code sélectionnée.

Ubuntu

Ctrl + Maj + I : Formatage de l'ensemble du document.
Ctrl + K, Ctrl + F : Formatage d'une portion de code sélectionnée.

Notez que ces raccourcis peuvent varier en fonction de vos personnalisations.

Vous pouvez vérifier vos raccourcis 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 optimise considérablement votre flux de travail. Le choix de l'extension appropriée dépendra du langage que vous utilisez. N'hésitez pas à installer plusieurs formateurs pour divers projets.

Consultez toujours la documentation de vos formateurs pour connaître les langues prises en charge et les meilleures pratiques d'utilisation.

Pour en savoir plus sur les outils essentiels, découvrez notre article sur les extensions VS Code incontournables pour les développeurs.

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