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

# はじめに
`erb`を使う時、`<% %>`や`<%= %>`の入力が手間ですので、解消します。
# 環境
|  |  |
|:-:|:-:|
| エディタ  | VSCode  |
| 言語  | erb（html系 拡張子 なら応用可能）|
| | |
# やりたいこと
"Emmet"のように、shorthandで`<%%>`を呼び出せるようにします。

"Emmet"についてはこちら

https://qiita.com/kohki_takatama/items/ec0bec86277bf90f94eb

# 実装手順
VSCodeで行ってください。
| `ctrl + shift + P`で設定を開く | snippetを検索し、開く | 
|:-:|:-:|
|![スクリーンショット 2024-08-22 13.01.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/91cc29e4-749d-2821-1bb2-9c06aacbeefa.png)|![スクリーンショット 2024-08-22 13.00.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/1fd7661b-03f5-ebe0-9f98-dd62d55240a9.png)|

| `erb`を探し出し、開く | 過去に設定した方は`erb.json`を開く |
|:-:|:-:|
| ![スクリーンショット 2024-08-22 13.05.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/553e2e1f-94cd-c80c-82e6-a2a583bcacac.png)  |  ![スクリーンショット 2024-08-22 13.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/14f36a52-c313-0450-4dc1-71e2760e9969.png) |
| 私はすでに設定済みのため、ここには表示されません。  |   |

| `erb.json`が開く | 以下のコードを入力 |
|:-:|:-:|
| ![スクリーンショット 2024-08-22 15.35.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/2c66a457-b9a8-2283-9e47-0f1cfd67daef.png)  |  ![スクリーンショット 2024-08-22 15.36.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/48dcaf1f-6d9a-6d69-6d16-6fe55c467f8f.png) |

:::note
入力するコード
```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 %>"
    ],
}
```

<details><summary>入力後のコード全文はこちら</summary>


```json
{
	// 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 %>"
	  ],
	}
}
```
</details>
:::
# 使い方
`.erb`ファイル上で試してみてください
| `e`と入力すると候補が表示される | 矢印キーで選択、Enterで自動挿入される |
|:-:|:-:|
| ![スクリーンショット 2024-08-22 15.40.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/b91b0bf6-2d15-67c0-2197-46886070c6a1.png)  |  ![スクリーンショット 2024-08-22 15.41.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/54325299-c3e8-1afe-ca0e-855afa1199f7.png) |

# おわり
以上、`erb`を使いやすくする設定方法でした。