はじめに

Emmet とは HTML 等のタグ入力時に、専用の略式記法を使うことで、手間と作業時間を減らすことができるツールです。例えば「<div class="container"></div>」を記述したいときは「div.container」で入力することができます。このように、あるコードを簡単に呼出可能にしたコードはスニペットと呼ばれています。

Emmet — the essential toolkit for web-developers

https://emmet.io/

ところで HTML のコーディングを行っていると、自分が良く使うタグの組み合わせが出てくると思います。

例えば、僕がこのブログで記事を投稿するさいには、ソースコードの部分で
<pre><code class="hljs"></code></pre>
というタグをよく使います。

これを Emmet で記述する場合には pre>code.hljs と入力して Tab キーを押すことで実現できます。しかし、これでもちょっと長いと感じたので、僕は自作スニペットを登録し「hljs」で変換するようにしています。

小さなことですが、何度も使うものだと効果は大きいです。

そこで今日は Visual Studio Code (VS Code) の Emmet で自作スニペットを使う方法 をご紹介します。

目次

1. 自作スニペットの登録
2. 自作を優先に設定
3. おわりに

1. 自作スニペットの登録

登録は設定ファイルの html.json に記述します。

VS Code の上部メニュ－にある File > Preferences > User snippets を選択します。

画面上部中央に下記のようなテキストボックスと言語の一覧が表示されます。入力欄に「HTML」と入力すると候補が絞り込まれるので html.json (HTML) を選択してください。

もしかしたら html (HTML) と表示されているかもしれません

html.json が開けたら、下記のように追記してください。

{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
	...
	// ↓これを追加
	"highlight.js": {
		"prefix": "hljs",
		"body": "<pre><code class=\"hljs\">$1</code></pre>$0"
	}
}

この例は冒頭でお話しした「hljs」の設定で、「hljs」と入力して Tab キーを押すと body キーにある内容が出力されます。

body にある $1 は自動入力後のカーソルの移動先です。$2 を追加すると Tab でそちらにカーソル移動ができるようになります。そして $0 はカーソルの最後の移動先を表します。

例えば下記のように $2 を追加して、スニペット「hljs」でタグ生成後に Tab キーを押していくと、カーソルが
$1 => $2 => $0 の順に移動するようになります。

"body": "<pre><code class=\"hljs$2\">$1</code></pre>$0"

Snippets in Visual Studio Code

https://code.visualstudio.com/docs/editor/userdefinedsnippets

Tabstops (Snippets in Visual Studio Code)

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_tabstops

2. 自作を優先に設定

既存のスニペットと名前が重複していたりすると、そちらが優先されてしまい、リストから自作スニペットの方を選択する手間が発生します。

自作スニペットを優先させるためには、VS Code の設定画面か settings.json の変更を行います。

settings.json を直接編集する場合は下記のように設定してください。
(設定の中に editor.snippetSuggestions がない場合は追記してください）

"editor.snippetSuggestions": "top"

設定画面から行う場合は「editor.snippetSuggestions」で検索し、「Editor: Snippet Suggestions」のセレクトボックスで「top」を選択してください。

Visual Studio Code でユーザースニペットを優先的に表示させる – ミルログ

https://www.mirucon.com/2017/07/16/visual-studio-code-user-snippets/

3. おわりに

自作スニペットを覚えるとコーディングが楽になり、時間の短縮にもつながります。

Emmet に慣れていない方は、最初はもどかしく感じるかもしれませんが、習得すれば効率がアップしますので、是非トライしてみてください。