Sign in
Log inSign up

Add file extensions to existing colorizer in Visual Studio Code

Coder Yeti's photo
Coder Yeti
·May 10, 2016

If (for instance) some obscure template file extension is being ignored by VS Code's default colorizer (syntax highlighting), it can be fixed by extending an existing colorizer.

In this example, I show you how to extend the html colorizer to be used by a random ext file extension.

(Note: These same steps can also be taken to include any file extension to colorizing scheme of any language present in VS Code)

  • Create a new directory inside ~/.vscode/extensions
  • Create new file: touch package.json
  • Paste into package.json :
{
    "name": "GiveAnyName",
    "version": "0.0.1",
    "engines": {
        "vscode": "1.1.x"
    },
    "publisher": "none",
    "extensionDependencies": [
        "html"
    ],
    "contributes": {
        "languages": [{
            "id": "html",
            "aliases": ["ext"],
            "extensions": [".ext"]
        }]
    }
}
  • Replace ext with desired file extension
  • Replace 'html' with desired colorizer

That's it!