VS Codeのスニペット登録が便利すぎる！よく使うコードを瞬時に呼び出す方法｜ブログ

はじめに コーディングをしていて、「また同じコードを書いているな…」と思ったことはありませんか？ 毎回同じコードをコピー＆ペーストしたり、手入力したりするのは時間がもったいないですよね。 そんなときに大活躍するのが、VS Code（Visual Studio Code）の「ユーザースニペット」機能です。 これを使えば、短いキーワードを入力するだけで、数行〜数十行のコードを一瞬で展開できるようになります。 今回は、VS Codeでスニペットを登録する方法から、実際に活用するステップまでを分かりやすく解説します！ スニペット登録の基本手順 VS Codeでのスニペット登録は、JSON形式のファイルに設定を書き込むだけで完了します。 1. スニペット設定画面を開く VS Codeを開き、左下の歯車アイコン（設定）をクリックします。 メニューから「スニペット」を選択します。 コマンドパレットが表示されるので、スニペットを適用したい言語（例：html、javascript、css など）を選択するか、プロジェクト全体で使う場合は 新しいグローバルスニペットファイル を選択します。 2. JSONファイルに登録する 今回は例として、JavaScript用のスニペット（javascript.json）を開いたと仮定して、以下のように記述してみましょう。 { "Console Log": { "prefix": "clg", "body": [ "console.log($1);" ], "description": "Log output to console" } } 構文のポイント | 項目 | 役割 | | --- | --- | | スニペット名 | "Console Log" の部分。何のスニペットか分かる名前をつけます。 | | prefix | スニペットを呼び出すためのショートカットキー（トリガー）です。 | | body | 実際に展開されるコードの中身です。複数行にする場合はカンマ , で区切ります。 | | $1 | コードが展開された後、カーソルが最初に自動ジャンプする位置です（$2、$3と増やすことも可能）。 | | description | 予測補完のポップアップが表示された時に出る、スニペットの説明文です。 | 実際に使ってみる 登録ができたら、さっそくJavaScriptのファイル（.js）を開いて試してみましょう！ 1. キーワードを入力する ファイル上で、先ほど prefix に設定した clg を入力します。 clg 2. 予測補完から展開する clg と打つと、VS Codeの補完候補（ポップアップ）に先ほど登録した「Console Log」が表示されます。 そのまま Tab キー または Enter キー を押すと…… console.log(); 一瞬で上記のように展開されます！ さらに、カーソルは自動的に () の中（$1 を指定した位置）に配置されているため、そのままスムーズに変数を入力できます。 他にもいろいろ使える！活用例 スニペットは、複数行の複雑なコードや、HTMLの雛形など、様々な場面で威力を発揮します。 HTMLの基本テンプレート（複数行の例） HTMLファイル用（html.json）に以下を登録しておけば、一瞬でコーディングの準備が整います。 "HTML5 Template": { "prefix": "html5", "body": [ " ", " ", " ", " ", " ${1:Document} ", " ", " ", " $0", " ", " " ], "description": "HTML5の基本テンプレート" } 💡プチ技：${1:Document} と書くと、展開時に初期値として Document が選択された状態になり、すぐに書き換えられます。$0 は最終的にカーソルが着地する場所です。 まとめ スニペットを使いこなせるようになると、日々のコーディングスピードが劇的にアップします。 「これ、よく書くな…」と思うコードがあれば、ぜひ自分だけの秘伝のスニペットとして登録してみてください！