Skip to content

This extension provides Mustache template engine support for Visual Studio Code. It helps you to write your Mustache files with syntax highlighting and code completion.

License

Notifications You must be signed in to change notification settings

ManuelGil/vscode-mustache-snippets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

{{ mustache }} for VSCode

Visual Studio Marketplace Version Visual Studio Marketplace Installs Visual Studio Marketplace Downloads Visual Studio Marketplace Rating GitHub Repo stars GitHub license

Advanced support for Mustache templates: syntax highlighting, completion, snippets, and file generation.

Overview

This extension enhances Mustache template editing by providing:

  • Syntax highlighting and tag matching
  • Code completion for built‑in sections and delimiters
  • Customizable snippets for layout, sections, comments, includes, and more
  • Commands to generate new .mustache files in the workspace
  • Delimiter adjustment to convert existing templates to alternate markers

Mustache File Generator Demo

Requirements

  • Visual Studio Code 1.46.0 or later (also compatible with VSCodium, WindSurf, Cursor, etc.)

Installation

  1. Open Visual Studio Code.
  2. Open the Extensions view (Ctrl+Shift+X on Windows/Linux or ⌘+Shift+X on macOS).
  3. Search for Mustache Templates - Syntax Highlighting, Snippets & Autocomplete or install directly from the Marketplace.
  4. Click Install and reload the editor if prompted.

Usage

Generate New Mustache File

  • Command Palette: run Mustache: Generate New Mustache File
  • Explorer Context Menu: right‑click a folder and select Generate New Mustache File

You will be prompted for a file name; a new .mustache file is created and opened.

Change Delimiters

  • Select a section of template text
  • Run Mustache: Change Delimiters from the Command Palette
  • Enter the current and desired delimiters (e.g. {{ }} → [[ ]])

All matching tags in the selection will be updated.

Snippet Expansion

Type a snippet prefix in a .mustache file and press Tab to expand:

Prefix Expansion
layout Basic HTML layout block
block {{#name}} … {{/name}}
section {{#name}} … {{/name}}
inverted {{^name}} … {{/name}}
comment {{! comment }}
override {{!-- comment --!}}
include {{> template}}
extends {{< template}} … {{/template}}

Mustache Snippets Demo

Configuration

Add to your workspace .vscode/settings.json:

{
  "mustache.delimiters": {
    "left": "{{",
    "right": "}}"
  }
}

This setting applies when generating new files; syntax highlighting and snippets remain unaffected.

Contributing

Contributions to the Mustache Templates - Syntax Highlighting, Snippets & Autocomplete are welcome and appreciated. To contribute:

  1. Fork the GitHub repository.

  2. Create a new branch for your feature or fix:

    git checkout -b feature/your-feature
  3. Make your changes, commit them, and push to your fork.

  4. Submit a Pull Request targeting the main branch.

Before contributing, please review the Contribution Guidelines for coding standards, testing, and commit message conventions. If you encounter a bug or wish to request a new feature, please open an Issue.

Changelog

For a complete list of changes, see the CHANGELOG.md.

Authors

For a complete list of contributors, please refer to the contributors page.

Follow Me

  • GitHub: GitHub followers
  • X (formerly Twitter): X Follow

Other Extensions

  • Auto Barrel Automatically generates and maintains barrel (index.ts) files for your TypeScript projects.

  • Angular File Generator Generates boilerplate and navigates your Angular (9→20+) project from within the editor, with commands for components, services, directives, modules, pipes, guards, reactive snippets, and JSON2TS transformations.

  • NestJS File Generator Simplifies creation of controllers, services, modules, and more for NestJS projects, with custom commands and Swagger snippets.

  • NestJS Snippets Ready-to-use code patterns for creating controllers, services, modules, DTOs, filters, interceptors, and more in NestJS.

  • T3 Stack / NextJS / ReactJS File Generator Automates file creation (components, pages, hooks, API routes, etc.) in T3 Stack (Next.js, React) projects and can start your dev server from VSCode.

  • Drizzle ORM Snippets Collection of code snippets to speed up Drizzle ORM usage, defines schemas, migrations, and common database operations in TypeScript/JavaScript.

  • CodeIgniter 4 Spark Scaffolds controllers, models, migrations, libraries, and CLI commands in CodeIgniter 4 projects using Spark, directly from the editor.

  • CodeIgniter 4 Snippets Snippets for accelerating development with CodeIgniter 4, including controllers, models, validations, and more.

  • CodeIgniter 4 Shield Snippets Snippets tailored to CodeIgniter 4 Shield for faster authentication and security-related code.

  • Mustache Template Engine - Snippets & Autocomplete Snippets and autocomplete support for Mustache templates, making HTML templating faster and more reliable.

Recommended Browser Extension

For developers who work with .vsix files for offline installations or distribution, the complementary One-Click VSIX extension is recommended, available for both Chrome and Firefox.

One-Click VSIX integrates a direct "Download Extension" button into each VSCode Marketplace page, ensuring the file is saved with the .vsix extension, even if the server provides a .zip archive. This simplifies the process of installing or sharing extensions offline by eliminating the need for manual file renaming.

License

This project is licensed under the MIT License. See the LICENSE file for full details.