Git Product home page Git Product logo

manuelgil / vscode-mustache-snippets Goto Github PK

View Code? Open in Web Editor NEW
7.0 3.0 1.0 1.4 MB

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.

Home Page: https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-mustache-snippets

License: MIT License

JavaScript 99.12% Shell 0.88%
mustache mustache-templates mustache-templating mustache-implementations mustachejs snippets snippets-collection snippets-plugin completion template

vscode-mustache-snippets's Introduction

{{ mustache }} for VSCode

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

This is a Visual Studio Code extension that provides robust support for the Mustache template engine. Simplify your workflow by Mustache file editing with advanced features such as syntax highlighting, code completion, customized snippets, and more!

snippets

Requirements

  • VSCode 1.46.0 or later

Snippets

Type part of snippet, press Tab or Enter, and the snippet unfolds. Below is a list of the most important shortcuts.

Snippet Purpose
layout html template
block {{$ name }} ... {{/ name }}
section {{# name }} ... {{/ name }}
inverted section {{^ name }} ... {{/ name }}
comment {{! comment }}
include {{> template }}
extends {{< template }}

Usage

demo

  • If you want to create a new file, you can select the option Mustache: Generate New Mustache File from the command palette. This will create a new file with the extension .mustache and will open the file in the editor. If you want to create a new file in a specific folder, you can right-click on the folder and select the option Generate New Mustache File. This will create a new file with the extension .mustache in the selected folder and will open the file in the editor.

  • If you want to change the delimiters, you can select the template section and then select the Mustache: Change Delimiters option from the command palette. This will open a dialog box where you can enter the delimiters currently used in the template and the extension will replace the delimiters of the selected section. For example, if you select the section {{# name }} ... {{{/ name }} and you need to change the delimiters to [[ and ]], you can select the Change delimiters option and this will change the section to [[# name ]] ... [[/name ]].

Project Settings

Configure your project by creating or updating a settings.json file at the project's root. If you already have a .vscode/settings.json file, skip the first two steps.

  1. Open the command palette in VSCode:

    • CTRL + SHIFT + P (Windows)
    • CMD + SHIFT + P (Mac OS)
  2. Type Preferences: Open Workspace Settings (JSON).

  3. In the .vscode/settings.json file, copy and paste the following settings:

    {
      // The delimiters option can be used to change the current template delimiters when generating a new file.
      // Syntax highlighting or snippets included in the extension will not be affected by this setting.
      "mustache.delimiters": {
        "left": "{{",
        "right": "}}"
      }
    }
  4. Restart VS Code

Your project is now set up to automatically format code upon saving.

Connect with me

GitHub followers X (formerly Twitter) Follow

Other Extensions

Changelog

See CHANGELOG.md

Authors

See also the list of contributors who participated in this project.

License

Mustache Snippets is licensed under the MIT License - see the MIT License for details.

vscode-mustache-snippets's People

Contributors

manuelgil avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

meslubi2021

vscode-mustache-snippets's Issues

Extension cannot be selected as formatter for HTML(Mustache)

First of all, thanks for providing the extension!

I have basically found it because it is tagged with the Formatters Category in the Marketplace.
However, when hitting Shift + Alt + F to format a .mustache document and selecting Configure in the Configure Default Formatters dialog for file type HTML (Mustache), this extension is not showing up in the available extensions.

Does this extension support formatting mustache files?
If so then there may be some kind of bug, if not it would be great if you would remove the Formatter category since it may be misleading for users.

Missing color highlighting

Hey there!
I've noticed that in the preview materials, there is a visible color highlighting of mustache elements. However, mine seems rather missing/buggy:
image
image

Is this intended behavior? Using VSCode 1.80 on Arch Linux.

Thanks for clarification.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.