JavaScriptのtemplate stringsを使ってHTMLを書いている人というのは少なくないと思う。

そこで今回は、sublime text 3でtemplate stringsの中のHTMLをsyntax highlightする方法とtemplate stringsの中にHTMLを書く時、自動で閉じタグを表示する方法を書いていく。

template stringsの中のHTMLをsyntax highlight

まず、PackageControllからBabelをインストールする。

次に、jsファイルのデフォルトのsyntaxをJavaScript(Babel)にする。

(jsファイルを開いてから、View -> Syntax -> Open all with current extension as… -> Babel -> JavaScript(Babel)を選択)

次に、Babel Packageディレクトリを開く。(Preferences -> Browse Packages -> Babel)

その中にある「JavaScript (Babel).sublime-syntax」を開く。

「template-string-body:」というセクションを探し、その先頭に次の2行を追加

- meta_content_scope: text.html.basic.embedded.js
- include: scope:text.html.basic

これでtemplate stringsの中のHTMLがsyntax highlightされるようになる。

template stringsの中にHTMLを書く時、自動で閉じタグを表示する方法

これには2つの方法がある。

一つ目は、「<h1」と打った時にtabキーを押す。

もう一つの方法は、「<h1></」と/(スラッシュ)を打った瞬間に閉じタグを表示する方法だ。

Preferences -> Key Bindingsを開きUserの方に以下を追加する。

{
	"keys": ["/"],
	"command": "close_tag",
	"args": { "insert_slash": true },
	"context": [
		{
			"key": "selector",
			"operator": "equal",
			"operand": "(text.html, text.xml, source.js) source.js string.template - string - comment",
			"match_all": true
		},
		{
			"key": "preceding_text",
			"operator": "regex_match",
			"operand": ".*<$",
			"match_all": true
		},
		{ "key": "setting.auto_close_tags" }
	]
}

これでtemplate stringsの中でもスラッシュを打った時に自動で閉じタグが表示されるはずだ。