VS Code extension that adds basic syntax highlighting for JavaScript and TypeScript tagged template strings using language identifier comments:
const cssString = /* css */ `
button {
color: hotpink !important;
}
`;
const htmlString = /* html */`
<button class="my-button">
Click me!
</button>
`;
The language identifier comment must appear before the opening backtick for the template string. Here is basic list of valid identifiers (note that some languages require that you install an VS Code extension that provides a grammar for that language):
| Language | Supported Identifiers |
|---|---|
| css | css, css.erb |
| basic | html, htm, shtml, xhtml, inc, tmpl, tpl |
| ini | ini, conf |
| java | java, bsh |
| lua | lua |
| makefile | Makefile, makefile, GNUmakefile, OCamlMakefile |
| perl | perl, pl, pm, pod, t, PL, psgi, vcl |
| r | R, r, s, S, Rprofile |
| ruby | ruby, rb, rbx, rjs, Rakefile, rake, cgi, fcgi, gemspec, irbrc, Capfile, ru, prawn, Cheffile, Gemfile, Guardfile, Hobofile, Vagrantfile, Appraisals, Rantfile, Berksfile, Berksfile.lock, Thorfile, Puppetfile |
| php | php, php3, php4, php5, phpt, phtml, aw, ctp |
| sql | sql, ddl, dml |
| vs_net | vb |
| xml | xml, xsd, tld, jsp, pt, cpt, dtml, rss, opml |
| xsl | xsl, xslt |
| yaml | yaml, yml |
| dosbatch | bat, batch |
| clojure | clj, cljs, clojure |
| coffee | coffee, Cakefile, coffee.erb |
| c | c, h |
| cpp | cpp, c++, cxx |
| diff | patch, diff, rej |
| dockerfile | dockerfile, Dockerfile |
| git_commit | COMMIT_EDITMSG, MERGE_MSG |
| git_rebase | git-rebase-todo |
| go | go, golang |
| graphql | qgl, graphql |
| groovy | groovy, gvy |
| pug | jade, pug |
| js | js, jsx, javascript, es6, mjs |
| js_regexp | regexp |
| json | json, sublime-settings, sublime-menu, sublime-keymap, sublime-mousemap, sublime-theme, sublime-build, sublime-project, sublime-completions |
| less | less |
| md | md, markdown |
| mjml | mjml |
| objc | objectivec, objective-c, mm, objc, obj-c, m, h |
| scss | scss |
| perl6 | perl6, p6, pl6, pm6, nqp |
| powershell | powershell, ps1, psm1, psd1 |
| python | python, py, py3, rpy, pyw, cpy, SConstruct, Sconstruct, sconstruct, SConscript, gyp, gypi |
| regexp_python | re |
| rust | rust, rs |
| scala | scala, sbt |
| shell | shell, sh, bash, zsh, bashrc, bash_profile, bash_login, profile, bash_logout, .textmate_init |
| ts | typescript, ts |
| tsx | tsx |
| csharp | cs, csharp, c# |
| fsharp | fs, fsharp, f# |
| dart | dart |
| glsl | glsl |
| liquid | liquid |
| sparql | sparql |
For IntelliSense and more advanced embedded language support, checkout these extensions:
- lit-html — Html template intellisense
- vscode-styled-components — CSS template Intellisense
To build this extension, you'll need Git and Node.js.
First, fork this repo and clone your fork:
git clone https://github.com/YOUR_GITHUB_ACCOUNT_NAME/vscode-comment-tagged-templates.git
code vscode-comment-tagged-templatesThen install dev dependencies using npm:
npm installThe main grammar is generated using the script in build/build.js. To run it:
npm run buildThe supported languages are defined in build/languages.js
To run the tests:
npm run test