css（cscs）コーディングしていると同じような内容を毎回入力していることに気が付きました。
特にgridは、結構使い所が多くて多用しているんですが、
.box{
"display: grid;",
"grid-template-columns: repeat(2,auto);",
"grid-template-rows: repeat(2,auto);",
"gap: 10px;"
}
みたいに毎回書くのが結構面倒になってきます。
効率よくコーディングするにはscssのmixinとかfunctionとか使って簡単にすることができますが、他社のプロジェクトを編集するような時はその定義がされていないこともあり、使い回しが悪いと感じることがあります。
そんなときに、自分のスニペット集があればそこからコピペして使いまわすようにすれば簡単じゃん！
とおもってNotionのデータベースによく使うスニペットをまとめていました。
でもNotionでまとめるのは、ちょっと使いづらいなーと感じていました。
ってか、そもそもVSCodeのスニペット機能があるじゃん
そうなんです。
VScodeにはスニペット機能があり、ユーザースニペットを登録することで、ショートカットやサジェストで使うことができます。
VSCodeのスニペット登録方法
- 設定から「ユーザースニペット」を選択
コマンド パレットにどのファイルのスニペットを作成するかのプルダウンが表示されます。
ファイルごとに使えるスニペットを作成することができます。（この画像ではcssとscssがすでにスニペットを設定中です）
※「新しいグローバルスニペットファイル」はすべての拡張子に対して使用できるスニペットを登録することができます。
※「プロジェクトの新しいスニペット ファイル」はプロジェクトフォルダごとに設定するスニペットを登録することができます。特定のプロジェクトだけでよく使うスニペットなどを登録すると便利そうですね。
例えば「プロジェクトの新しいスニペット ファイル」を作成すると、プロジェクトフォルダ直下に「.vscode」フォルダが生成され、作成したスニペットファイルが生成されます。
この.vscodeをgitで共有すれば他のメンバーにも同じスニペットが使えるようになります。
それではscssファイルで使用するスニペットを登録してみます。
先程のコマンド パレットからscssを選択します。
この中にjsonを追記してスニペットを登録していきます。
"①スニペット名": {
"prefix": "②入力するとこのスニペットを呼び出せます",
"body": [
"③ここに登録したいスニペットを一行ずつ入力",
"③ここに登録したいスニペットを一行ずつ入力",
"③ここに登録したいスニペットを一行ずつ入力"
],
"description": "④説明文を入力"
},
①スニペット名は自分が識別する用なので任意でスニペット名をつけます
②prefixは入力によってこのスニペットを呼び出せます。例えばprefixに「my_snipett」と登録しておくとコーディングのときにmyと入力途中から登録したスニペットをサジェストしてくれます。
③は登録したスニペットを展開するソースコードを入力します。（1行づつ入力する必要があるので注意！）
④このスニペットに説明文を設定できます。サジェストしたツールチップに表示します。
以下はスニペットの登録例です。
"my-grid": {
"prefix": "snippet:grid",
"body": [
"display: grid;",
"grid-template-columns: repeat(2,auto);",
"grid-template-rows: repeat(2,auto);",
"gap: 10px;"
],
"description": "gridレイアウトのsnippetです"
},
VSCodeのスニペット使用方法
scssファイルに関連してスニペットを登録したので、scssファイルを開いて先程登録したprefixを入力します。
sniまで入力すると以下のようにサジェストしてくれます！
このスニペットを選択すると展開されます！
このように関連するファイル・プロジェクト・すべてのファイル共通でよく使うコードなどを区別して登録しておけば、効率アップに繋がります。
$1、$2を使ってみる
gap:10px;のところですが、いつも10pxではなく都度変わると思います。
そのときは10pxのところを$1として登録すると、スニペットを呼び出し後にカーソルがその位置に移動しすぐに入力することができます。
スニペットの変動する部分などに$1、$2…と登録しておくと便利そうですね！