毎回同じコードを打ちたくない〜！
そんな時はコードスニペットを登録するよいいよ！
もりのくま
VSCodeにはスニペットという、『コードの登録機能』があります。
今回はその設定方法についてご紹介します。
スニペットの登録の手順
はじめにスニペットを登録するため、登録したい言語のjsonファイルを開きます
※今回はhtmlにスニペットを登録します。他にもcss,scss,javascript,phpのjsonファイルなどあります。
『Code』→『基本設定』→『ユーザースニペット』
※windowsの場合は『ファイル』→『ユーザー設定』→『ユーザースニペット』
次に検索欄の所でhtmlを入力して『html.json』を選択
ではここからスニペットを登録していきます。
以下は例となります。
| name | スニペット名 |
| prefix | ショートカットキー |
| body | 出力コード |
"name": {
"prefix": "ショートカットキー",
"body": [
"出力コード",
],
},"section": {
"prefix": "sec",
"body": [
"<section class=\"$1\">",
"\t<div class=\"inner\">",
"\t\t<h1 class=\"title\">$2</h1>",
"\t\t<div class=\"content\">",
"\t\t</div>",
"\t</div>",
"</section><!-- section -->",
],
},上記を記述すると『sec』で登録したコードを出力できます。
特殊記号の說明
『\t』 でタブを挿入
『\t』 でタブ（空白）を挿入します。こちらはコードを整形するときによく使います。
ポイント
バックスラッシュの入力は以下の通りです
・macの場合 『alt』 + 『¥』
・windowsの場合 半角モードで『_\ろ』
・macの場合 『alt』 + 『¥』
・windowsの場合 半角モードで『_\ろ』
『$1』でカーソル移動
$1を指定するとカーソルが任意の場所から始めれます。
また$2を挿入すると、$1の入力後→tabキーで$2に移動します。
ダブルクオーテーションの前にはバックスラッシュを
""がある場合にはバックスラッシュを入れないと『""』の部分が表示されません。
そのため以下のように、一つ前に『 \ 』を記述してエスケープしてあげましょう。
※また『$』の場合は『\\$』のように2つバックスラッシュを入力しないと表示されません。
よく使うスニペット集
自分がよく使うスニペット集をまとめてみましたので、参考にいただければと思います。
CSS：background 背景画像の指定
"背景画像の指定": {
"prefix": "bg",
"body": [
"background: url($1) no-repeat center center/cover;"
],
},CSS：疑似要素の中央指定
"疑似要素の中央指定": {
"prefix": "pa5",
"body": [
"position: absolute;",
"content: \"\";",
"top: 50%;",
"left: 50%;",
"transform: translate(-50%,-50%);"
],
},CSS：コメントアウト(大)
"コメント大": {
"prefix": "@@",
"body": [
"//==============================================================",
"// $1",
"//==============================================================",
""
],
},javascript：console.log
"コンソールログ": {
"prefix": "con",
"body": ["console.log('コンソールログ');"],
}javascript：alert
"アラート": {
"prefix": "ale",
"body": [" alert('アラート');"],
},まとめ
以上となります。
スニペットを使えばタイプミスの防止や時間短縮といったメリットがあります。
どんどん活用してコーディングを効率化しましょう。
【VSCode】Emmetを使って爆速 についてはこちら
【VSCode】マルチカーソルと選択で爆速 についてはこちら