FEATURE REQUESt: Syntax highlighting for Gauge extension for VSCode

[vgeruslu]

I am using Gauge extension for Visual Studio Code, and have now got a large test-code base. I would wish there was a syntax highlighting for Gauge extension for Visual Studio Code, since now it is hard to read and manage Spec and Concept files. I see in https://docsgaugeorg.readthedocs.io/en/master/using.html that syntax highlighting of Gauge in other IDE's are quite good, while the one in VSCode, has almost no syntax highlighting.

And thanks for offering Gauge as a good BDD framework

[kiranpatil-ic]

There is a workaround to get it working (to some extent).

• Press Ctrl + Shift +P in Vscode to bring up the command center
• Type Open User Settings
• Add the following (Please note the [Visual Studio Dark] is the name of the theme, so if you have a different theme, then please specify that)

    "editor.tokenColorCustomizations": {
        "[Visual Studio Dark]": {
           "textMateRules": [
            {
              "scope": "markup.list.unnumbered.markdown",
              "settings": {
                "foreground": "#efa486",  // <-- Change your color here
              }
            }
          ]
        }
      },

This will highlight the lines which will be executed (One's with prefix *). It still does not highlight the data tables or parameters.

[jensakejohansson]

I agree, some syntax high-lighting would greatly improve the user experience. Aside from scenario names, different colors for tags, comments, steps/concepts & parameters would be great.

Anyone knows if this could be "easily" implemented? Or if there is reason why it has not been done?

[zabil]

I think the syntax specs are specified at https://github.com/getgauge/gauge-vscode/blob/master/syntaxes/markdown.tmLanguage

And is based on markdown. You can try changing it to see if that works.

[jensakejohansson]

@zabil Thanks for pointing my in the right direction. After adding new scopes to the file I have syntax highlighting for parameters, tables, steps, tags etc.

This is all new too me, but to me it seems the tmLanguage-file contains quite a few things that are not really relevant to Gauge-files (since they only use a sub-set of the markdown-notation) while missing others gauge specific scopes, like for tags and parameters. I guess it's some sort of default markdown template.

After updating the scopes then the colors could be user-defined via .vscode/the settings.json in the project for different Gauge-specific definitions, like:

At the moment I have achieved this locally:

However, an unwanted side effect was that changes does not only apply to .spec & .cpt-files, but any other markdown-files in the project - like read-me-files, for example.

So I'd like to understand if it's possible to limit the scope of the .tmLanguage-file to only affect .spec & .cpt-file. @zabil Do you have any hints/insights regarding this?

If I find a solution/setup that isolates the changes to .spec & .cpt-files, then I'll propse a PR...

[sriv]

the syntax highlighting in vscode is provided by implementing a grammrr in TextMate grammar format (the file that @zabil referenced to).

Since vscode 1.43, there is support for semantic syntax highlighting which allows extensions to enrich the syntax highlighting by doing some parsing/tokenization on top of it. (Please see https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide) for more details and https://github.com/microsoft/vscode-extension-samples/blob/main/semantic-tokens-sample/src/extension.ts for an example

My suggestion is that we use markdown grammar for the textmate grammar (since gauge is based on markdown) and enrich it by implementing a gauge specific DocumentSemanticTokensProvider.

If you are interested, please try it out.

[aedwards9]

This would be a really great feature. This is one of the first pieces of feedback I got when trying to roll out use of Gauge to a wider audience! This is what I ended up with based on trial and error / very naive understanding of textMate! But was better than nothing.

"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"markup.list",
"meta.embedded.math.markdown",
"constant.numeric.math.tex",
"punctuation.math.begin.bracket.curly",
"punctuation.math.begin.bracket.round",
"markup.math.inline.markdown"
],
"settings": {
"foreground": "#57ad57",
"fontStyle": "bold"
}
}
]
}

@jensakejohansson would be keen to get it looking like your example!

[jensakejohansson]

@aedwards9 I actually ended up building my own version of the extension with some smaller modifications to my liking. However, for the syntax highlighting I did (also from my rather limited experience of this) modify the markdown.tmLangauge-file and added configuration to define the wanted colours in my setting.json.

The markdown.tmLanguage file is found in the 'syntaxes'-directory of the Gauge extension-folder. On a Windows machine you typically find your VSC extensions here: %USERPROFILE%\.vscode\extensions

When you've updated that file you can control most of the relevant highlightning you'll need via the settings.json-file that is located in the '.vscode'-directory of your Gauge project. I'll share my two files with you here and most likely you could just replace your local files with these (unless you customized you settings.json with other project related things).

The attached zip includes my settings.json and markdown.tmLanuge file. Feel free to try it out if you'd like.

syntax-highlighting-gauge.zip

[aedwards9]

That's worked a treat @jensakejohansson - will be really helpful for our team thanks

[vgeruslu]

Many thanks @jensakejohansson ... It worked like a charm ! I had in my mind first to develop my own syntax highlighter... But I was too busy to find the chance/time to learn all the details of the tokenColorCustomizations to make it work. I have now "installed" your mini-highlighter... And am telling my colleagues to use it too

[mario-s]

Thanks a lot @jensakejohansson. Although I was not able to change the color for step parameters.

"scope": "markup.gauge.step.params"