VSCodeで定型文を保存して効率化！スニペット機能の使い方を徹底解説

プログラミングやブログ執筆などで、毎回同じような文章やコードを書いていませんか？
Visual Studio Code（以下、VSCode）には「スニペット」という便利な機能があり、定型文を保存しておくことで、数文字の入力で簡単に呼び出せます。
この記事では、VSCodeで定型文（スニペット）を保存する方法、設定手順、活用のコツ、そして具体的な活用例までを、初心者にもわかりやすく解説します。

VSCodeで定型文を保存する方法とは？

VSCodeで定型文を保存する方法は「ユーザースニペット（User Snippet）」という機能を使います。
スニペットとは、あらかじめ登録しておいたテンプレートコードや文章を、特定のキーワードで自動挿入できる機能です。

例えば、ブログ執筆で毎回使うHTMLテンプレートや、コメントアウトのフォーマット、プログラミングで使う関数定義などをスニペット化しておくことで、数秒で入力できます。

スニペットを活用することで、以下のようなメリットがあります。

定型作業の入力時間を大幅に短縮できる
コードの書き間違いを減らせる
チーム内で統一されたフォーマットを使える

スニペットの作成手順

それでは、VSCodeでスニペットを作成する具体的な手順を見ていきましょう。

① コマンドパレットを開く

Ctrl + Shift + P（Macの場合はCmd + Shift + P）を押して、コマンドパレットを開きます。

② 「スニペット」を検索

検索バーに「スニペット」と入力し、
「ユーザースニペットの構成（Configure User Snippets）」を選択します。

③ スニペットの保存先を選ぶ

VSCodeではスニペットを以下の2つの方法で保存できます。

全体スニペット（Global Snippet）：すべてのファイルで使える
言語別スニペット（Language Specific Snippet）：特定の言語（例：HTML、Python）でのみ使える

今回は例として、html.json にスニペットを登録してみましょう。

④ スニペットの構文を理解する

スニペットはJSON形式で記述します。基本構文は以下の通りです。

{
  "スニペット名": {
    "prefix": "呼び出し名",
    "body": [
      "ここに定型文を書きます",
      "改行したい場合はカンマで区切ります"
    ],
    "description": "説明（省略可）"
  }
}

定型文（スニペット）の具体例

例①：HTMLのテンプレート

{
  "HTMLテンプレート": {
    "prefix": "htmlbase",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"ja\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <title>${1:タイトル}</title>",
      "</head>",
      "<body>",
      "  ${2:コンテンツ}",
      "</body>",
      "</html>"
    ],
    "description": "基本的なHTMLテンプレート"
  }
}

「htmlbase」と入力して Tab を押すと、上記のHTML構文が一瞬で挿入されます。
${1:タイトル} のように数字付きの変数を使うことで、Tabキーで入力位置を移動できるのも便利です。

例②：ブログ記事テンプレート

ブログ執筆やMarkdownファイルでもスニペットは有効です。

{
  "ブログ記事テンプレート": {
    "prefix": "blogstart",
    "body": [
      "# ${1:タイトル}",
      "",
      "## リード文",
      "${2:ここにリード文を入力}",
      "",
      "## 本文",
      "${3:内容を書いてください}",
      "",
      "## まとめ",
      "${4:まとめの内容を記載}"
    ],
    "description": "ブログ記事用テンプレート"
  }
}

このスニペットを使えば、Markdownでのブログ構成を瞬時に作成できます。
タイトルやリード文をTabで移動しながら入力できるため、記事執筆の効率が格段に上がります。