VS Code Custom Syntax Highlight Extension works when invoked directly but not after being installed

Question

I have created a custom syntax highlight extension for VS Code for a scripting language of mine.

I started running Yeoman Visual Studio Code Extension Generator from within a standard folder. After giving some generic details of my language such a name, file extension, etc. Yeoman created a folder named after my language and asked my if I wanted to open VS Code to work on it.

I said yes, and started to modify the syntax specific file named syntaxes/bonal.tmLanguage.json (bonal is the language and .bnl the file extension) to suit my needs.

As suggested in a file (inside the Yeoman created folder) named vsc-extension-quickstart.md:

## Get up and running straight away

* Make sure the language configuration settings in `language-configuration.json` 
  are accurate.
* Press `F5` to open a new window with your extension loaded.
* Create a new file with a file name suffix matching your language.
* Verify that syntax highlighting works and that the language configuration 
  settings are working.

And so I did , making changes and launching VS Code windows via F5 to test my syntax adjustments till everything was just as I wanted it to be.

After that, the "easy" part should have been to just copy the "bonal" directory created by Yeoman containing the whole thing to <user home>/.vscode/extensions; close VS Code and launch it somewhere with source code files with '.bnl' extension.

But it doesn't recognize the files. It simply treats them as "Markdown" files and if I try to select the type of file in the bottom right of the editor, "bonal" is not there (it was when working within the creating directory mentioned before). I tried making a file association, (Command palette + Change Language Mode) but the language is not listed (it is in F5 debug mode). I also tried creating a settings.json file in '/.vscode/' but that doesn't work either.

{
  "files.associations": {
    "*.bnl": "bonal" 
  }
}

And, as I mentioned before, if I go to the directory where I developed the whole thing and run "code bonal", plus F5 , etc. It works! (it also works if I launch 'code bonal' inside '/.vscode/extensions/' + F5 )

Any Idea of what I am doing wrong will be greatly appreciated.

Just in case, I use ubuntu 22.04 and VS Code 1.81.1

And this is the "package.json" file:

{
  "name": "bonal",
  "displayName": "Bonal",
  "description": "BONAL Programming Language",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.81.0"
  },
  "categories": [
    "Programming Languages"
  ],
  "contributes": {
    "languages": [{
      "id": "bonal",
      "aliases": ["Bonal", "bonal"],
      "extensions": [".bnl"],
      "configuration": "./language-configuration.json"
    }],
    "grammars": [{
      "language": "bonal",
      "scopeName": "source.bonal",
      "path": "./syntaxes/bonal.tmLanguage.json"
    }]
  }
}

Thanks in advance!

Answer 1

Do not move/copy your own extensions to .vscode/extensions to install them. Instead, press Ctrl+Shift+P and select Developer: Install Extension from Location.... A directory picker will appear, and you will have to select the directory where your extension is located. This will not copy the folder, but will read your extension from its location (so you will not need to reinstall the extension after making changes).

After making changes to your extension, to restart it, press Ctrl+Shift+P again and select Developer: Reload Window to refresh the VS Code window. Alternatively, close VS Code and reopen it.