Emmet user snippets.json

[arnofly]

Type: Bug

Hi,

I've spent several hours trying various solutions, but Emmet still doesn't suggest my custom snippets (HTML or CSS), even when I use the examples from the documentation. I added some preferences in my settings.json file, which work, but VSCode seems unable to find my snippets.json file located at the root of a data drive: "D:\snippets.json" or "D:\\snippets.json".

VS Code version: Code 1.89.1 (dc96b83, 2024-05-07T05:13:33.891Z)
OS version: Windows_NT x64 10.0.19045
Modes:

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-2500K CPU @ 3.30GHz (4 x 3311)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_graphite: disabled_off video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	undefined
Memory (System)	15.97GB (8.74GB free)
Process Argv	--crash-reporter-id 61694ba4-8577-4a04-93e4-2c9a171defa9
Screen Reader	no
VM	0%

Extensions (32)

Extension	Author (truncated)	Version
Bookmarks	ale	13.5.0
vscode-intelephense-client	bme	1.10.4
css-format-one-line	css	1.2.0
vscode-eslint	dba	2.4.4
make-hidden	dev	4.0.4
profiler-php-vscode	DEV	1.46.15409
apacheconf-snippets	eim	1.3.0
html-slim-scss-css-class-completion	gen	1.7.8
minifier	Hal	0.0.4
path-autocomplete	ion	1.25.0
auto-comment-blocks	kev	1.0.1
vscode-my-markdown-preview-styles	Lin	0.0.1
twig-language-2	mbl	0.9.4
rainbow-csv	mec	3.12.0
php-namespace-resolver	Meh	1.1.9
vscode-apache	mrm	1.2.0
vscode-language-pack-fr	MS-	1.89.2024050109
php-docblocker	nei	2.7.0
vs-html-to-css	nep	1.0.0
vscode-css-navigation	puc	1.14.1
extended-html5-boilerplate	raj	0.0.1
htmlescape-vscode-extension	ray	0.0.7
phpdoc-comment-vscode-plugin	rex	1.3.0
LiveServer	rit	5.7.9
preview-vscode	sea	2.3.7
code-spell-checker	str	3.0.1
code-spell-checker-french	str	0.4.1
clipimage64	Voy	1.0.6
vscode-css-variables	vun	2.7.1
php-debug	xde	1.34.0
local-history	xyz	1.8.1
markdown-all-in-one	yzh	3.6.2

A/B Experiments

vsliv368cf:30146710
vspor879:30202332
vspor708:30202333
vspor363:30204092
vstes627:30244334
vscoreces:30445986
vscod805:30301674
binariesv615:30325510
vsaa593:30376534
py29gd2263:31024239
vscaat:30438848
c4g48928:30535728
azure-dev_surveyone:30548225
962ge761:30959799
pythongtdpath:30769146
welcomedialogc:30910334
pythonidxpt:30866567
pythonnoceb:30805159
asynctok:30898717
pythontestfixt:30902429
pythonregdiag2:30936856
pythonmypyd1:30879173
pythoncet0:30885854
h48ei257:31000450
pythontbext0:30879054
accentitlementst:30995554
dsvsc016:30899300
dsvsc017:30899301
dsvsc018:30899302
cppperfnew:31000557
dsvsc020:30976470
pythonait:31006305
chatpanelc:31048052
dsvsc021:30996838
bdiig495:31013172
pythoncenvpt:31049070
a69g1124:31058053
dvdeprecationcf:31052040
pythonprt:31056678
dwnewjupytercf:31046870
26j00206:31048877

[rzhao271]

I notice that you have a few other completion extensions installed. Could you try creating a new empty profile and seeing whether the custom snippets work after reconfiguring the Emmet settings?

[vscodenpa]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!

[arnofly]

Hi,
Same issue with a new profile. It's driving me crazy :)

I followed this article : https://www.smashingmagazine.com/2021/06/custom-emmet-snippets-vscode/ and create an snippets file in C:\Users\***\AppData\Roaming\Code\User\emmet\snippets.json.
So my settings file:

{
    "emmet.triggerExpansionOnTab": true,
    "emmet.extensionsPath": [
        "C:\\Users\\***\\AppData\\Roaming\\Code\\User\\emmet\\snippets.json"
    ],
}

My snippets.json file:

{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

In a new HTML file img:l is not listed in the autocompletion.
Maybe I'm wrong, because I quite new with VSCode.

[arnofly]

Shame on me. The file path was wrong because I included the file name in the path.

For those reading this, I've seen a video on YouTube where the guy used ./emmet after creating that folder in his VSCode user profile. TThis path doesn't seem to work on Windows.

Just set the emmet.extensionsPath field in your settings like this (assuming you've created the emmet folder at this location)::
C:\Users\***\AppData\Roaming\Code\User\emmet\
OR
C:\Users\***\AppData\Roaming\Code\User\snippets\emmet\ to save your file with all other snippets in the default snippets folder.