Horiuchi.page

vscodeでastroのfrontmatterを自動入力するには、スニペットを使えば良い

公開日:
雑記
目次

スニペットを使おう

このサイトは、astroを使って作っており、かつ、文章は、vscodeで書いている。面倒くさいのは、frontmatterの作成である。 frontmatterの項目がなんだったか、ちゃんと覚えきれていないし、タイポするのもあれなので、過去のページからコピペして作成していた。

これでは、あまりに芸がないので、自動化したいなと考えた結果、vscodeのスニペットを使うことにした。

スニペットの作成

  1. ctrl+pを押して、「スニペットの構成」を選択する。見つからない場合には、「snippet」とか売ってやれば、見つかる。
  2. 「新しいグローバルスニペット」を選択する
  3. 開いたファイルに、適当にJSONで記載していく。

私の場合、astro用のプロファイルを設定しているので、グローバルスニペットとして設定している。プロジェクト単位でスニペットを作成することも可能なようなだ。

スニペットの例

このブログの場合、frontmatterは、次のようになっている。

title: タイトルが入る
description: 説明が入る
pubDate: 公開日が入る
updatedDate: 更新日が入る
category: カテゴリが入る。デフォルトは雑記
tags: [雑記, メモ]

これをスニペットにすると、次のようになる。

{
  "Astro Blog Frontmatter": {
    "scope": "markdown,mdx",
    "prefix": "post",
    "description": "Insert Astro blog frontmatter for Markdown and MDX",
    "body": [
      "---",
      "title: ${1:記事タイトル}",
      "description: ${2:説明}",
      "pubDate: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}${CURRENT_TIMEZONE_OFFSET}",
      "updatedDate: ",
      "category: ${3:雑記}",
      "tags: []",
      "---",
      "",
      "$0"
    ]
  }
}

これで、frontmatterを自動生成できる。生産性が1ミリくらい向上した気がしないでもない。