CODEWITHSUNDEEP
javascriptvisual-studio-codeemmet
antoni
antoni

Reputation: 5556

Emmet JS snippets in VS Code

Has anyone ever succeeded in getting Emmet JS snippets to work in VS Code or even in Sublime?

The solution from https://stackoverflow.com/a/16943996/2012407 did not work for me.

These are my settings:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "plaintext": "html"
},

This is my snippets.json:

{
    "javascript": {
        "abbreviations": {
            "cl": "console.log",
            "va": "var"
        },
        "snippets": {
            "cl": "console.log",
            "va": "var"
        }
    },
    "css": {
        "snippets": {
            "cb": "color: black",
            "bsd": "border: 1px solid ${1:red}"
        }
    }
}

There's no problem with CSS, SCSS, HTML, and all the rest - only JS. I've tried abbreviations or snippets, but the Emmet expansion puts HTML tags around what I write: cl becomes <cl> in Javascript & javascriptreact files.

I also tried js and javascriptreact in the snippets definition for the language with no luck.

Upvotes: 5

Views: 13306

Answers (2)

antoni
antoni

Reputation: 5556

So I will put an example here for the built-in VS Code snippets, which are still not my favorite.

Open the command prompt with cmd+shift+p and type user snippets. There is already an example in there. Uncomment it, save, and you can use it straight away by typing the prefix.

I had to create the same snippet file named javascriptreact.json as well for it to work in most of my JS files - Javascript React (babel)

Ex:

{
    "Test": {
        "prefix": "ts",
        "body": [
            "console.log('test')",
            "$1"
        ],
        "description": "Prints test"
    }
}

Now I have Emmet mapped to ctrl+e and having the built-in snippets limited to the intellisense is not great. I'd like a key binding like ctrl+e, and I am a big fan of Emmet.

I am still keen on having it working with Emmet using the same key binding if anyone knows.

Upvotes: 2

Sergey Chikuyonok
Sergey Chikuyonok

Reputation: 2699

No need to add JS snippets in Emmet: the new concept of Emmet 2.0 (already available in VS Code; v2.0 in beta and not publicly released yet) works as autocomplete provider so you can simply use native VS Code snippets instead

Upvotes: 3

Related Questions