Un développeur peut passer des heures à déboguer un fichier HTML mal indenté, alors qu’un simple raccourci clavier aurait réglé le problème en une seconde. VSCode, utilisé par 75,9 % des développeurs en 2025 selon le Stack Overflow Developer Survey, intègre des outils de formatage natifs que beaucoup ignorent encore. Voici comment en tirer parti sans installer la moindre extension.
Le raccourci clavier qui formate tout le fichier HTML en une seconde
Sur Windows, appuyez sur Shift + Alt + F pour déclencher le formatage automatique du fichier ouvert. Sur macOS, le raccourci équivalent est Shift + Option + F. Sous Linux, VSCode utilise Ctrl + Shift + I. Ces trois combinaisons exécutent la commande « Format Document » sans qu’aucune extension ne soit nécessaire.
Si vous ne mémorisez pas ces raccourcis, la Command Palette reste une alternative fiable. Ouvrez-la avec Ctrl + Shift + P (Windows/Linux) ou Cmd + Shift + P (macOS), tapez « format document » et sélectionnez la commande. Résultat identique, chemin différent.
VSCode embarque des formateurs natifs pour HTML, CSS, JavaScript, TypeScript et JSON depuis sa sortie en 2015. Vous n’avez donc rien à configurer pour un projet HTML basique : le formateur reconnaît la syntaxe et applique les règles d’indentation automatiquement.
Formater une sélection ou tout le document : quelle différence?
VSCode propose deux niveaux de formatage distincts. « Format Document » (Shift+Alt+F) reformate l’intégralité du fichier ouvert. « Format Selection » (Ctrl+K puis Ctrl+F) ne touche que le bloc de code que vous avez sélectionné au préalable.
La distinction est utile dans des situations précises. Imaginez un fichier HTML de 500 lignes où un seul bloc <table> est mal indenté. Reformater tout le document risque de modifier l’espacement de zones que vous avez volontairement structurées autrement. Dans ce cas, sélectionner uniquement la table et appliquer « Format Selection » préserve le reste.
À l’inverse, quand vous récupérez un fichier HTML généré par un outil externe – exporté depuis un CMS, minifié, ou copié depuis un navigateur – « Format Document » est le bon réflexe. Une seule action sur l’ensemble, et la structure redevient lisible.
Comment rendre le code HTML vraiment lisible dans VSCode?
« Format Document » applique trois transformations simultanément : l’indentation cohérente, la gestion des espaces blancs et les retours à la ligne. Un fichier HTML compressé sur une seule ligne redevient hiérarchisé et navigable après une seule pression de touche.
Pour automatiser ce comportement, activez le paramètre editor.formatOnSave dans les réglages VSCode. Ouvrez les paramètres via Ctrl+, (virgule), recherchez « formatOnSave » et cochez l’option. À chaque enregistrement du fichier, le formatage se déclenche sans intervention manuelle. C’est particulièrement utile sur les projets en équipe où chaque développeur a ses habitudes de frappe.
Les options html.format.wrapLineLength et html.format.preserveNewLines affinent le comportement. La première fixe la longueur maximale d’une ligne avant qu’un retour à la ligne soit inséré – la valeur par défaut est 120 caractères. La seconde, activée par défaut, conserve les sauts de ligne que vous avez déjà placés manuellement. Pour les sauts de ligne consécutifs, maxPreserveNewLines limite leur nombre à 10 par défaut.
Un point pratique souvent négligé : l’gestion de la tabulation en HTML influe directement sur la lisibilité du code formaté. Si vos réglages d’indentation utilisent des tabulations là où le formateur attendait des espaces, le résultat peut sembler erratique selon l’éditeur utilisé.
Comment embellir le code HTML avec Prettier?
Le formateur natif de VSCode couvre l’essentiel. Prettier va plus loin en imposant des règles stylistiques uniformes indépendamment des paramètres de chaque développeur. L’extension esbenp.prettier-vscode cumule plus de 35 millions d’installations sur le VS Code Marketplace – un chiffre qui illustre son adoption massive dans les équipes professionnelles.
Des entreprises comme Facebook, Spotify, Discord, PayPal et Dropbox ont intégré Prettier dans leur workflow. La raison est simple : Prettier est « opinionated », c’est-à-dire qu’il ne laisse pas le choix du style. Tous les membres d’une équipe produisent exactement le même formatage, ce qui réduit les conflits de merge liés aux espaces et indentations.
L’installation prend moins d’une minute. Ouvrez l’onglet Extensions de VSCode, recherchez « Prettier – Code formatter » et installez l’extension officielle. Elle embarque Prettier 3.x par défaut. Ensuite, dans les paramètres, définissez Prettier comme formateur par défaut pour HTML en ajoutant "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } dans votre settings.json.
Ce que Prettier apporte concrètement au-delà du natif : une gestion plus fine des attributs HTML longs (il les répartit sur plusieurs lignes), une cohérence entre fichiers HTML, CSS et JavaScript dans un même projet, et la possibilité de partager un fichier .prettierrc dans le dépôt Git pour que toute l’équipe utilise les mêmes règles.
Paramètres VSCode à ajuster pour un HTML toujours propre
Le paramètre html.format.indentInnerHtml mérite une attention particulière. Désactivé par défaut, il empêche l’indentation du contenu à l’intérieur des balises <head> et <body>. Activez-le si vous préférez voir chaque élément enfant indenté par rapport à son parent direct – ce qui améliore la lisibilité sur les structures HTML complexes.
Voici un récapitulatif des paramètres clés à connaître :
html.format.indentInnerHtml: indente le contenu des balises<head>et<body>(défaut : false)html.format.wrapLineLength: longueur maximale avant retour à la ligne automatique (défaut : 120 caractères)html.format.preserveNewLines: conserve les sauts de ligne existants (défaut : true)html.format.maxPreserveNewLines: plafond de sauts de ligne consécutifs conservés (défaut : 10)editor.formatOnSave: déclenche le formatage à chaque enregistrement (défaut : false)
Emmet, intégré nativement dans VSCode, complète ces réglages en amont. Taper ! dans un fichier HTML vide puis appuyer sur Tab génère instantanément le squelette HTML5 complet avec les balises <!DOCTYPE>, <html>, <head> et <body> déjà correctement indentées. La lisibilité commence dès la saisie, pas seulement au moment du formatage.
Si vous travaillez sur des scripts associés à votre projet HTML, notez que les mêmes logiques s’appliquent aux autres langages : les fonctions en C++ ou les modules Python bénéficient eux aussi des formateurs natifs de VSCode, avec leurs propres options de configuration par langage.
Un code HTML lisible n’est pas une question d’esthétique : c’est la condition pour qu’une relecture de code soit honnête, qu’un bug soit trouvé rapidement, et qu’un collègue puisse intervenir sans déchiffrer votre mise en forme. Shift+Alt+F – c’est le minimum vital.