VSCodeでEmmetの追加スニペットが動作しないときの対処方。
{
"css": {
"snippets": {
"maxw": "max-width: ${1}",
"bb": "border-bottom: ${1}",
"br": "border-right: ${1}",
"g": "gap: ${1}",
"fdc": "flex-direction: column",
"tal": "text-align: left",
"fww": "flex-wrap: wrap"
}
}
}
例として、上記のようなsnippet.jsonを、任意のフォルダに配置します。
/home/hogehoge/snippet.json
次に、設定画面の「emmet.extensionsPath」の値を上記のように設定して、snippet.jsonを読み込もうとしたのですが、いざcssを開いてTABキーで変換をかけても効いてくれない…。
/home/hogehoge
ファイル名を含めないのが正解でした。
これでようやく「maxw」と入力してTABキーを押すと、「max-width」になってくれました。
ちなみに、cssだけでなくsass(拡張子sassの方)でも効いてくれることを確認しました。
余談
{
"max-width": {
"prefix": "maxw",
"body": [
"max-width: ${1}",
],
"description": "max-width"
}
}
emmetの追加スニペットじゃなくて、「ユーザースニペットの構成」から「sass.json」および「css.json」に対して、上記のように追加もやってみたのですが、これでは効いてくれませんでした。
なんで?
あと、世間的にsassというと、拡張子scssの方ばっかり取り上げられますが、私は拡張子sassの方が好きです。
波カッコを入れなくてもいいので。
もひとつおまけにjsonはいい加減に、phpみたいに配列の最後の要素に対してもカンマを入れるのを許してほしい。
参考サイト
html - Custom emmet snippets not working in vscode - Stack Overflow