前回は、Vscode標準機能だけでスニペットを登録・展開する方法を紹介しました。ただ、JSONの手打ち編集や、prefixを覚えていないと呼び出せない点には、Dreamweaverのスニペットパネルに慣れていた身としてまだ不便さが残ります。
今回は続編として、その不便さを解消してくれる拡張機能を2つ紹介します。
① 登録する：Snippets Manager
標準機能ではJSONを直接書く必要がありましたが、Snippets Managerを使うと、prefix・body・descriptionを入力欄に書き込むだけで登録できます。カンマの付け忘れやダブルクォーテーションの抜けといった、手打ち特有のミスも起きにくくなります。
インストール
拡張機能タブ（Ctrl + Shift + X）で「Snippets Manager」を検索し、発行元が zjffun のものをインストールします。ターミナルから入れる場合は次のコマンドです。
code --install-extension zjffun.snippetsmanager使い方：新しいスニペットを登録する
- 編集するファイルを選ぶ：左のツリーに
all-global.code-snippets（全言語共通）やhtml.json（HTML専用）などが並ぶので、登録したい場所のファイルを選びます。 - 「Add Snippet」ボタンを押す：右側の画面に入力欄が追加されます。
- prefix・body・descriptionを入力する：prefixは呼び出し用の短い文字、bodyは展開したいコードです。
別の方法：選択したコードからスニペットを作る
エディタ上でコードを選択して、そこからスニペットを作成することもできます。すでに書いたコードを使い回したいときに便利です。
知っておくと便利なこと
- スニペットの検索、コピー＆ペースト、ドラッグ＆ドロップでの移動（ワークスペース⇔ユーザーなど）ができます。
- Vscode標準のUndo/Redo（
Ctrl + Z/Ctrl + Shift + Z）がそのまま使えます。 - 他の拡張機能が提供しているスニペットを編集した場合は、
F1→Reload Windowを実行しないと反映されません。 *.code-snippetsを右クリックして「Open With…」を選ぶと、通常のテキストエディタで開き直せます。
② 使う：Snippets Explorer
登録したスニペットを、サイドバーのツリー表示で一覧にしてくれる拡張機能です。前回紹介した Ctrl + Space の一覧表示と違い、サイドバーに出しっぱなしにしておけるので、prefixを覚えていなくても探せます。Dreamweaverのスニペットパネルに近い使い心地です。
インストール
拡張機能タブで「Snippets Explorer」を検索し、発行元が Wware Consulting のものをインストールします。
code --install-extension wware.snippets-explorer
使い方：スニペットを探して挿入する
- ファイルを開いて、「Snippets Explorer」を展開する：開いているファイルの言語に合わせて、使えるスニペットが一覧表示されます。
- スニペット名にカーソルを合わせる：展開されるコードの中身をプレビューできます。
- エディタの挿入したい位置にカーソルを置き、スニペット名をクリックする：その場にコードが挿入されます。
- 数が多いときはフィルターで絞り込む：ツリー上部のフィルターボタン（またはコマンド
Snippets Explorer: Filter Snippets）で検索できます。
ツリーの表示対象は、ユーザースニペット、プロジェクト（ワークスペース）のスニペット、拡張機能が提供するスニペット、グローバルスニペットなど、複数の保存場所にまたがっています。
出ないときのチェックポイント
実際に使っていて引っかかった点をまとめます。
HTMLを開いているのにスニペットが出ない
原因として考えられるのは次の2つです。
- 更新ボタンを押していない：Snippets Explorerはスニペットファイルの変更を自動で検知しません。JSONを編集した後や、スニペットを提供する拡張機能を入れた後は、ツリー右上の更新ボタン（🔄）を押してください。
- 言語モードが「HTML」になっていない：表示されるスニペットは、いま開いているファイルの言語モードで決まります。画面右下のステータスバーに表示されている言語名を確認し、違っていればクリックして「HTML」を選び直してください。
どのファイルを開いていても常に表示したい
Snippets Explorerには、この動作を切り替える設定項目がありません。代わりに、スニペット側を「全言語共通」にすることで対応します。
Snippets Explorerの更新ボタンを押します。
Ctrl + Shift + P → 「ユーザースニペットの構成」を選びます。
言語別のファイルではなく、「新しいグローバルスニペットファイル（New Global Snippets file…）」を選んで作成します（すでにある *.code-snippets でも構いません）。
スニペットに "scope" を書かずに登録します。
まとめ：2つの使い分け
| Snippets Manager | Snippets Explorer | |
|---|---|---|
| 役割 | 登録・編集する | 探して挿入する |
| 発行元 | zjffun | Wware Consulting |
| 操作 | 入力欄にprefix・bodyを書く | クリックで挿入 |
| 注意点 | 拡張機能のスニペットを編集したらReload Window | ファイルを編集したら更新ボタン |
普段はSnippets Explorerを開いておいて、新しいスニペットを足したくなったらSnippets Managerで登録する。この流れにすると、JSONを手で編集していた頃よりずっと気軽にスニペットを増やせます。