元々AdobeDreamweaverを使用していた自分にとって、Vscodeで使いにくいなと思ったのが、スニペットの管理方法です。
Dreamweaverだとスニペットパネルというのがあるので視覚的に管理できて、なおかつダブルクリックでコードに挿入できるという手軽さで多用しておりました。
それと同じ感覚でVscodeも使用しようとしたら少々てこずってしまい、結局何年もVscodeを遠ざけていた一因ともなっていました。
今年になってからAIクライアント絡みでVscodeを使用せざるを得ない状況になってきたのでいくつか記事を書いてみようと思います。そもそもVscodeのスニペットを敬遠していた要因はいくつかあります。
理由①：そもそも登録自体が面倒
Vscodeって設定画面難しくないですか？
いろいろ自分好みにカスタマイズできるのは良いところですがいかんせん設定ファイルを開くまでがまず大変。
1.画面左下の歯車アイコンをクリック
2.メニューから 「ユーザースニペットの構成」 を選択
3.画面上部に言語ごとの設定ファイルが並ぶので、該当の言語を選択して開く
開いたJSONファイルに、以下の形式でコードを追加
"スニペット名": {
"prefix": "呼び出し用のショートカットキー",//（必須）
"body": [//（必須）
"展開したいコード行1",
"展開したいコード行2"
],
"description": "スニペットの説明（補完時に表示される）"
}手動でJSONを編集する必要があるため、カンマの付け忘れやダブルクォーテーションの抜けといったイージーミスに注意が必要です。
※ちなみに、記述自体は最低限 prefix と body さえあれば問題なく動作します。
コマンドパレットを使う方法
その他にコマンドパレットというVscodeにある便利機能を使うこともできます。
Windows: Ctrl + Shift + P
Mac: Cmd + Shift + P
Ctrl + Shift + P ➔ snippets と入力 ➔ ショートカット: ユーザースニペットの構成 を選択。
これで一発でJSON選択画面に行けます。
理由②：コード展開も一癖ある（DWとのギャップ）
Dreamweaverだとスニペットパネルにある各スニペットをダブルクリックで挿入することが可能なのですがVscodeだとそれができません。
基本的にはあいまい検索に対応しているため例えばwordpress関連のものであればwp~~というショートカットにすることが多かったのでwpとエディタに入力することで候補がいくつか出てきてそれをクリックすることで選択可能です。
登録スニペット一覧表示するショートコード
Windows: Ctrl + Space
Mac: Cmd + Space使用可能なスニペットの一覧が出てきてそこから選択することが可能となります。
これを覚えることでだいぶ操作が効率的になります。
次回はいくつか拡張機能も入れたのでそちらについて紹介したいと思います。