TechStack

スニペットとは

スニペット = よく使うコードを登録しておく機能

例：flex-c と入力 → Tabキー → Flexboxの中央揃えコードが一括挿入

スニペットの登録手順

1. スニペット設定を開く

方法1：メニューから

基本設定（左下の歯車アイコン） → スニペット → 対象の言語（html, css, javascriptなど）を選択

2. スニペットを記述

選択した言語の**.json**ファイルが開くので、以下の形式で記述します。

{
  "スニペット名": {
    "prefix": "入力するキーワード",
    "body": [
      "出力するコード1行目",
      "出力するコード2行目"
    ],
    "description": "スニペットの説明"
  }
}

実用的なスニペット例

CSS

{
  "flex-center": {
    "prefix": "flex-c",
    "body": [
      "display: flex;",
      "justify-content: center;",
      "align-items: center;"
    ],
    "description": "Flexbox中央揃え"
  }
}{
  "flex-center": {
    "prefix": "flex-c",
    "body": [
      "display: flex;",
      "justify-content: center;",
      "align-items: center;"
    ],
    "description": "Flexbox中央揃え"
  }
}

HTML

{
  "html-template": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"ja\">",
      "<head>",
      "\t<meta charset=\"UTF-8\">",
      "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "\t<title>${1:Document}</title>",
      "</head>",
      "<body>",
      "\t${2:<!-- Content -->}",
      "</body>",
      "</html>"
    ],
    "description": "HTML5基本テンプレート"
  }
}

JavaScript

{
  "console-log": {
    "prefix": "cl",
    "body": [
      "console.log('${1:message}');"
    ],
    "description": "console.log"
  },
  
  "arrow-function": {
    "prefix": "arrow",
    "body": [
      "const ${1:functionName} = (${2:params}) => {",
      "\t${3:// code}",
      "};"
    ],
    "description": "アロー関数"
  }
}

プレースホルダー機能

基本的な使い方

${1:デフォルト値} : 最初の入力位置
${2:デフォルト値} : 次の入力位置
${3} : さらに次の位置

使用例

{
  "css-animation": {
    "prefix": "anime",
    "body": [
      "animation: ${1:animationName} ${2:1s} ${3:ease} ${4:infinite};",
      "",
      "@keyframes ${1:animationName} {",
      "\t0% { ${5:/* 開始状態 */} }",
      "\t100% { ${6:/* 終了状態 */} }",
      "}"
    ],
    "description": "CSSアニメーション"
  }
}

スニペット挿入後、Tabキーで**${1}** → ${2} → ${3}...の順に移動できます。

選択可能なオプション

${1|option1,option2,option3|} の形式で、選択肢を提供できます。

{
  "html-input": {
    "prefix": "input",
    "body": [
      "<input type=\"${1|text,email,password,number,tel,url|}\" name=\"${2:inputName}\" id=\"${3:inputId}\" ${0}>",
    ],
    "description": "HTML input要素"
  }
}

記述時の注意点

ダブルクォート問題

JSON内でダブルクォートを使いたい場合は、エスケープするかシングルクォートを使用！

// ❌ エラー
"body": ["content: "";"]

// ⭕ 正しい方法1（エスケープ）
"body": ["content: \"\";"]

// ⭕ 正しい方法2（シングルクォート）
"body": ["content: '';"]

複数スニペットの記述

{
  "snippet1": {
    // 設定
  },  // ← カンマ必要
  
  "snippet2": {
    // 設定
  },  // ← カンマ必要
  
  "snippet3": {
    // 設定
  }   // ← 最後はカンマ不要
}

使い方のコツ

短いprefixを使う: flex-c, cl, mqなど
よく使うものから作る: 使用頻度の高いコードを優先
定期的に見直し: 不要なものは削除

まとめ

自作スニペットを活用することで、コーディング速度を飛躍的に向上させることができます。まずは普段よく書くコードから始めて、徐々にスニペット集を充実させていきましょう。

VS Code自作スニペット登録方法