English | Français

Syntax highlighting for Mustache templates embedded in TypeScript and JavaScript strings.

This extension adds syntax highlighting for Mustache expressions ({{variable}}, {{#section}}, etc.) directly in your TypeScript/JavaScript strings, making your code more readable and maintainable.

• ✅ Variables: {{name}}, {{user.email}}
• ✅ Sections: {{#items}}...{{/items}}
• ✅ Inverted sections: {{^items}}...{{/items}}
• ✅ Comments: {{! comment }}
• ✅ Partials: {{>header}}

• TypeScript (.ts, .tsx)
• JavaScript (.js, .jsx)

The extension works in:

• String literals: "{{name}}"
• Template literals: `{{name}}`
• Multiline strings

The extension is fully customizable through VS Code settings.

1. Open settings: Ctrl+, (Windows/Linux) or Cmd+, (Mac)
2. Search for "Mustache Inline"
3. Modify colors according to your preferences

{ "mustacheInline.colors.brackets": "#FF6B6B", "mustacheInline.colors.keywords": "#4ECDC4", "mustacheInline.colors.variables": "#FFE66D", "mustacheInline.colors.embedded": "#95E1D3", "mustacheInline.fontStyle.brackets": "bold", "mustacheInline.fontStyle.keywords": "bold italic" }

{ "mustacheInline.colors.brackets": "#C586C0", "mustacheInline.colors.keywords": "#C586C0", "mustacheInline.colors.variables": "#9CDCFE", "mustacheInline.colors.embedded": "#4EC9B0" }

{ "mustacheInline.colors.brackets": "#89DDFF", "mustacheInline.colors.keywords": "#C792EA", "mustacheInline.colors.variables": "#82AAFF", "mustacheInline.colors.embedded": "#8BD5CA" }

{ "mustacheInline.colors.brackets": "#F78C6C", "mustacheInline.colors.keywords": "#FF5370", "mustacheInline.colors.variables": "#FFCB6B", "mustacheInline.colors.embedded": "#C3E88D" }

To execute a command: Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)

const template = `  <h1>{{title}}</h1>  {{#users}}  <div class="user">  <span>{{name}}</span>  <span>{{email}}</span>  </div>  {{/users}}  {{^users}}  <p>Aucun utilisateur</p>  {{/users}} `;

const greeting = "Hello {{user.name}}, you have {{notifications}} notification(s)."; const html = `  <div>  {{! This is a comment }}  {{>header}}  <main>{{content}}</main>  {{>footer}}  </div> `;

1. Copy the extension folder to .vscode/extensions/mustache-inline/
2. Reload VS Code: Ctrl+Shift+P → "Developer: Reload Window"

The extension is automatically loaded if located in the .vscode/extensions/ folder of your workspace.

1. Check that the extension is activated: open debug console (Help → Toggle Developer Tools)
2. Look for the message: "Mustache Inline Highlighter est activé"
3. Execute manually: Ctrl+Shift+P → "Mustache Inline: Apply Colors"
4. Reload window: Ctrl+Shift+P → "Developer: Reload Window"

1. Wait a few seconds (application is automatic)
2. If necessary, execute "Mustache Inline: Apply Colors"
3. Verify that hexadecimal values are valid (e.g., #FF0000)

If you have other Mustache highlighting extensions, disable them to avoid conflicts:

1. Ctrl+Shift+X → Extensions
2. Search for Mustache extensions
3. Disable conflicting extensions

This extension is developed for internal use. For any suggestions or bugs:

1. Check that the issue doesn't already exist
2. Provide a code example reproducing the problem
3. Include your configuration (mustacheInline.* settings)

Internal use - All rights reserved

• 🎉 Initial release
• ✨ Syntax highlighting for Mustache in TS/JS strings
• ⚙️ Complete color and style configuration
• 🎨 Custom theme support
• 🔧 Manual reapplication command

• Mustache Documentation
• VS Code Extension API
• TextMate Grammar

Enjoy coding with beautiful Mustache templates! 🎨✨

Coloration syntaxique pour les templates Mustache intégrés dans les chaînes de caractères TypeScript et JavaScript.

Cette extension ajoute la coloration syntaxique pour les expressions Mustache ({{variable}}, {{#section}}, etc.) directement dans vos strings TypeScript/JavaScript, rendant votre code plus lisible et maintenable.

• ✅ Variables : {{name}}, {{user.email}}
• ✅ Sections : {{#items}}...{{/items}}
• ✅ Sections inversées : {{^items}}...{{/items}}
• ✅ Commentaires : {{! commentaire }}
• ✅ Partials : {{>header}}

• TypeScript (.ts, .tsx)
• JavaScript (.js, .jsx)

L'extension fonctionne dans :

• Les string literals : "{{name}}"
• Les template literals : `{{name}}`
• Les strings multilignes

L'extension est entièrement personnalisable via les paramètres VS Code.

1. Ouvrez les paramètres : Ctrl+, (Windows/Linux) ou Cmd+, (Mac)
2. Recherchez "Mustache Inline"
3. Modifiez les couleurs selon vos préférences

{ "mustacheInline.colors.brackets": "#FF6B6B", "mustacheInline.colors.keywords": "#4ECDC4", "mustacheInline.colors.variables": "#FFE66D", "mustacheInline.colors.embedded": "#95E1D3", "mustacheInline.fontStyle.brackets": "bold", "mustacheInline.fontStyle.keywords": "bold italic" }

{ "mustacheInline.colors.brackets": "#C586C0", "mustacheInline.colors.keywords": "#C586C0", "mustacheInline.colors.variables": "#9CDCFE", "mustacheInline.colors.embedded": "#4EC9B0" }

{ "mustacheInline.colors.brackets": "#89DDFF", "mustacheInline.colors.keywords": "#C792EA", "mustacheInline.colors.variables": "#82AAFF", "mustacheInline.colors.embedded": "#8BD5CA" }

{ "mustacheInline.colors.brackets": "#F78C6C", "mustacheInline.colors.keywords": "#FF5370", "mustacheInline.colors.variables": "#FFCB6B", "mustacheInline.colors.embedded": "#C3E88D" }

Pour exécuter une commande : Ctrl+Shift+P (Windows/Linux) ou Cmd+Shift+P (Mac)

const template = `  <h1>{{title}}</h1>  {{#users}}  <div class="user">  <span>{{name}}</span>  <span>{{email}}</span>  </div>  {{/users}}  {{^users}}  <p>Aucun utilisateur</p>  {{/users}} `;

const greeting = "Bonjour {{user.name}}, vous avez {{notifications}} notification(s)."; const html = `  <div>  {{! Ceci est un commentaire }}  {{>header}}  <main>{{content}}</main>  {{>footer}}  </div> `;

1. Copiez le dossier de l'extension dans .vscode/extensions/mustache-inline/
2. Rechargez VS Code : Ctrl+Shift+P → "Developer: Reload Window"

L'extension est automatiquement chargée si elle se trouve dans le dossier .vscode/extensions/ de votre workspace.

1. Vérifiez que l'extension est activée : ouvrez la console de débogage (Help → Toggle Developer Tools)
2. Recherchez le message : "Mustache Inline Highlighter est activé"
3. Exécutez manuellement : Ctrl+Shift+P → "Mustache Inline: Apply Colors"
4. Rechargez la fenêtre : Ctrl+Shift+P → "Developer: Reload Window"

1. Attendez quelques secondes (l'application est automatique)
2. Si nécessaire, exécutez "Mustache Inline: Apply Colors"
3. Vérifiez que les valeurs hexadécimales sont valides (ex: #FF0000)

Si vous avez d'autres extensions de coloration Mustache, désactivez-les pour éviter les conflits :

1. Ctrl+Shift+X → Extensions
2. Recherchez les extensions Mustache
3. Désactivez les extensions en conflit

Cette extension est développée pour un usage interne. Pour toute suggestion ou bug :

1. Vérifiez que le problème n'existe pas déjà
2. Fournissez un exemple de code reproduisant le problème
3. Incluez votre configuration (mustacheInline.* settings)

Usage interne - Tous droits réservés

• 🎉 Version initiale
• ✨ Coloration syntaxique pour Mustache dans les strings TS/JS
• ⚙️ Configuration complète des couleurs et styles
• 🎨 Support des thèmes personnalisés
• 🔧 Commande de réapplication manuelle

• Documentation Mustache
• VS Code Extension API
• TextMate Grammar

Profitez du code avec de beaux templates Mustache ! 🎨✨