Fonctionnalités
- Formatage automatique des attributs : Aligne les attributs multiples sur plusieurs lignes pour une meilleure lisibilité
- Indentation intelligente : Gère correctement l'indentation des balises imbriquées, des structures Angular et des attributs multi-lignes
- Normalisation des espaces : Uniformise les espaces dans les attributs, autour des balises et dans les directives Angular
- Gestion des lignes vides : Supprime les lignes vides consécutives pour une structure plus propre
- Configurations personnalisables : Permet de modifier le comportement du formateur via les options de l'extension VSCode
- Contrôle via commentaires : Utilisez des commentaires spéciaux pour désactiver le formatage sur certaines sections du code
Installation
- Ouvrir Visual Studio Code
- Aller dans l'onglet Extensions (
Ctrl+Maj+X
)
- Rechercher
NgFormat
- Cliquer sur Installer
Ou bien, installer via le terminal avec la commande suivante :
code --install-extension akxs.ngformat
Utilisation
Ouvrir un fichier HTML contenant des templates Angular
Utiliser une des méthodes suivantes pour formater :
- Raccourci clavier : Le raccourci défini pour le formatage dans VSCode
- Palette de commandes :
NgFormat: Format Document
(Ctrl+Maj+P
)
- Menu contextuel : Clic droit →
NgFormat: Format Document
Le fichier sera alors formaté selon les règles configurées.
NgFormat prend en charge des commentaires spéciaux pour contrôler le comportement du formateur :
1. Ignorer tout le fichier
Ajouter ce commentaire tout en haut du fichier HTML pour désactiver entièrement le formatage :
<!-- ngFormat skip-file -->
2. Ignorer un élément spécifique
Ajouter ce commentaire juste avant une balise pour ne pas reformater ses attributs :
<!-- ngFormat no-wrap -->
<mon-composant attribut1="valeur1" attribut2="valeur2" attribut3="valeur3"></mon-composant>
Exemples
<p-button label="← Retour" (onClick)="goBack()" severity="secondary" [disabled]="$isBusy()"></p-button>
<p-button
label="← Retour"
(onClick)="goBack()"
severity="secondary"
[disabled]="$isBusy()">
</p-button>
Configuration
Voici les options configurables via les paramètres de VSCode :
{
"ngFormat.indentSize": 4, // Nombre d'espaces pour l'indentation
"ngFormat.shouldWrapAttributes": true, // Active le retour à la ligne pour les attributs
"ngFormat.wrapAttributesMinCount": 3, // Nombre minimum d'attributs pour déclencher le wrapping
"ngFormat.shouldRemoveConsecutiveEmptyLines": true // Supprime les lignes vides consécutives
}
Pour modifier ces paramètres : Fichier > Préférences > Paramètres et recherchez ngFormat
.
Licence
Ce logiciel est distribué sous une licence propriétaire personnalisée.
Copyright © 2025 AKXS
Ce logiciel est concédé sous licence pour un usage personnel et commercial.
Vous êtes autorisé à :
- Utiliser l'extension à titre personnel ou dans une organisation commerciale
- Installer et exécuter l’extension via le Visual Studio Code Marketplace
Vous n’êtes pas autorisé à :
- Redistribuer l’extension en dehors du Marketplace de VSCode
- Modifier, forker, décompiler ou désassembler le logiciel
- Créer des œuvres dérivées à partir de cette extension
- Vendre ou revendre l’extension ou un accès à l’extension, sous quelque forme que ce soit
Tous droits réservés.
Ce logiciel est fourni « tel quel », sans garantie d’aucune sorte, explicite ou implicite.