erbの<% %>を楽に入力する【VSCode】

はじめに

erbを使う時、<% %>や<%= %>の入力が手間ですので、解消します。

環境

エディタ	VSCode
言語	erb（html系 拡張子 なら応用可能）

やりたいこと

"Emmet"のように、shorthandで<%%>を呼び出せるようにします。

"Emmet"についてはこちら

実装手順

VSCodeで行ってください。

ctrl + shift + Pで設定を開く	snippetを検索し、開く

erbを探し出し、開く	過去に設定した方はerb.jsonを開く
私はすでに設定済みのため、ここには表示されません。

erb.jsonが開く	以下のコードを入力

入力するコード

"ERB script": {
    "prefix": "erb_script",
    "body": [
      "<% ${1} %>"
    ],
    "description": "Insert ERB script tag"
},
"ERB output": {
    "prefix": "erb_output",
    "body": [
      "<%= ${1} %>"
    ],
    "description": "Insert ERB output tag"
},
"ERB end": {
    "prefix": "erb_end",
    "body": [
        "<% end %>"
    ],
}

入力後のコード全文はこちら

{
	// Place your snippets for erb here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. 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:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"ERB script": {
      "prefix": "erb_script",
      "body": [
        "<% ${1} %>"
      ],
      "description": "Insert ERB script tag"
    },
	"ERB output": {
      "prefix": "erb_output",
      "body": [
        "<%= ${1} %>"
      ],
      "description": "Insert ERB output tag"
    },
	"ERB end": {
	  "prefix": "erb_end",
	  "body": [
		"<% end %>"
	  ],
	}
}

使い方

.erbファイル上で試してみてください

eと入力すると候補が表示される	矢印キーで選択、Enterで自動挿入される

おわり

以上、erbを使いやすくする設定方法でした。