🔥Introducing the HMPL VS Code Extension

Hello everyone! Today I would like to present an updated HMPL extension for VS Code. I delayed the moment of creation for a long time, but now a new version has been released, which is really cool and with which working with the markup language will be much easier.

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

after

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

For now, there is only for .hmpl. Other file extensions may not show icons. But, most likely, in future versions this should be fixed, but, also, the task is open, as well as others on the template language and extension, so, you can choose and help in contributing to the project!

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

Perhaps in the future someone will create more extensions for HMPL, but for now there should be one (at the time of writing)

Feedback

If something doesn't work for you, or you have any wishes or just questions, there are channels on Twitter, as well as discussions on GitHub. You can also write here in the comments :)

Conclusion

Thank you for reading the article! If you have any questions about how the extension works, I will try to answer them. Overall, the extension is pretty good, the main thing is that it supports the technical environment for markup, and that's super.

Also, if you want to support the project, you can put a star on github for hmpl, I will be grateful!

Star HMPL ☆