Creating Visual Studio Code extension for syntax highlighting of a custom language

Question

I'm trying to create an extension in Visual Studio Code so as to enable syntax highlighting for a custom language. I found the helpful advice offered by @Wosi here: Create Custom Language in Visual Studio Code. Based on that I attempted to the following test. I created a subfolder under %USERPROFILE%\.vscode\extensions with a package.json in the root defined as follows (from the above example):

{
    "name": "mylang",
    "version": "0.0.1",
    "engines": {
        "vscode": ">=0.9.0-pre.1"
    },
    "publisher": "me",
    "contributes": {
        "languages": [{
            "id": "mylang",
            "aliases": ["MyLang", "mylang"],
            "extensions": [".mylang",".myl"]
        }],
        "grammars": [{
            "language": "mylang",
            "scopeName": "source.mylang",
            "path": "./syntaxes/mylang.tmLanguage"
        }]
    }
}

I then created a syntaxes subfolder under that, and included a mylang.tmLanguage file based on the example given by @wozi here: How to create a simple custom language colorization to VS Code There a couple of minor modifications simply to make the naming consistent with the above JSON file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>scopeName</key>
        <string>source.mylang</string>

        <key>fileTypes</key>
        <array>
            <string>mylang</string>
            <string>myl</string>
        </array>

        <key>name</key>
        <string>mylang file</string>

        <key>patterns</key>
        <array>
            <dict>
                <key>match</key>
                <string>\b(?i:(hint|info|information))\b</string>
                <key>name</key>

                <string>info-token</string>
            </dict>                
            <dict>
                <key>match</key>
                <string>\b(?i:(warning|warn))\b</string>
                <key>name</key>
                <string>warn-token</string>
            </dict>
            <dict>
                <key>match</key>
                <string>\b(?i:(Error|Failure|Fail))\b</string>
                <key>name</key>
                <string>error-token</string>
            </dict>
            <dict>
                <key>match</key>
                <string>\b((0(x|X)[0-9a-fA-F]*)|(([0-9]+\.?[0-9]*)|(\.[0-9]+))((e|E)(\+|-)?[0-9]+)?)(L|l|UL|ul|u|U|F|f|ll|LL|ull|ULL)?\b</string>
                <key>name</key>
                <string>constant.numeric</string>
            </dict>                                
        </array>
        <key>uuid</key>
        <string>FF0550E0-3A29-11E3-AA6E-0800200C9A77</string>
    </dict>
</plist>

However, when I open Visual Studio Code (v1.11.2) with the following test file (test.mylang):

2017-04-17 18:38 Hint This should be blue!
2017-04-17 18:38 Warning This should be amber!
2017-04-17 18:38 Fail This should be red!

There are no colours for the keywords (Hint, Warning, Fail). Do I need to do something else to specify a theme? Or do I need to specify a new unique UUID (and if so, can I just make up my own, or do I need to register it somehow)?

Answer 1

When you run the Developer: Inspect TM scopes command, you can see that the correct scopes are being used:

The issue is that there's no color associated with the info-token scope in the default theme(s) (hence "No theme selector"). It seems that since that other answer you linked, the names of these scopes changed to include a token.-prefix with VSCode 1.9.0. This was discussed in #18839, and the relevant commit that reintroduced these scopes with new names is b2aa308.

In VSCode 1.13.0, I get the expected coloring using token.info-token, token.warn-token and token.error-token: