Create Custom Language in Visual Studio Code

Question

Is there a way to extend the supported languages/grammars in Visual Studio Code? I'd like to add a custom language syntax, but I've not been able to find any information on how language services are provided.

Can anybody point to any references or even examples of existing language implementations?

Answer 1

It's possible with the new version 0.9.0. There's an official documentation on how to add a custom language: https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

You need a .tmLanguage file for the language you want to add. You can find existing files e.g. on GitHub or you can define your own language file. Look here to get an idea of how to create one: http://manual.macromates.com/en/language_grammars

After finding a .tmLanguage file you have two ways to create an extension based on it.

Option 1: Using a Yeoman generator

• Install node.js (if you haven't already done)
• Install yo (if you haven't already done) by executing npm install -g yo
• Install the Yo generator for code: npm install -g generator-code
• Run yo code and select New language support
• Follow the instructions (define the .tmLangauge file, define the plugin name, file extensions etc.)
• The generator creates a directory for your extension with the name of the plugin in your current working directory.

Option 2: Create the directory on your own

• Create a directory with the name of your plugin (only lowercase letters). Let's say we call it mylang.
• Add a subfolder syntaxes and place the .tmlanguage file inside of it

• Create a file package.json inside the root of the extension folder with content like this

  {
      "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"
          }]
      }
  }
  

Finally add your extension to Visual Studio Code

Copy the extension folder to the extension directory. This is:

• on Windows %USERPROFILE%\.vscode\extensions

• on Mac/Linux $HOME/.vscode/extensions

Restart Code. Now your extension will run automatically everytime you open a file with the specified file extension. You can see the name of the used plugin in the down right corner. You can change it by clicking on the name of the extension. If your extension is not the only one registered for a specific file extension then Code may chooses the wrong one.

Answer 2

Using reverse engineering you can add a new language to VSCode. You can take a look on how typescript is implemented as a JavaScript plugin and how it communicates with node.exe via pipe. But it's a hard thing since it's coming all without documentation I'll provide a really short documentation here:

You can define a new plugin in the plugins folder C:\Users\USER\AppData\Local\Code\app-0.3.0\resources\app\plugins.

Copy the typescript plugin folder and rename mentioned file extensions and language names in all files to your new language, so that your new plugin is going to be used when a .mylang file is opened.

In typescriptServiceClient.js you see that a child process is being forked and that its stdout is coupled to a new WireProtocol.Reader. Bind your own mylanguage.exe (you'll probably need to write that exe on your own). VSCode asks that binary to get more language specific information.

In typescriptMain.js you find the feature registration for the language. Delete every call to monaco.Modes.XXXXXXSupport.register except monaco.Modes.DeclarationSupport.register.

Now open a directory in VSCode that contains .mylang files and open one of them via CTRL+P + FileName. Right click on an identifier and select Go to Definition. VSCode sends now a request like this via StdIn to your exe

{"seq":1,"type":"request","command":"definition","arguments":{"file":"d:/Projects/MyProj/Source/MyFile.mylang","line":45,"offset":9}}

VSCode expects an answer like this:

Content-Length: 251
[LINE BREAK]
{ "seq" : 1, "type" : "response", "command" : "definition", "request_seq" : 1, "success" : true, "body" : [{ "file" : "d:/Projects/MyProj/Source/MyOtherFile.mylang", "start" : { "line" : 125, "offset" : 3 }, "end" : { "line" : 145, "offset" : 11} }] }

If everything works VSCode will open MyOtherFile.mylang and set the cursor to line 124 in column 3.

Try it on your own ;-)

Answer 3

To extend Wosi's .tmLanguage answer, using a .tmLanguage file is optional. Using a regular .json is a perfectly valid and—in my opinion—better readable alternative.

For an example, see VSCode_SQF: sqf.json

Inside the package.json, you would only need to change the path from ./syntaxes/mylang.tmLanguage to ./syntaxes/mylang.json.