テンプレートリテラルにシンタックスハイライトを

## Abstract

JavaScript, TypeScriptなどでHTML, CSSの文字列を生成して返すような処理を書くことが稀にありますよね。そういった際に、その文字列は当然HTML, CSSファイルの中ではないので、シンタックスハイライトは効きません。`<>`を閉じ忘れていたりした時などは非常に気が付きにくいものです。そこで本記事では、`.js, .ts`ファイルなどで文字列にシンタックスハイライトを適用するVSCodeの拡張機能[Comment tagged templates](https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates)を紹介します。またそれだけでは内容も薄いので、vue.jsの`.vue`ファイルでシンタックスハイライトを効かせる方法も紹介します。

## 紹介

[Comment tagged templates](https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates)なる拡張機能を、先日Twitterで偶然見つけました。

https://twitter.com/wesbos/status/1527016431094796290?s=20&t=aBbd8W2lujh3Gtwl0_NiRg

「おお！！なんやこれ！？」と拡張機能のストアを早速見に行ってみると、見つけました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/bab5fa36-8d7e-551d-a9d0-b21e8e7bd030.png)
ストアページは[こちら](https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates)

公式のREADMEにある画像は次のようになっており、`/* html */`のようにタグをつけることでシンタックスハイライトをつけることができる拡張機能です。
![https://github.com/mjbvz/vscode-comment-tagged-templates/raw/master/docs/example.png](https://github.com/mjbvz/vscode-comment-tagged-templates/raw/master/docs/example.png)
(拡張機能の[リポジトリ](https://github.com/mjbvz/vscode-comment-tagged-templates)より)

SUGEEEEEということで秒でインストールしました。対応するシンタックスハイライトは次の表です。

| 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                                                                                                                                                                             |
| 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                                                                                                                                                                                     |

筆者が好きな言語であるPythonもシンタックスハイライトをしてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/264d4a83-ccc6-be8b-dddf-b79c419246f5.png)
流石に文法のチェックは行われませんが、自前で定義しているスニペットは有効なようです。

## Vue.jsでのシンタックスハイライト

最近Nuxt3, Vue3を触っている関係で、「`.vue`ファイルでもこの機能欲しいなぁ」と思い試してみましたが、残念ながらシンタックスハイライトは行われませんでした。しかしプルリク[support for vue files #23](https://github.com/mjbvz/vscode-comment-tagged-templates/pull/23)にはありました。(マージされていません。)
ということで、このプルリクを取り込んでしまえば良いです。

### 方法1. インストールした拡張機能のファイルを直接編集する。

拡張機能のインストールされているディレクトリを探します。windowsだと`C:\Users\takeMe-1010\.vscode\extensions\bierner.comment-tagged-templates-0.3.0`にあります。[package.jsonの変更履歴](https://github.com/mjbvz/vscode-comment-tagged-templates/pull/23/commits/b1ca50018f48ed4fc24e089b4b614a9342cdb85d)を参考に、該当箇所に加筆修正を加えればオッケーです。

### 方法2. プルリクされているブランチをcloneしてインストールする

拡張機能を一度でも開発したことがある人は`vsce`を導入しているでしょう。あれを使って自前でビルドしてしまえば良いですね。
該当するブランチは[ここ](https://github.com/homerjam/vscode-comment-tagged-templates/tree/vue-support)なので、適当なディレクトリへcloneします。その後`vsce package`で`.vsix`ファイルを生成して、VScodeへインストールします。

```bash
# `-b`でブランチを指定しないとmasterブランチがcloneされますが、こちらにマージされていないので意味はないです。
git clone -b vue-support https://github.com/homerjam/vscode-comment-tagged-templates.git
cd vscode-comment-tagged-templates
# もしvsceを未導入の場合はインストールします。
# npm install -g vsce
vsce package
# vscodeはこのようにコマンドでも拡張機能をインストールできます(豆知識)。
code --install-extension comment-tagged-templates-0.3.1.vsix
```

### 結果

vueファイルでも確かにシンタックスハイライトが入っています！！！やったぜ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/2b226e3b-7bbe-d2ef-c9be-cfe296311bfa.png)

## まとめ

本記事ではVSCodeの拡張機能の一つ、comment-tagged-templatesを紹介しました。
テンプレートリテラルにシンタックスハイライトを加えることで、処理に応じてコマンドや文を生み出す処理の際に間違いに気付きやすくなります。これは明確にメリットと言えます。
また後半ではvueファイルでシンタックスハイライトを追加する方法を紹介しました。
ソースコードは読めていませんが、プルリクを見る限り他の言語に対応するのは意外と簡単なのかもしれません。
もしサポートされていない言語のシンタックスハイライトを追加したかったら、ソースコードやpackage.jsonとにらめっこしてみてください。
それでは快適なVSCode生活を。

## 補足

- 流石にlintなどは走りません。あくまでシンタックスハイライトだけです。
    - Pythonの例にもあるように、自前で定義しているスニペットは使えます。
- ~~タイトルは「アルジャーノンに花束を」のリズムで刻みましたが、筆者は見たこともないです。~~