VSCodeでスニペットを活用する

VSCodeでmarkdownでドキュメントを書いているときにfrontmatter(meta)の情報を０から手打ちするのが面倒。 具体的には以下のようなヘッダ情報。

---
date: 2024-08-12
title: VSCodeでスニペットを活用する
slug: vscode-snippet
categories:
  - vscode
draft: true
---
<!-- more -->

これをVSCodeのスニペットにテンプレート化してドキュメント作成を効率化する。

Snippet登録手順

実際にSnippetを使いたいファイルを開いた状態で登録するのがよい。 今回であればmarkdownなので、*.mdファイルを開いた状態。

1. コマンドパレットを開き、"Snippets: Configure Snippets"を選ぶ。
2. スニペットファイルとして、"markdown.json(Markdown)"を選ぶ。

すると、"markdown.json"が開くので、frontmatter(meta)の情報を書く。 "prefix"が利用するときのラベル。 ${1:title}は可変のテキストでタブで遷移して入力していける。

{
    // Place your snippets for markdown 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:
    "Meta of markdown": {
        "prefix": "meta",
        "body": [
            "---",
            "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
            "title: ${1:title}",
            "slug: ${2:slug}",
            "categories:",
            "  - ${3:category}",
            "draft: true",
            "---",
            "<!-- more -->",
            ""
        ],
        "description": "Meta of markdown"
    }
}

Snippet利用手順

1. コマンドパレットを開き、"Snippets: Insert Snippet"を選ぶ。
2. スニペットファイルとして、作成したスニペット"meta"を選ぶ。

あとは、タブ遷移しつつ可変のフィールを入力していく。

以上。