Visual Studio Code: Treat other extensions as HTML

Question

For the purposes of syntax highlighting and colouring and intellisense is it possible to treat other extensions (tpl, master, etc) as HTML?

I know it's possible on a file by file basis by pressing CTRL+SHIFT+P and selecting "Change Language Mode" BUT I want it to work off file extension, and not have to redo it every time I open a new file.

I also know it's possible for some languages by editing the json files in the plugins directory, BUT there doesn't seem to be one for HTML.

Answer 1

Update for VS Code 1.0:

There is a setting files.associations that can be used to assign file patterns to languages. For example:

"files.associations": {
  "*.tpl": "html",
  "*.master": "html"
}

Previous answer:

This is a commonly asked feature request and we are looking into this issue for the future.

As a workaround if you need to have a solutio now:

• close VS Code
• open C:\\Users\\<your name>\\AppData\\Local\\Code\\app-<latest-version>\\resources\\app\\server\\lib\\mime.js
• find the object literal knownTextMimes
• for the file extension you want add the proper mime type
• for example '.tpl': 'text/html'
• save and restart code

Note: this change will not survive automatic updates but the hopes are that there is a better solution in the future update :)

Answer 2

1. Open notepad as admin (just in case) by right clicking run as admin.
2. Click file => open => copy and paste C:\\Program Files (x86)\\Microsoft VS Code\\resources\\app\\extensions\\html in box.
3. select view all file types at bottom right.
4. Open package.json

5. Copy and paste

    { "name": "html", "version": "0.1.0", "publisher": "vscode", "engines": { "vscode": "*" }, "extensionDependencies": [ "html" ], "contributes": { "languages": [{ "id": "html", "aliases": ["pd"], "extensions": [".pd"] }] } } 

replace everything with that. save and quit restart vs code.

Answer 3

I resolve the issue for my with installing Smarty Extension 1.1.1 + adding this settings into Settings.json

"files.associations": {
"*.tpl": "smarty",
"*.master": "smarty"
}

Answer 4

Jesse's answer is correct. I don't have enough reputation points to comment on his answer, but the path for Mac users is:

cd /Applications/Visual\\ Studio\\ Code.app/Contents/Resources/app/extensions/html/

Note that there will already be some extensions so instead of copying and pasting the code snippets wholesale, simply add the extension you'd like to the extensions and aliases array like so:

{
    "name": "html",
    "version": "0.1.0",
    "publisher": "vscode",
    "engines": { "vscode": "*" },
    "contributes": {
        "languages": [{
            "id": "html",
            "extensions": [ ".html", ".htm", ".shtml", ".mdoc", ".jsp", ".asp", ".aspx", ".jshtm", ".ejs" ],
            "aliases": [ "HTML", "htm", "html", "xhtml", "ejs" ],
            "mimetypes": ["text/html", "text/x-jshtm", "text/template", "text/ng-template"]
        }],
        "grammars": [{
            /* "language": "html", not yet enabled*/
            "scopeName": "text.html.basic",
            "path": "./syntaxes/HTML.plist"
        }]
    },
    "extensionDependencies": [
                "html"
    ]
}