IDE with Jekyll/liquid support?

Hi,

I use Jekyll for several sites and like it very much.

My development environment looks like this:

  • Vim as my primary editor
  • Makefiles to run jekyll server, checklinks, etc.
  • Konsole or iTerm as my terminal emulator to run it all in

This works fine for regular day-to-day work when I am just writing content or making minor adjustments.

However, when I want to refactor larger parts or make big changes in the design across multiple layout templates/includes, changed _data variables, directory layout, etc., I am really missing some of the features of modern IDEs. For example the ability of an IDE to rename a _data variable in _data/foo.yml and then have all references in liquid templates automatically be renamed as well. Like for example how I can do in PyCharm with a Python project.

Are there any good IDEs that support Jekyll well? Preferably free/libre software but not a hard requirement.

1 Like

Visual Studio Code works great for me. Here’s an overview video I created a few years ago. It mostly still stands, but a few UI changes may require a bit of poking around.

Thanks for the suggestion about VSCode and for the linked video. I may have to try VSCode although last time I tried it (several years back), I did not like it very much. It seems a bit half-baked and needed lots of plugins to do fairly basic stuff. Which I guess is OK, but the plugins were of varying quality to put it mildly… Oh well… I will give it a go.

One thing, though: Does it have comprehension of actual jekyll/liquid, though? For example, will it do the following:

1: if I link to a page in a liquid page like so [foo](/foo.html) in a page, can I then Ctrl+click this to open up foo.md from the right location? This means that it must understand that /foo.html is generated from foo.md and that “/” in the URL is whatever local folder on the file system (as defined by _config.yml)

2: Will it support auto completion of various names in templates, etc. like: {{ page.foo }} and { site.foo | somefunction }} or even {% someting %} ?

3: Will it allow me to refactor safely across multiple types of files. For example, if I rename a variable in _data/vars.yml, will it then update the references throughout the site, including in templates, pages, layouts? Same for filenames, for example name of an included file or just name of a linked file or asset?

Maybe I missed it, but I don’t think I saw these features in your video.

The product always gets significant updates. I understand your concerns, but to be honest, the extensions are essential because I don’t think Microsoft will add support for every programming language or solution to every developer’s needs.

For example, Liquid is important, and while many people use Jekyll or some variant, many use themes or templates. Given how frequently this forum is used, I think 80% use templates, and 20% write lots of code using Liquid. For Microsoft to invest in supporting that functionality out of the box would be a considerable expense with likely little return. I’m not speaking for Microsoft and the open-source community that supports the development of Visual Studio Code’s engine, but I can bet there are more prominent languages to support.

  • Visual Studio Code supports Markdown
  • There is an extension that supports Liquid type-ahead
  • There is an extension that supports Liquid syntax highlighting

VS Marketplace Link

Publisher: Franky Lau

Liquid Languages Support

Publisher: Neil Ding

I recently built this online jekyll editor for myself and decided to share that with other as well.

It’s still in Beta, but I thought might be useful to you.

While that might be a great product you have built, I want to self host.