loading...
Cover image for I built a VSCode extension to help you creating Hugo Themes

I built a VSCode extension to help you creating Hugo Themes

estruyf profile image Elio Struyf ・2 min read

I am a big fan of static sites and for sure when they use Hugo. At the moment I have four websites running on Hugo. My personal website, a sticker shop which I run with Luise Freese, a URL shortener for Instagram which we use for our shop, and internal work-related site.

All of them have their own theme, and that is also where I started to see some room for improvement. When I started to create these themes, it felt like the early days of when I started my development career a long time ago. Just a notepad and writing some PHP. These days we have the go to definition option and this is exactly what I was missing in VSCode for creating and managing Hugo themes.

Hugo Themer

This week I thought, why not create a VSCode extension to help me and others out with Hugo themes creation, and so Hugo Themer was born.

In the preview version of the extension, I have added support for go to definition. Or better said, open the partial by ctrl+click or right-clicking and choosing go to definition on the partial line.

Alt Text

Find it on the VSCode marketplace

The first version has been published as a preview to the VSCode marketplace - Hugo Themer.

Other extensions

If you are interested, I have a couple of other extensions available in the store like: [Front Matter(https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter) to make it easier to maintain the metadata (front matter) of your articles in VSCode.

You can check out the whole list here: marketplace profile.

Feedback

See something which is not working, or have an idea which can be added to the extension? Feel free to provide me this feedback

Posted on by:

estruyf profile

Elio Struyf

@estruyf

Elio Struyf is an independent Engineering Lead working for Valo Intranet, Blogger, and Speaker. Loves stickers - if you want stickers as well, get them at https://pyod.shop.

Discussion

pic
Editor guide