VSCodeを爆速にする辞書登録とは

WEBサイトを制作していると、毎回同じコードを何度も入力することが多いですよね。
特にHTMLやPHPなどを扱う際は、わずかな記述の繰り返しが積み重なって作業効率を下げてしまうこともあります。

そんな時に便利なのが、Visual Studio Code（VSCode）の「スニペット」機能です。
そもそも初心者の僕にはスニペットとは何！？という気持ちが大きかったですが、
あらかじめ辞書のように登録しておくことで、短いキーワードを入力するだけで、定型文を自動展開できるようになります。

今回の例：「<?php ?>」をワンタッチで入力

自分の場合、HTML内にPHP構文を埋め込むことが多く、毎回 <?php ?> と入力するのが本当に面倒でした。
そこで「<?」と入力しただけで、自動的に <?php ?> が展開されるように設定してみました。

設定手順

設定方法はとても簡単です。以下の手順で行えます。

• Windowsの場合：「ファイル」 → 「ユーザ設定」 → 「スニペットの構成」
• Macの場合：「Code」 → 「基本設定」 → 「User Snippets」

その後、「html.json」というファイル名でスニペットファイルを作成し、
そこに自分が登録したいコード

/*
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
// "Print to console": {
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }

// "",
// 	],
// 	"description": ""
// },

}

*/

を記述すれば完成です！

スニペットを使うメリット

VSCodeは非常に多機能ですが、スニペットを使いこなすことで作業スピードが格段に上がります。
同じコードを書く手間を省けるだけでなく、タイプミスの防止にもつながります。

ショートカットも併用して効率アップ

また、VSCodeのショートカットキーを併用すると、さらに作業効率が向上します。
同じ作業を繰り返していても、ショートカットを知っているかどうかで作業時間に大きな差が出ます。

今後は、自分がよく使う便利なショートカットについても、別の記事で紹介していきたいと思います。
日々のコーディングを少しでも快適に、そして「爆速」にしていきましょう！