One Format

Un seul formateur pour les gouverner tous : HTML, CSS, SCSS, Less, JavaScript, JSON/JSONC, Smarty, Twig, Liquid et YAML.

Extension VS Code basée sur Prettier 3, avec des règles en dur : aucun .prettierrc, .editorconfig ou .stylelintrc du projet n'est lu. Tout le monde formate de la même façon, quel que soit le projet.

Formatage

• src/rules.js contient les options Prettier de chaque langage (largeur, indentation, quotes…).
• src/format.js choisit le formateur selon le langage du document et charge Prettier à la demande.
• En cas d'erreur de syntaxe, le document n'est pas modifié : le message s'affiche dans la barre d'état et le détail dans Output → One Format.

Règles CSS / SCSS / Less

src/prettier-plugin.js remplace les parseurs CSS de Prettier pour appliquer d'abord les règles de src/css-rules.js (reprises du .stylelintrc Antadis). Elles s'appliquent aussi aux <style> dans le HTML et les templates.

Pour exclure un nœud : /* prettier-ignore */ (ou // prettier-ignore en SCSS/Less) juste avant. Son bloc n'est alors pas trié.

Templates (Smarty, Twig, Liquid)

src/template.js masque les balises du moteur, formate le résultat comme du HTML, puis restaure les balises et indente les blocs :

• une balise seule sur sa ligne devient un commentaire HTML le temps du formatage et garde sa ligne ;
• une balise dans le texte ou dans un attribut devient un jeton de même longueur ;
• <script>, <style>, <textarea> et <pre> contenant une balise, ainsi que les blocs littéraux ({literal}, {% verbatim %}, {% raw %}, {% comment %}, {% schema %}…), sont conservés tels quels ;
• un tag est considéré comme un bloc (et indente son contenu) seulement si sa fermeture existe dans le fichier ({/if}, {% endif %}…).

Spécificités :

• Twig / Liquid : un espace à l'intérieur des délimiteurs ({{x}} → {{ x }}), modificateurs - / ~ conservés.
• Liquid : le contenu de {% stylesheet %} et {% javascript %} est formaté avec les règles CSS / JS ; un {% liquid %} multi-ligne est indenté selon ses blocs.

Diagnostics en direct

Pendant la frappe (après oneFormat.liveDiagnosticsDelay ms sans frappe), l'extension analyse les documents ouverts :

• CSS / SCSS / Less : avertissement (souligné jaune) sur chaque règle non respectée, avec le nom de la règle stylelint correspondante ;
• tous les langages : erreur (souligné rouge) en cas de syntaxe invalide.

Une correction rapide (Ctrl+.) Formater le document (One Format) est proposée sur les avertissements.

Configuration du settings.json

L'extension se déclare déjà formateur par défaut pour ses langages, mais un réglage utilisateur ou une autre extension (Prettier, Twig Language…) peut prendre le dessus. À ajouter dans le settings.json utilisateur (Ctrl+Maj+P → Preferences: Open User Settings (JSON)) :

{
  // Formater à l'enregistrement
  "editor.formatOnSave": true,

  // One Format comme formateur de ses langages
  "[html][css][scss][less][javascript][json][jsonc][smarty][twig][liquid][yaml]": {
    "editor.defaultFormatter": "antadis.one-format"
  },

  // Options de l'extension (valeurs par défaut)
  "oneFormat.liveDiagnostics": true,
  "oneFormat.liveDiagnosticsDelay": 300
}

Remarques :

• Les fichiers .tpl, .twig et .liquid sont associés aux langages smarty, twig et liquid. Si une autre extension les rattache à un autre identifiant (ex. html.twig), l'ajouter au sélecteur ci-dessus ou forcer l'association :

  "files.associations": { "*.twig": "twig", "*.tpl": "smarty", "*.liquid": "liquid" }
  

• editor.formatOnType et editor.formatOnPaste n'ont pas d'effet : l'extension ne formate que le document entier.
• Les réglages d'indentation de VS Code (editor.tabSize…) sont ignorés au formatage : ce sont ceux de src/rules.js qui s'appliquent (2 espaces, 4 en YAML).

Commande

• One Format : formater le document (Ctrl+Maj+P), équivalent de Maj+Alt+F.

Ligne de commande

bin/one-format.js applique les mêmes règles hors VS Code (PhpStorm, CI, hooks git) :

node bin/one-format.js fichier.scss templates/*.twig     # formate sur place
node bin/one-format.js --check templates/**/*.twig       # liste les fichiers non formatés (code 1)
node bin/one-format.js --stdin fichier.yaml < in > out   # stdin → stdout, l'extension donne le langage