VSCodeでブログを書くときに使うスニペット

VSCodeで書くときに書きやすくするためにスニペットやタスクを作成したのでその備忘録。

タスク

新規ファイルをプロンプトで入力して、その新規ファイルを作成するタスク。 できあがったら、そのファイルを開くようにしている。 --reuse-windowオプションをつけることで、既存のウィンドウで開くようにしているところがミソ。

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "New Blog Post",
            "type": "shell",
            "command": "touch ./docs/blog/posts/${input:askFileName}.md && code ./docs/blog/posts/${input:askFileName}.md --reuse-window",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "reveal": "always",
                "panel": "shared",
                "focus": true
            },
            "problemMatcher": []
        },
    ],
    "inputs": [
        {
            "id": "askFileName",
            "description": "Input new filename:",
            "default": "dummy",
            "type": "promptString"
        }
    ]
}

スニペット

ブログ用のテンプレートを作成した。 スニペットにすることで、動的な値や入力時にいい感じにカーソルが当たるようになる。

$CURRENT_YEARのようにあらかじめ定義された変数が使えるので、それを使って日付を入力するようにしている。

変数の一覧は https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables を参照。

"blog-template": {
    "scope": "markdown",
    "prefix": "blog-template",
    "body": [
        "---",
        "draft: true",
        "date:",
        "  created: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
        "  # updated: ",
        "categories:",
        "#   - Diary",
        "#   - Tech",
        "#   - Others",
        "tags:",
        "  - $2",
        "---",
        "# $1",
        "$3",
        "<!-- more -->",
        "",
        "",
    ],
    "description": ""
},

あらかじめテンプレートファイルを作成して https://migi.me/vsc_snippet/ でペーストすると割と簡単にスニペットが作成できる。 ただ、変数は\\でエスケープされてしまうので、そこは手で取り除く必要がある。