LookML VSCode Extension - Syntax Highlighter

Dawid · 03-22-2021 01:09 AM

After having read this topic:

https://community.looker.com/open-source-projects-78/anyone-interested-in-a-vscode-plugin-9353

many times, I decided to give it a shot. I was told by Looker Staff that they can’t share the regular expressions for the grammar for internal reasons and, as suspected, the red tape due to being sold to Google.

I tried to do it on my own in my spare time since it seemed like a cool project. I did it with the help of the code that Ladvien has already written (https://github.com/Ladvien/vscode-looker)

This is just a first try and proof of concept. The colours are crazy just so that I can easily differentiate between different patterns 🙂 In terms of grammar recognition I believe It’s close to what we have in the LookML editor, and perhaps slightly more. (recognising the SQL in SQL parameters (where we could use SQL grammar recognition that I think Ladvien had in mind), values in arrays, and so on)

Let me know what other things would be useful in terms of syntax highlighting and here is a list of what I’ve done so far:

Scopes (anything that has opening and closing bracket {}) - would apply to view, explore, parameter, dimension, measure, set
1. Type - yellow
2. Name green
SQL Parameters - any line that starts with sql and finishes with ;;
1. Name of the parameter - orange
2. Value - red
  1. Liquid - pink
  2. LookML variable or field reference - purple
Parameters - all other parameters
1. Name - blue
2. Value - lighter blue
  1. Strings - brown
  2. Yesno - Pink-ish
  3. Array - light purple
  4. Variable - purple

Did not colourise the parenthesis as I’m using a separate extension called Bracket Pair Colorizer 2 that works in all languages and helps me identify matching parenthesis.

Let me know if there’s anything else that would be useful in the syntax highlighting and whether it’s a plugin that you would be useful for you. I’m still learning the grammar and how to name and reference it properly.

These are the settings that then can be used to change colours of the different part of the syntax:

sgoley

I’d be interested in contributing to this if you have a public repo!

thomas_brittain

Hey @Dawid, this is great! The reason I stopped working on my VSCode Looker extension is I didn’t have time to work out the LookML grammar in TextMate and the extension. Let me know if you’d like to collaborate directly. I’ll DM.

Also, it seems someone else is working on it too:

https://github.com/sgoley/LookML-Syntax-Highlighter

I’ve not played with it much, but doesn’t seem to do everything I wanted. But! I appreciate sgoley posting it for posterity.

--Thomas,

aka, Ladvien

Dawid

Hi @thomas_brittain and @sgoley

I made my repository public: https://github.com/moseleyi/lookml-highlighter

I had to be away for over a month, so I couldn’t work on it but perhaps we can collaborate together in order to build a whole extension for LookML.

sgoley

Hi @thomas_brittain & @Dawid!

I’m a huge fan of what you are both doing here already and can say it is *definitely* needed.
I enjoy the freedom of working in focused mode offline sometimes (vs in the Looker IDE) and the having a simple offline editor with highlighting etc. gives me *most* of what I need to update models in small ways or add to descriptions, re-format or lint code etc.

I’m not gonna lie, this was my first step ever into VS code extensions so I’m definitely somewhat over my head in terms of writing the VS commands / typescript.

That said, I’m happy to be a part of the conversation and contribute however I can! Testing, regex, etc.

I even started seeing if we could incorporate a small icon theme since some organizations like to keep their repo relatively flat in terms of file structure and it becomes somewhat cluttered quickly. Icons are a great visual aid. Branch here

So far it seems like vs-code sets icon themes exclusively so turning this on disables other previously set icon themes. Will need a way to make those play nicely together.

Best,
Scott