Exploring the capabilities of Emmet snippets in VS Code has been a game-changer for me, especially as I navigate my way around this new IDE. Despite my efforts to find an answer through Google, one question continues to elude me. After experimenting with adding Emmet snippets into my .vue files by tweaking my VS Code settings.json file like so:
"emmet.syntaxProfiles": {
"vue-html":"html",
"vue":"html",
}
While this approach worked seamlessly, I desired to incorporate a few custom snippets, prompting me to include this additional entry:
"emmet.extensionsPath": [
"C:\\CodeSnippets"
],
Within one of these snippet files lies the following pertinent code block: {
"html": {
"snippets": {
"ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
"oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
"vgc": "{ Wrap plain text in curly braces }",
"ig": "{import ${1} from './${2:components}/${1}.vue'}"
}
},
"css": {
"snippets": {
}
}
}
It's fascinating how typing oll within a '.html' file effortlessly injects the snippet, evident in the associated screenshot.
https://i.sstatic.net/BkV3N.png
However, replicating the same action within a .vue file yields no results. Although Emmet functions properly in my .vue document for other tasks, as illustrated in the screenshot below: https://i.sstatic.net/C8Or5.png
I'm convinced that there must be some overlooked configuration on my end, but pinpointing it remains elusive. Any insights or suggestions would be greatly appreciated!