Skip to content
| Marketplace
Sign in
Visual Studio Code>Formatters>NgFormatNew to Visual Studio Code? Get it now.
NgFormat

NgFormat

AKXS

|
2 installs
| (0) | Free
NgFormat
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

  1. Ouvrir Visual Studio Code
  2. Aller dans l'onglet Extensions (Ctrl+Maj+X)
  3. Rechercher NgFormat
  4. Cliquer sur Installer

Ou bien, installer via le terminal avec la commande suivante :

code --install-extension akxs.ngformat

Utilisation

  1. Ouvrir un fichier HTML contenant des templates Angular

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

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.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft