VSCodeのSnippet機能を使ってブログテンプレートを作成してみる

2022-09-21

イントロダクション

スプラトゥーン3が発売してポチポチやってます。課長の息子はヒーローモード全クリしたとかそんな話をしてました。ワイはまだ序盤です。 のんびりやっていきましょう。

一日数百円ぐらい稼いでいたのですが、ブログ移行したらアクセス数激落ちしまして0円が続いてます。 コンテンツ更新を頻繁にするぞと息巻いてます。ちょっとここらでブログの更新頻度を上げてワイの不労所得の礎を築いて行きたいわけです。

VSCodeのSnippet機能を登録する

Snippet機能を使って色々便利にしましょう。

Snippets in Visual Studio Code

VSCodeの拡張機能入れてる人は、コード書くとよく予測変換で出てくれると思うのですが、イメージはあれに近いです。

設定方法

VSCodeのメニューバーから設定擦る方法としてはUser Snippetsから開きます。 File -> Preferences -> User Snippets

開くとどの拡張子のファイルを開いているときに動作しますかと聞かれるので自分に合ったものを選びます。

ブログ用のテンプレートを作ってみる

このブログを書く際にある程度テンプレート化しておきたいので雛形を設定しておきます。

内容については公式の説明を翻訳しておきます。

prefix は、IntelliSense でスニペットを表示するための 1 つまたは複数のトリガー ワードを定義します。サブストリングマッチングはプレフィックスに対して行われるので、この場合、"fc" は "for-const" にマッチする可能性があります。

bodyは1行または複数行の内容で、挿入時に複数行として結合されます。改行と埋め込みタブは、スニペットが挿入されるコンテキストに従ってフォーマットされます。

descriptionは、IntelliSenseで表示されるスニペットのオプションの説明です。

変数

日付など変数として事前定義されているので、Snippetsを貼り付けたら値取得できるような仕組みがあります。 定義されている変数一覧も残しておきます。

公式にあるものを機械翻訳した表となります。

使用可能な変数は以下の通りである。

一般的な変数
変数名 内容
TM_SELECTED_TEXT 現在選択されているテキスト、または空文字列。
TM_CURRENT_LINE 現在の行の内容。
TM_CURRENT_WORD カーソル下の単語の内容、または空文字列。
TM_LINE_INDEX ゼロインデックスベースの行番号。
TM_LINE_NUMBER 1
TM_FILENAME 現在のドキュメントのファイル名。
TM_FILENAME_BASE 現在のドキュメントのファイル名(拡張子を除く)
TM_DIRECTORY 現在のドキュメントのディレクトリ
TM_FILEPATH 現在のドキュメントのフルファイルパス。
RELATIVE_FILEPATH 現在のドキュメントの相対ファイルパス(開いているワークスペースまたはフォルダーに対して)。
CLIPBOARD クリップボードの内容
WORKSPACE_NAME 開いているワークスペースまたはフォルダの名前
WORKSPACE_FOLDER 開いているワークスペースまたはフォルダのパス
CURSOR_INDEX ゼロインデックスベースのカーソル番号
CURSOR_NUMBER 1インデックスベースのカーソル番号。
日時関係の変数
変数名 内容
CURRENT_YEAR 現在の年。
CURRENT_YEAR_SHORT 現在の年の下二桁。
CURRENT_MONTH 2桁の月(例:‘02’)
CURRENT_MONTH_NAME 月の完全な名前(例'7月')
CURRENT_MONTH_NAME_SHORT 月の短い名前(例’Jul’)。
CURRENT_DATE 2桁の月日(例
CURRENT_DAY_NAME 曜日名(例
CURRENT_DAY_NAME_SHORT 曜日の短い名前
CURRENT_HOUR 24
CURRENT_MINUTE 2桁の現在の分。
CURRENT_SECOND 2桁の現在の秒。
CURRENT_SECONDS_UNIX Unixエポックからの秒数。
ランダムな値の挿入のため
変数名 内容
RANDOM 6個のランダムなBase-10桁
RANDOM_HEX 6つのランダムなBase-16桁
UUID バージョン4のUUID
行やブロックのコメント
変数名 内容
BLOCK_COMMENT_START 出力例: PHP /* あるいは HTML <!
BLOCK_COMMENT_END 出力例: PHP の場合 */ あるいは HTML の場合 –>。
LINE_COMMENT 出力例: PHP の場合 //.

実際に書いたもの

以上を踏まえて、ブログのテンプレートを作成してみました。

 "ブログテンプレート": {
  "prefix": ["template", "template-blog", "テンプレ"],
  "body": ["---\ntitle: \"$TM_FILENAME_BASE\"\ndate: \"$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE\"\ncategories\n - コンピュータ\ncoverImage: \".webp\"\ndescription: \"気の利いた説明\"\ntags:\n - \n---\n\n ## イントロダクション \n\n## 手法 \n\n## 結果 \n\n## まとめ\n"],
  "description": "ブログテンプレート"
  }

結果

上を展開すると実際にはこんなふうになります。 Prefixの文字を途中まで打ち込んで、Ctrl+Spaceで展開できます。

実際にはこんな感じで出力されます。 ファイル名からタイトルを作って、今日の日付を入れてます。

---
title: "VSCodeのSnippet機能を使ってブログテンプレートを作成してみる"
date: "2022-09-21"
categories
 - コンピュータ
coverImage: ".webp"
description: "気の利いた説明"
tags:
 - 
---

 ## イントロダクション 

## 手法 

## 結果 

## まとめ

まとめ

小さいことだけど結構便利です。 競技プログラミングとかだと、よく使うアルゴリズムとか入出力関係のものを事前に登録しておくとかそんな使い方もあるようです。

あとは、シーケンス機能とかについて残しておけば画像はWebpに変換してMarkdownsを書き換えるとか そのままGithub Actionに投げるてブログを更新することができるのでコンテンツを量産できますね。