VSCodeのおすすめのユーザースニペット集

# まず、ユーザースニペットとは

### スニペット

スニペットとは、特定の言葉を使って決まった形のテキストが入力できるようになったものです。

![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951167/c80d566b-8750-4312-971e-11a48d77cb84.gif)

### ユーザースニペット
ユーザースニペットはスニペットを自分で作ることができる機能のことです。

↓詳しい内容などはこちらを

https://code.visualstudio.com/docs/editing/userdefinedsnippets

# 本題


## 1. HTML系

### labelの中のinput


**「**`<label>`**要素の中の**`<input>`**のやつを簡単に書きたいよー**

そんなあなたに、このユーザースニペットをどうぞ。

``` json:html.json
"inputLabel": {
	"prefix": ["inputLabel","labelInput"],
	"body": [
		"<label>$1",
		"\t<input type=\"$2\">",
		"</label>"
	],
	"description": "It's useful to enter input element in label element"
}
```

このスニペットは、`<label>`属性の中にある`<input>`を簡単に入力することができます。

![6a9a531b-d8c0-4778-b7d4-edf32c0018ff.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951167/e4083ec7-9fdf-448e-8d21-978f0000de85.gif)

### tableとその中身

**「**`<table>`**」をいちいち書くのはめっちゃ面倒くさいよー**

そんなあなたに、このユーザースニペットを。

``` json:javascript.json
"tableSnippet": {
	"prefix": ["tableSnippet","snippetTable"],
	"body": [
		"<table>",
		"\t<tbody>",
		"\t\t<tr>",
		"\t\t\t<${1|th,td|}>$2</${1|th,td|}>",
		"\t\t\t$3",
		"\t\t</tr>",
		"\t</tbody>",
		"</table>"
	],
	"description": "It's useful to enter table element"
}
```

このスニペットは、`<table>`要素とその中身をすぐに入力することができます。

![a6dcc3b0-615b-4252-8a9c-937779948582.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951167/618e1659-673c-4bb4-b5e4-8e76c1179168.gif)

## 2. CSS系

### borderプロパティのやつ


**「**`border`**」プロパティをもっと書きやすくしたいよー**

そんなあなたに、このユーザースニペットをどうぞ。
``` json:css.json
{
	"border snippet": {
		"prefix": ["borderSnippet","snippetBorder"],
		"body": "border: ${1:width} ${2|style,none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset|} ${3:color};",
		"description": "It's useful to enter border property"
	}
}
```

このスニペットは、`border`プロパティを入力するのに便利です。

![Screen recording 2025-06-04 11.47.11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951167/776ca356-98f8-4ea9-84fa-9f7f29c7537e.gif)


### 値の数によって適用される位置が違うようになるやつ(上下左右)

　
**「**`margin`**は値の数によってそれぞれの値の役割が変わるのを覚えるの面倒くさいよー」**

そんなあなたに、このユーザースニペットたちをどうぞ。
``` json:css.json
{
    "2 Values property": {
        "prefix": "2Values",
        "body": "${1:top,bottom} ${2:left,right}",
        "description": "It's useful to enter 2 value property"
    },
    "3 Values property": {
		"prefix": "3Values",
		"body": "${1:top} ${2:left,right} ${3:bottom}",
		"description": "It's useful to enter 3 value property"
	},
	"4 Values property": {
    	"prefix": "4Values",
		"body": "${1:top} ${2:right} ${3:bottom} ${4:left}",
		"description": "It's useful to enter 4 value property"
	}
}
```
このスニペットたちは、例えば`margin`や`padding`など、複数の値を入力するときに役割が変わるプロパティを入力するのに使う事ができます。

![2valuesSnippet.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951167/da18ec72-9e87-459a-874b-9be21b043421.gif)

### 値の数によって適用される位置が違うようになるやつ(角)

　
**「**`border-radius`**とかもわかりやすくできるようになりたいよー」**

そんなあなたに、このユーザースニペットたちをどうぞ。
``` json:css.json
{
	"2 values corner property": {
		"prefix": ["2ValuesCorner", "2CornerValues"],
		"body": "${1:left-top,right-bottom} ${2:right-top,left-bottom}",
		"description": "It's useful to enter 2 value corner property"
	},
	"3 values corner property": {
		"prefix": ["3ValuesCorner", "3CornerValues"],
		"body": "${1:left-top} ${2:right-top,left-bottom} ${3:right-bottom}",
		"description": "It's useful to enter 3 value corner property"
	},
	"4 values corner property": {
		"prefix": ["4ValuesCorner", "4CornerValues"],
		"body": "${1:left-top} ${2:right-top} ${3:left-bottom} ${4:right-bottom}",
		"description": "It's useful to enter 4 value corner property"
	}
}
```
このスニペットたちは、例えば`border-radius`など[^1]、角に関係があって複数の値を入力するときに役割が変わるプロパティを入力するのに使う事ができます。

[^1]: とは言いながら使えるのはおそらく`border-radius`のみ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951167/42bd700a-6b58-44f7-b917-248a55332d91.gif" width="500">
<br>
(画質悪くてすいません)

## 3.JS系

### try...catch文のcatchのところ

　
**catchをいちいち書くの面倒くさいよー**

そんなあなたに、このユーザースニペットをどうぞ。

``` json:javascript.json
{
    "catchErrorName": {
		"prefix": "catchErrorName",
		"body": "catch(error) {alert(`${error.name}\\n${error.stack}`)}",
        "description": "It's useful to catch error in JS"

	}
}
```
このスニペットは、tryブロック内でエラーが発生したとき、そのエラーの名前と詳細を見ることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3951167/ad9d6a97-1236-4c27-a2a0-1d4c3f2375b1.gif" width="500">
<br>
(また画質悪くてすいません)

# 最後に

もし新しいユーザースニペットが思いつけばその都度更新していくのでよろしくお願いします。

みなさんのVSCoder(?)ライフがより良いものになりますように