【解決】VS Codeの自作スニペットでEmmet機能が出ない【対策あり】

2022年12月26日2023年1月12日

記事内に広告を含みます

パソ君

・VS Codeの自作スニペットでEmmet機能でないんだけど？

こんな疑問にお答えします。

VS Codeで自分で作ったスニペットを使うときに起こる罠。

なんとEmmet機能が利用できなくなるんですよね。

効率化するために作ったのに、効率悪くなる？なんてことに。。

が、安心してください。
解決策があります！

ジト

すぐになおるよ！

ということで、この記事では「VS Codeの自作スニペットでEmmet機能がでない件」について解説していきます！

この記事でわかること

・VS Codeの自作スニペットでEmmet機能

VS Codeの自作スニペットでEmmet機能が出ない件

スニペットを自作した時にこの問題が起こりました。。

なぜかEmmet機能が出なくなる。。

例となるスニペットがこちら↓

{
	"@include-Sp": {
		"prefix": "@sp",
		"body": [
			"@include Sp {",
				"\t$1",
			"}"
		],
		"description": "include sp"
	},
}

scssによるスマホ用のbreakpointを、効率化しようと思い記載したスニペットです。

それがいざ使うとこうなってしまう↓

「d」と打っても、display:~などのEmmet候補がでてこない！！

ジト

これだと逆に効率悪くなってしまう。。

ただ安心してください！

解決策があります。

結論：「$1」⇒「$0」に修正する。

どういうことかというと、先ほどのスニペットコードの「”\t$1″,」部分を「”\t$0″,」のようにするということ。

つまりこう↓

{
	"@include-Sp": {
		"prefix": "@sp",
		"body": [
			"@include Sp {",
				"\t$0",
			"}"
		],
		"description": "include sp"
	},
}

これだけで、Emmet機能を使えることができます！

めちゃくちゃ効率よくコーディングが可能になりますね。

スニペットの別記事も参考にどうぞ↓

ジト

スニペットを使いつつ、Emmet機能を使いたい人は覚えておこう！

コーディング知識を
『チート級』に得れる教材を作成！