お久しぶりです。あおしまロボです🤖

最近はもうすっかり寒くなっていよいよ冬の空気になってきましたね。
わたしはもうすでにカイロを持ち歩いています。

さて、今日はVSCodeのスニペットについてということで。
HTMLやCSSでは特に便利ですよね。

自分で追加できたら便利だな〜と考えていたので、
追加方法、書き方を調べて追加してみました。

自分用のメモとして手順を書き残すので、暖かい目で見て下さい。

スニペットの登録場所

今回はscssファイルを編集するときのスニペットを追加しました。
scssファイルを選んだ理由は特にありません…あくまで練習としてです。

VSCodeの歯車マークから「スニペット」を選択、
任意のjsonファイルを選択して開きます。

書き方①：構成

まず関数名を決めてダブルクォーテーションで囲んで書きます。
その後にコロンを書き{}をつけたところに項目を書きます。

• prefix：記述すればスニペットを呼び出せるワード
• scope：スニペットが有効な範囲
• body：呼び出される内容
• description：スニペットの説明

ほかにも項目はあるようですが、今回はこの四つで記述しました。
またルールとして、1行ごとに文末にカンマをつけて区切らなければいけません。

書き方②：bodyの中身

bodyの中身の書き方についてです。
基本的にはスニペットにしたい内容をそのまま記述すればいいようですが、
タブなどを反映させるには書き方に決まりがあるようです。

• タブの挿入：\t
• カーソル位置の指定：$1($2,3…と、タブを押してカーソルを移動可能)
• ＄の記述：＄記述直前に\\を記述

これらの規則に則って記述すれば、便利なスニペットの完成です！

まとめ

いかかでしたか。

今回は実践的なスニペットを登録しませんでしたが、
今後何らかのスニペットを登録したくなったときに
これらを踏まえてスラスラ書けたらいいなと思います。

以上、あおしまロボでした🤖