Building a syntax highlighting extension for VS Code

• Slim

  30 5,274 7.8 Ruby

  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.

• zed

  28 32,357 10.0 Rust

  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.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• vscode-slim

  1 6 -

  Slim language support for Visual Studio Code

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.

• oniguruma

  2 2,197 6.8 C

  regular expression library

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.

• sublime_text

  279 793 0.0

  Issue tracker for Sublime Text

  

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-tmgrammar-test

  1 84 5.9 TypeScript

  Test helpers for VSCode textmate grammars

vscode-grammar-test

• vscode-oniguruma

  3 105 4.1 TypeScript

  Oniguruma Bindings for VS Code

  

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.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• Haml

  24 3,748 7.5 Ruby

  HTML Abstraction Markup Language - A Markup Haiku

  

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.

• vscode-textmate

  5 540 5.5 TypeScript

  A library that helps tokenize text using Text Mate grammars.

  

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.

• Slim

  1 2 2.8 Slim

  Ruby Slim syntax for Sublime Text (by SublimeText)

  

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. ❤️

• ruby-slim.tmbundle

  1 184 -

  A Textmate / Sublime Text bundle for Slim

  

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.

• vscode-ruby-slim

  1 3 8.8 Slim

  Slim language support for VSCode

I converted my YAML grammar file to the JSON format using the js-yaml tool (see my wiki for more instructions).

Suggest a related project