Post

VSCodeのSnippetで日時を自動挿入する方法

Posted
By hachian 9 min read

この記事では、VSCodeのsnippetについて例を用いて説明します。この記事を読めば、Jekyll Chirpy themeで用いるsnippet作成を通して、以下について理解できると思います。

  • VSCodeのsnippet作成方法
  • グローバルなsnippetとローカルなsnippetの違い
  • snippetのプレイスホルダー記載方法
  • snippetで現在の日時を入力する方法

VSCodeでsnippetを作成

VSCodeを開き、F1もしくはCtrl+Shift+Pを押下し、すべてのコマンドからユーザースニペットの構成を探します。【ワークスペース名】の新しい スニペット ファイル…を選択します。ワークスペース直下に.vscode/snippets.code-snippetsというファイルが生成されます。

Alt text

グローバルスニペットとワークスペースのスニペット

グローバルスニペットを作成するとあらゆるワークスペースでスニペットが使用できるようになります。初期設定では以下のようなファイルが作成されます。

C:\Users\【ユーザ名】\AppData\Roaming\Code\User\snippets\【名前】.code-snippets

それに対してワークスペースのスニペットはそのワークスペースでしか使用できません。今回はJekyll Chirpy Blogでのみ用いるスニペットを作成するため、ワークスペースのスニペットを作成しました。

snippetの基本

スニペットを用いると、よく使う定型文を簡単に挿入することができます。スニペットに登録した文字列(接頭辞;prefix)を入力し、Ctrl+Spaceでオートコンプリートすることで使用できます。

スニペットは名前、接頭辞(prefix)、本体(body)、説明(description)からなります。スニペットを記述するファイルにjson形式で記述します。以下に、callout-tipという名前のスニペットの例を示します。

1
2
3
4
5
6
7
8

"callout-tip": {
    "prefix": ["callout-tip", "tip"],
    "body": [
        "> ${1:prompt content text}",
        "{: .prompt-tip }"
    ],
    "description": "tip block"
}

上記のスニペットは接頭辞が二つ登録されており、callout-tipと入力した場合でも、tipと入力した場合でも呼び出すことができます。

body部分にある文字列がスニペットを使うと入力されます。$1や、${1:placeholder}となっている部分はスニペット入力時に入力できます。Tabを入力すると$1、$2、$3の順でカーソルが移動します。

description部分にはスニペットの説明を記述します。下の画像はスニペットを使用した時のスクリーンショットです。tip blockと書いてあるところがdescriptionに当たります。

Alt text

本記事では、プレイスホルダーの記載方法と自動で日時を入力する方法について詳細に説明します。その他、詳細については公式のドキュメントをご参照ください。

snippetのプレイスホルダー記載方法

Jekyll Chirpy themeのpromptsを入力するスニペットを通して、プレイスホルダーの記載方法を説明します。

Jekyll Chirpy themeにはpromptsという独自のマークダウン書式があります。ほかのサービスやライブラリではcalloutやadmonitionと呼ばれることもあります。

以下にpromptsの例を示します。

1
2

> これは`info`のテストです。
{: .prompt-info }

これはinfoのテストです。

promptsは独自の書式なので、VSCode標準のマークダウンプレビューでは表示が崩れます。(ちなみにこれはwarningです。)

「これはinfoのテストです。」という部分は毎回入力する部分で、ほかの部分は定型文です。

promptsを挿入するスニペットは以下のようになります。

1
2
3
4
5
6
7
8

"callout-tip": {
    "prefix": ["callout-tip", "tip"],
    "body": [
        "> ${1:prompt content text}",
        "{: .prompt-tip }"
    ],
    "description": "tip block"
}

tipもしくはcallout-tipを接頭辞として、promptsを入力することができます。${1:prompt content text}と書いてある部分は毎回入力する部分です。このprompt content textという部分がプレイスホルダーです。後から入力で上書きするものですが、仮のテキストとしてプレイスホルダーが入力されます。

何を入力するのかなど、使うときに用途がわかるものが書かれていると使いやすいと思います。

snippetで現在の日時を入力する方法

Jekyll Chirpy themeのfront matterを入力するスニペットの作成を通して、スニペットで現在の日時を入力する方法を説明します。

front matterとは以下のような書式で、ブログ本文のマークダウンファイルの先頭に記載することで、ブログ記事のメタ情報を示すことができます。

1
2
3
4
5
6
7
8

---
title: title
date: 2023-09-15 00:31:51
categories: [tech/game/item/book, some-category]
tags: [tags1, tags2]
math: false
author: hachian
---

title, categories, tagsの部分は毎回入力する部分です。dateの部分には、YYYY-MM-DD hh:mm:ssの書式で現在日時を入力します。毎回現在日時を手入力するのはしんどいので、スニペットで自動挿入します。スニペットの例は以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

"front-matter": {
    "prefix": ["front-matter"],
    "body": [
        "---",
        "title: ${1:title}",
        "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
        "categories: [${2|tech,game,life,book|}]",
        "tags: [${4:tags1}, ${5:tags2}]",
        "math: false",
        "author: hachian"
        "---",
    ],
    "description": "front matter for jekyll chirpy theme"
},

スニペットの変数機能を使って現在の日時を自動挿入しています。

使用している変数は以下の通りです。

  • $CURRENT_YEAR: 年
  • $CURRENT_MONTH: 月
  • $CURRENT_DATE: 日
  • $CURRENT_HOUR: 時
  • $CURRENT_MINUTE: 分
  • $CURRENT_SECOND: 秒

公式ドキュメントにはほかの変数も示されています。ファイル名やクリップボードの中身なども利用できるので、スニペットを活用してコーディングや執筆の効率を高めていきましょう。

tech
vscode snippet 効率化
This post is licensed under CC BY 4.0 by the author.