VSCodeのSnippet機能を使ってブログテンプレートを作成してみる
イントロダクション
スプラトゥーン３が発売してポチポチやってます。課長の息子はヒーローモード全クリしたとかそんな話をしてました。ワイはまだ序盤です。 のんびりやっていきましょう。
一日数百円ぐらい稼いでいたのですが、ブログ移行したらアクセス数激落ちしまして０円が続いてます。 コンテンツ更新を頻繁にするぞと息巻いてます。ちょっとここらでブログの更新頻度を上げてワイの不労所得の礎を築いて行きたいわけです。
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で展開できます。
実際にはこんな感じで出力されます。 ファイル名からタイトルを作って、今日の日付を入れてます。
## イントロダクション
## 手法
## 結果
## まとめ
まとめ
小さいことだけど結構便利です。 競技プログラミングとかだと、よく使うアルゴリズムとか入出力関係のものを事前に登録しておくとかそんな使い方もあるようです。
あとは、シーケンス機能とかについて残しておけば画像はWebpに変換してMarkdownsを書き換えるとか そのままGithub Actionに投げるてブログを更新することができるのでコンテンツを量産できますね。
amazon.co.jp
