NgFormat – Formatage des templates Angular

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.

Commentaires spécifiques

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

Avant formatage :

<p-button label="← Retour" (onClick)="goBack()" severity="secondary" [disabled]="$isBusy()"></p-button>

Après formatage :

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

NgFormat – Accord de licence

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

Ce logiciel est fourni « tel quel », sans garantie d’aucune sorte, explicite ou implicite.

NgFormat

AKXS