vs codeで自作スニペット(ピクシブ小説)

どうも今回はvs codeのコード補完に独自の単語を登録できるので、方法を紹介します。あと今回はピクシブ小説の独自タグ例にします。

vs codeの補完機能

今回は詳しく説明しないのですが、vs codeにはかなり高機能な変換能力があります。例えばhtmlとかでh1まで書くとtabキーで<h1></h1>まで書いてくれます。
これが結構便利です。

大体の順

1. 設定からユーザースペニット

2. 名前入力

3. 設定ファイルを編集

1.設定から

左下の設定アイコンからユーザースニペットを選択。
上にコマンドパレットが表示されるので適当な名前をいれます。

2.設定ファイルを編集

下記の構文に合わせて編集します。

	"名前": {
	"prefix": "入力キー",
	"body": [
		"[表示するテキスト]"
	],
	"description": "説明"
	},

3.カーソル位置を設定

$マークをつけることでカーソルの位置を設定できます。
また$1,$2のように数字をつけることでtabキーでカーソルを移動できます。

	"rb":{
	"prefix": "r",
	"body": [
		"[[[rb:$1 > $2]]]"

	],
	"description": "ルビ"
	}
//ちなみに↑はpixiv小説でのルビ設定

"[[[rb:$1 > $2]]]"
tabで表示させた後は$1の位置にカーソルが表示されます。
その後もう一回tabを押すと$2の位置にカーソルが移動します。

pixiv小説でのスニペット

ここではpixiv小説の独自タグをvs codeで使えるようにするものです。
多分これコピペすれば使えるはずです。

{
	// Place your GLOBAL snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:

	"newpage": {
	"prefix": "n",
	"body": [
		"[newpage]"
	],
	"description": "ページ替え"
	},

	"chapter":{
	"prefix": "p",
	"body": [
		"[chapter:$1]"
	],
	"description": "章タイトル"
	},
	
	"rb":{
	"prefix": "r",
	"body": [
		"[[[rb:$1 > $2]]]"
	],
	"description": "ルビ"
	}
}

まとめ

今回はpixivに直書きはいつショトカ誤爆で消すかわからなかったのでvs  codeで書こうと思ったのですが、タグ入力が面倒だなと思ったので独自スニペットを追加して見ました。

実際にやってみた結果

なぜかgifがアップロード出来ないので、youtubeに置いときます。