そんな疑問にお答えします。
スニペットとは、定形のテキストをあらかじめ登録しておいて簡単に使いまわしできる機能のことです。
スニペットを用意しておけば、同じ入力を何回もくり返すということがなく、作業効率を上げることができます。
時短コーディングを目指すのであれば、スニペットの登録は欠かせません。
ここでは、VSCodeに独自のコードスニペットを登録する方法をご紹介します。
目次
スニペットの登録方法
スニペットを登録する拡張子のjsonファイルを検索
Macの場合はVSCode画面左上のCode→基本設定→ユーザースニペットを選択します。
（Windowsの場合はファイル→ユーザー設定→ユーザースニペットです）
次にスニペットファイルを検索します。
ここではサンプルとして、HTMLのスニペットを登録してみます。
「html」と検索すると「html.json(HTML)」が候補で表示されますのでこれを選択。
html.jsonを開きます。
コードスニペットはjsonファイルに記述します。
html.jsonを開くと、以下のような説明と記述のサンプルがコメントアウトされています。
これを参考に独自のコードスニペットを登録していきます。
コードは一番下の閉じ括弧の中(すぐ上)に追記します（コメントアウトは消してもOK）。
スニペットの作り方
{
"スニペット名": {
"prefix": "入力するキー",
"body": [
"展開するコード",
"展開するコード",
"展開するコード"
],
"description": "スニペットの説明"
}
}| スニペット名 | 自分でわかるように書けばOK |
| prefix | 入力するキー（短縮語） |
| body | prefixを入力したら展開するコード |
| description | 自分でわかるように書けばOK（省略可） |
基本的には「スニペット名」「入力するキー（短縮語）」「展開するコード」の３つの構成で登録していきます。
descriptionはなくてもOKです。
次にサンプルコードを見てみましょう。
"markup01": {
"prefix": "sec",
"body": [
"<section id=\"$1\">",
"\t<div class=\"$2\">",
"\t\t$3",
"\t</div>",
"</section>"
]
}上記のコードをhtml.jsonファイルに登録します。
するとHTMLファイルで「sec」と打ち込むとスニペット名「markup01」が呼び出せます。
これをそのままEnterを押すと・・・
このようになります。
「$1」は入力するためにフォーカスされる箇所
VSCodeのスニペットは入力できる箇所を指定できます。
入力箇所ですよと示す記号が「$1」の数字の箇所です。
上記の例だと「$1」「$2」「$3」がそれにあたります。
連番で数字を増やしていくことで、「$2」「$3」とtabキーを押してフォーカスを移動できます。
実際に見てみましょう。
フォーカスの位置はtabキーを押して移動させています。
タブの挿入
「\t」はタブの挿入を表しています。
入れ子になっている場合タブで整形しておいた方が、スニペットを挿入したときに見やすいです。
スニペットを登録するときの注意点
複数登録する場合は、スニペットとスニペットの間にカンマを忘れないようにしましょう。
{
"markup01": {
},
"markup02": {
}
}
あると便利なスニペット一覧
ここではあると便利なスニペットをご紹介します。
CSS (SCSS)
position: absolute
position: absoluteでそれぞれ上下左右中央寄せ・上下中央寄せ・左右中央寄せを呼び出すスニペット。
特に上下左右中央寄せと上下中央寄せは高頻度で使うわりに記述量が多いので、スニペットに登録しておいた方が便利です。
"Absolute Center": {
"prefix": "aba",
"body": [
"position: absolute;",
"top: 50%;",
"left: 50%;",
"transform: translate(-50%, -50%);"
]
},
"Absolute Vertical Center y": {
"prefix": "aby",
"body": [
"position: absolute;",
"top: 50%;",
"left: $1;",
"transform: translateY(-50%);"
]
},
"Absolute Vertical Center x": {
"prefix": "abx",
"body": [
"position: absolute;",
"top: $1;",
"left: 50%;",
"transform: translateX(-50%);"
]
},
background
背景指定のスニペット。
よく使うオプションをショートハンドでまとめて指定しています。
"BackgroundUrl": {
"prefix": "bgu",
"body": [
"background: url($1) no-repeat center center / cover;"
]
},
before,after
contentは必須＆慣れないうちは忘れやすいのでスニペットで。
"before": {
"prefix": "before",
"body": [
"&::before{",
" content: '';",
" display: $1;",
"}"
]
},
"after": {
"prefix": "after",
"body": [
"&::after{",
" content: '';",
" display: $1;",
"}"
]
},
コメントアウト
コピペするよりスニペットの方が断然早いです。
"comment1": {
"prefix": "/cm1",
"body": [
"/*================================================================",
"# $1",
"================================================================ */"
]
},
"comment2": {
"prefix": "/cm2",
"body": [
"/* $1",
"------------------------------------------------------ */"
]
},
HTML(PHP)
php記述の囲いを呼び出すスニペット。
マークアップでもフォームやWordPress.phpファイルを扱うことがあるのであると割と重宝します。
"PHP": {
"prefix": "php",
"body": [
"<?php $1 ?>"
]
},
まとめ：VSCodeに独自のコードスニペットを登録しよう！
コーディングは単純作業の繰り返しです。
「これ何度も同じ入力を繰り返してるなあ」ってコードがあるなら、どんどんスニペット登録しましょう。
小さな無駄を潰していくことがコーディングを早める第一歩ですね。
投稿者 トシ
コメントを残す