-
Slim
Slim is a template language whose goal is to reduce the syntax to the essential parts without becoming cryptic. (by slim-template)
I spent a few days of my spare time building a VS Code extension that would bring better syntax highlighting for the Slim template language to the editor. I quite enjoyed most of the process so I’d like to share what I learned.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
zed
Code at the speed of thought – Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
Now, fast forward to last year's Rails World conference that I was a lucky attendee of. What a breeze of fresh air! Among the many many inspiring people, talks and presentations, I noticed one thing: most people use VS Code, some use Vim but – more importantly – a lot of people tweak their editor / IDE almost as routinely as they tweak the code they work on professionally! And I thought: I want that too, how come I've lost this mindset here? I’ve taken for granted that I can tweak every imaginable aspect of my Linux OS as well as the Gnome environment so why not my IDE – the program that I literary spend most hours a day in? That was the final nudge for me to try to switch to something – anything really – that would be feasible for me to tweak and that’s how I ended up in VS Code. I’m not saying this will be my final IDE destination (looking at you Zed, Fleet or perhaps even Vim) but I know I want to stay closer to where a more active developer community around the editor is.
-
I said to myself: it couldn’t be that hard to fix, could it? Well… When I looked at the repository, I soon found out that it wouldn’t be that easy: the grammar syntax was in some hardly comprehensible XML format (PList) and looked like being a bare copy from somewhere else, there were no comments or helpful tips anywhere and, above all, the whole thing was basically unmaintained: last changes from several years ago, no issues resolved, no PRs merged. I’m not judging here (of course I made several ”zombie projects“ myself, too), I just hope it’s clear now that I had to go down the rabbit hole and rebuild the extension from the bottom up.
-
As a ruby developer, I was happy to find that VS Code / TextMate grammar files use the same regular expression engine called Oniguruma as ruby itself. Thus, I could be sure that when trying my regular expressions in my favorite online regex tool, rubular.com, there would be no inconsistencies due to the engine inner workings.
-
The format of the test files themselves is inspired by the relatively new initiative by the Sublime Text team when they introduced a new grammar file format called Sublime Syntax and – more importantly – a way to unit test grammars. It’s using some lovely human-friendly magic comments that allow to specify what scopes should the grammar file produce for a given position on a given line.
-
vscode-grammar-test
-
Luckily, there is a project that has fitted my needs perfectly: vscode-grammar-test. It’s a command line tool that builds on the VS Code regex engine and grammar file parser and allows to run unit tests directly against a given grammar file.
-
First of all, I like Slim. I like the beauty and cleanness of Slim templates, to me they are way more readable than regular ERB templates and I think they fit in the ruby/Rails ecosystem very well. Slim is a close cousin to Haml, without the ugly percent characters, haha. I've used Slim exclusively in my projects since about 2016.
-
Luckily, there is a project that has fitted my needs perfectly: vscode-grammar-test. It’s a command line tool that builds on the VS Code regex engine and grammar file parser and allows to run unit tests directly against a given grammar file.
-
This is cool. Even cooler is the fact that the Sublime Text team also provide their own official and full-featured grammar for Slim templates as well as unit tests! So, in the end, I just grabbed the test file and used it as a basis for all my development of the VS Code extension grammar file. ❤️
-
With all the tools and some basic theoretical knowledge of the problem at hand, I began building the grammar file. Of course I didn’t start from scratch though, I used the official TextMate grammar file (the one in the YAML format) from the Slim language repository.
-
I converted my YAML grammar file to the JSON format using the js-yaml tool (see my wiki for more instructions).