VSCode syntax highlighting for language I'm making isn't working

Question

I'm trying to make a really simple language for a game I'm working on, and I want to implement syntax highlighting for it. I used the yo generator thing to make my extension for syntax highlighting, and put the folder in the Users.vscode\extensions directory, and restarted VSCode several times, but it isn't working. My language's file extension is "npc".

my npc.tmLanguage.json file is as follows

    {
        "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
        "name": "NPC Programming Language",
        "patterns": [
            {
                "include": "#keywords"
            },
            {
                "include": "#strings"
            }
        ],
        "repository": {
            "keywords": {
                "patterns": [{
                    "name": "keyword.control.npc",
                    "match": "\\b(if|while|for|return)\\b"
                }]
            },
            "strings": {
                "name": "string.quoted.double.npc",
                "begin": "\"",
                "end": "\"",
                "patterns": [
                    {
                        "name": "constant.character.escape.npc",
                        "match": "\\\\"
                    }
                ]
            }
        },
        "scopeName": "source.npc"
    }

and my language-configuration.json file is set up like

    {
        "comments": {
            // symbol used for single line comment
            "lineComment": "//"
        },
        // symbols used as brackets
        "brackets": [
            ["{", "}"],
            ["[", "]"],
            ["(", ")"]
        ],
        // symbols that are auto closed when typing
        "autoClosingPairs": [
            ["<", ">"],
            ["{", "}"],
            ["[", "]"],
            ["(", ")"],
            ["'", "'"]
        ],
        // symbols that that can be used to surround a selection
        "surroundingPairs": [
            ["<", ">"],
            ["{", "}"],
            ["[", "]"],
            ["(", ")"],
            ["'", "'"]
        ]
    }

I'm not sure exactly what I'm doing wrong, but no syntax highlighting comes up when I type things like "if" "return" "//", etc. Any and all help would be greatly appreciated

Answer 1

I created a custom language extension last year that I knew worked. I recently reinstalled VS Code and ran into a similar loading issue.

First, let's check that your extension works: See if you can debug your extension. Open the project folder, press F5. It should open another VS Code window with your extension running. Open a file containing your language syntax and see if it highlights. If not, debug via Inspect Editor Tokens and Scopes as suggested in the previous comments.

If your language extensions seems to work, then try packaging the extension and installing it:

Install node.js. Open a terminal window (e.g. cmd) and type/run npm install vsce. This installed the vsce program local to my user profile (e.g Windows: C:\Users\<username>\AppData\Roaming\npm\vsce)

In that same terminal window, cd to your project folder.

Then run: C:\Users\<username>\AppData\Roaming\npm\vsce package

Answer a few questions that come up, if any. (I said no to them, but you may have different answers.)

You should see a .vsix file get created. Now open VS code. Open the Extensions tab. Click ... and select Install from VSIX.... Select the generated .vsix file and watch it install.

If for some reason the extension doesn't load/activate/enable, then restart VS Code and try to reinstall again (my install didn't seem the work the first time, but maybe that was because I did it in a debug VS code and didn't notice).