🔥Introducing the HMPL VS Code Extension

Hello everyone! Today I would like to present an updated

In general, it was necessary to do this a long time ago, because when working with separate files .hmpl didn't highlight the syntax at all, although it's kind of super easy to do, just highlight it like HTML, but now it's done, and it's just a buzz at all.

What the extension does and how it works

First of all, let's say I'm working with webpack in a project. I have hmpl-loader connected, but here's the problem, the file doesn't support anything at all. Let's say here's the code:

main.hmpl

<div>

   <button data-action="increment" id="btn">Click!</button>

   <div>Clicks: {{ src: "/api/clicks", after: "click:#btn" }}</div>

</div>

As you can see, there is no color highlighting of tags. The same thing happens in VS Code. Plugins, such as Auto Close Tag and others, also do not work. To fix all this, a plugin for VS Code was needed. What it will look like in VS Code if you enable the extension:

before

Now, you can safely work with all the conveniences provided by VS Code, because logically the extension simply replaces the HMPL extension with HTML.

Customization in the extension

In the extension it is possible to set an image for files in explorer. To do this you need to do the following:

1. Go to Settings
   


2. Select File Icon Theme
   


3. Choose HMPL Icons
   

By the way, the old HMPL logo was chosen for the file, because putting an ant on the files would not be very good, since the project would literally turn into an anthill :)

You can also configure language settings:

Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P), search for "Preferences: Open Settings (JSON)", and add language-specific configurations for hmpl.

Example

"[hmpl]": {

  "editor.tabSize": 2

}

Installation

The installation process is the same as for all extensions:

1. Go to Extensions
   


2. In the search bar write "HMPL"
   


3. Go to the extension page and click the install button

, as well as , I will be grateful!

Star HMPL ☆