1. スニペットの登録方法

1. メニューから 「ファイル → ユーザー設定 → ユーザースニペット」 を選択
2. 言語ごとのスニペットファイルを選択（例：HTMLなら “html.json”）
3. JSON形式でスニペットを追加

   "見出し1": {  "prefix": "h1",  "body": ["
   <h1>$1</h1>"], "description": "見出し1タグ"}

設定ファイルは一言語一種類が基本

2. スニペットの呼び出し方

1. HTMLファイルで “prefix” を入力（例：”h1″）
2. Tabキー を押すと “<h1>$1</h1>” に展開される
3. “$1” の位置にカーソルが自動で移動して文字を入力可能

小ワザ：ブロックによる囲い込み

複数行のコードやテキストを囲むブロックも “$TM_SELECTED_TEXT” を使ってスニペット化可能

$TM_SELECTED_TEXTは単語登録必須

html.jsonの参照方法

• 標準では 単一ファイル 形式
• コマンドパレットで 「Configure User Snippets → HTML」 から開くのが簡単
• 保存場所（OS例）

  ・Windows: "%APPDATA%\Code\User\snippets\html.json"
  ・Mac: "~/Library/Application Support/Code/User/snippets/html.json"
  ・Linux: "~/.config/Code/User/snippets/html.json"

jsonはデータフォーマットの一種

ショートカットキーで呼び出す

• 個別スニペットにショートカットを割り当てる必要はなし
• prefix + Tab で十分効率的
• 必要に応じて「Insert Snippet」コマンドにショートカットを割り当てることも可能

VScodeはサジェストが充実

Dreamweaverスニペットとの互換性

• Dreamweaverのスニペットは “.csn” 形式で保存される
• “.csn” はバイナリ形式であり、直接中身を開いたりJSONに変換する公式手段は存在しない
• VS Codeで使用するには、Dreamweaver内で表示されるスニペットの内容を手作業で読み取り、JSON形式に書き直す必要がある
• 公式の自動変換やエクスポート機能は存在しないため注意が必要

Dreamweaverスニペットは独自仕様

6. SCSSとの比較

• SCSSでは リスト・マップ・関数 で複雑な操作が可能
• CSSでも “calc()” や “var()” で似た計算はできるが、条件分岐や自作関数は不可
• スニペットの配列（”body” の “[]”）は、概念的にはSCSSのリストに近い

SCSSは開発コストが増える

VScodeまとめ

• スニペットは prefix + Tab で呼び出すのが基本
• “html.json” は単一ファイルなので、コマンドパレット経由で開くと便利
• スニペットのキーは内部識別用でエディタ上に表示されず、”prefix” と “description” が実際に表示される
• Dreamweaverの “.csn” ファイルは直接VS Codeで利用できず、手作業で内容を再定義する必要がある
• 個別記事形式で管理すると初心者でも分かりやすく、更新もしやすい

VS Codeのスニペットをうまく活用することで、コーディング効率が大幅に向上します。

Dreamweaver超えのマークアップツール