コラム
意外と使っていなかったVS Codeのユーザースニペット（自作の雛形呼出機能）
お久しぶりです。WEB制作チームのウサナミです。
今更ですが、VS Codeで最近ユーザースニペットというものを使い始めました。
今回はそのユーザースニペットの説明と使い方（MAC）、最後に使ってみた感想をご紹介します。
ユーザースニペットとは
まずスニペットとは何か、これはグーグルなどの検索エンジンをイメージするとわかりやすいと思います。
「ぐ」と打つと予測で「グーグル」といった感じで候補の文字が出てきますね？
プログラムでいうところのスニペットもそういうもので、ユーザースニペットは更にそのスニペットで候補として出てくる文字を自分でカスタマイズ出来る機能です。
使用例として、定型のタグで下のような物があったとして、それを文字一つで出せたらすごく楽ですよね？
ユーザースニペットはそれを実現する為の機能です。
<body>
<header>
</header>
<article>
<section>
</section>
<section>
</section>
<section>
</section>
</article>
<footer>
</footer>
</body>
確かにスニペットだけでも「b」とうつと
<body>
</body>
と予測で出すことが可能です。
でもこれだと定型の量次第では時間がかかる場合があります。
でもユーザースニペットで事前にカスタマイズしていれば
「b」と打つだけで、上のようなbodyの中のheaderやarticleも全て予測で出すことが可能です。
なので、使い方次第でこのユーザースニペットは作業時間を極端に短縮してくれる便利な機能なのです。
なのでVS Codeユーザーで何となく知っていた方も全く知らなかった方も試しにカスタマイズしてみることをお勧めします。
今まで何で使っていなかったんだろう…。そんな機能です。
ユーザースニペットのカスタマイズの仕方、使い方について（MACの場合）
まずユーザースニペットを登録する為のファイルを作成しなければいけません。
左上のメニューからCode→基本設定→ユーザースニペットの順に選択していきます。
手順通りに進めると一覧が出てくるのでその中の”新しいグローバル スニペット ファイル…（新しいスニペット）”を選びます。
ユーザースニペットを使いたいファイルの形式をファイル名とします。今回はhtmlファイルでスニペットを使用するのでhtmlと名前をつけます。
作成が完了したら
そのファイルの中に下のように呼び出したいコードを設定していきます。
{
"タイトル（これは何でも可）": {
"prefix": [
"候補を出すときの名前",
"複数カスタマイズ可能",
"ちなみに複数行設定する時は[]で閉じる必要があるようです。",
"test",// 呼び出し時に使います。
],
"body": [
"予測で実際に表示されるコードを入力",
"複数行入力する場合は「,」で区切って次の行に登録します。",
"「“”」など特殊な文字はプログラムと引っかかる為、その頭に\を入れなければいけません。",
"例）\”\”",
"もし上手く表示れない時は入れてみてください。",
],
"description": "説明文になります。予測候補を出すときに一緒に表示されます。似た名前の登録がもしあったときや登録内容が思い出せないときなどに活用できます。"
},
// ２つ目以降は「,」で区切って上と同じやり方で登録していきます。
// 表示名などが被っているとうまく予測変換されないようなので被らないように注意しましょう。
"タイトル": {
"prefix": [
"候補を出すときの名前",
],
"body": [
"予測で実際に表示されるコードを入力",
],
"description": "説明文"
}
}実際に使うとこんな感じで表示されます。
＜ 予測 ＞
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
＜ 表示 ＞
バッチリですね！
ユーザースニペットを使ってみた感想
私は主にCSSでユーザースニペットを使うことが多いのですね、まだ使い始めたばかりなせいか、
いまいち成果を実感出来ていません。
それでもたまに、「おお、一瞬でCSSが作れた！」と思う瞬間もあります。
カスタマイズしてよかったなと思う瞬間もあれば、登録がめんどくさいので割に合わないなと思う瞬間もあります。
カスタマイズした当初はどんな登録名にしてたか若干忘れるなんてこともありましたが、
最近は少しづつ欲しい登録した内容を早く出せるようになってきています。
これが更に慣れてくるとよりより快適に使えるようになるんじゃないかと私は思っています。