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>
`;
Usage
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 |
gql, 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 |
| applescript |
applescript |
| edgeql |
edgeql |
| cypher |
cypher, cyp, cql |
Advanced language support
For IntelliSense and more advanced embedded language support, checkout these extensions:
Contributing
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-templates
Then install dev dependencies using npm:
npm install
The main grammar is generated using the script in build/build.js. To run it:
npm run build
The supported languages are defined in build/languages.js
To run the tests:
npm run test
| |
