Visual Studio Code Emmet not working

Question

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

score 105 · Accepted Answer · answered Jul 18 '18 at 04:20

105

In your vscode user setting, add

"emmet.includeLanguages": { "javascript": "html" }

That way you can use emmmet in your js files.

answered Jul 18 '18 at 04:20

Tien Lin

1,338
1
11
6

2

Thanks, this fixed it for me. – Deelux Oct 17 '18 at 16:16
1

This [link] (https://code.visualstudio.com/docs/editor/emmet#_emmet-configuration) shows the configuration to enable mapping between the languages supported by Emmet and language of our choice. However I was not able to get suggestions from Emmet, so I had to add a duplicate entry for 'javascript' as suggested above by @tienl to get it working. – nishant kumar Aug 06 '19 at 20:29
4 years later, this still fixed it for me. – Laz Austin Nov 21 '22 at 06:08

score 63 · Answer 2 · answered Dec 14 '18 at 04:22

63

in vs code user setting add these

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
}

answered Dec 14 '18 at 04:22

Saahithyan Vigneswaran

6,841
3
35
45

5

This code `"emmet.triggerExpansionOnTab": true` works for me. When you accidentally type something (e.g. pa instead of p for paragraph tag) and you delete the letter "a" and press tab, without this code emmet won't work. – Blues Clues Oct 07 '20 at 10:29
hey , its not working inside .html file script tag , can you help with this , with above code I'm getting emmet autosuggestions in js , vue and HTML file but not in between of strip tag `````` – Kunal Rajput Oct 03 '21 at 11:08

score 33 · Answer 3 · edited Dec 14 '20 at 00:10

33

This following worked for me:

Open Command Palette (Ctrl + Shift + P)
Open Settings (JSON)

Add to the end:

"emmet.showSuggestionsAsSnippets": true,
"files.associations": {
    "*html": "html", 
    "*njk": "html"
},

edited Dec 14 '20 at 00:10

KyleMit

30,350
66
462
664

answered Jun 29 '20 at 08:47

zmonteiro

361
3
4

thanks. this has worked to add mustache templates as html – Matteus Barbosa Mar 28 '23 at 21:37

score 16 · Answer 4 · answered Jul 15 '19 at 17:37

16

I'd like to add to the others posting about emmet.includeLanguages, you can also add "vue": "html", so like:

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

answered Jul 15 '19 at 17:37

Zoltán Matók

3,923
2
33
64

2

this is what did it for me, `"vue-html"` on its own was not enough, added the `"vue"` entry as well and it worked. – JL Peyret May 20 '20 at 19:35

score 14 · Answer 5 · edited Jun 29 '21 at 00:01

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode's settings. First, open settings.json from any directory:

vim ~/.config/Code/User/settings.json

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in "Launch" > click on "Edit in settings.json"

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

{
    /*here are your existing settings*/
    /*THE CODE BELOW*/
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "razor": "html",
        "plaintext": "jade"
    }
     /*^^^^THE CODE ABOVE^^^^*/
}

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

score 9 · Answer 6 · answered Sep 01 '21 at 10:39

The issue is that you need to include the language in your settings file.

With newer versions of VSCode, you can open up settings by selecting Code > Preferences > Settings and then search for "Emmet: Include Languages" and simply add your language there.

I just did this to get emmet working on my react code.

score 7 · Answer 7 · answered Apr 12 '21 at 04:56

7

Check the file extension icon, does it show up as html5 or dj (which stands for django)?

If it shows as dj, then you have the Django VSCode extension. You can do 2 things:

Remove the Django extension
Add "django-html": "html" to emmet.includeLanguages (as per this issue), so mine now looks like this:

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

answered Apr 12 '21 at 04:56

Ben Butterworth

22,056
10
114
167

Thank you! : D Added the `django-html": "html`, without removing the django extension or anything else and it works! Thanks! – M.Ionut Sep 10 '22 at 13:47

score 6 · Answer 8 · answered Apr 25 '20 at 21:23

6

Something I ran into that was driving me crazy trying to figure out was that the setting "emmet.showExpandedAbbreviation" will affect emmet working in your javascript files too.

To solve, remove it from your settings.json or set it to: "emmet.showExpandedAbbreviation": "always"

answered Apr 25 '20 at 21:23

Tom Mulkins

431
4
8

Dear God ... this was basically me too. That setting was just not in my settings.json even though it appeared to be when I was using the VSCode UI to toggle my settings. So - once I opened the settings.json I saw it was missing, added it, restarted ... and FINALLY I get emmet intellisense stuff! Thank you so much. – Christopher Mar 01 '21 at 21:01

score 2 · Answer 9 · answered Jul 10 '22 at 17:46

2

find setting.json file and add this code and save it and if you don't know how to do it then watch this video https://www.youtube.com/watch?v=AUuP_hriEc4`

"files.associations": {"*html":"html"}, "emmet.triggerExpansionOnTab": true

`

answered Jul 10 '22 at 17:46

akshay Barapatre

21
2

score 1 · Answer 10 · edited Apr 01 '20 at 14:50

1

With aspnetcorerazor and razor language selection add the below code in your setting.json file:

"emmet.includeLanguages": { "aspnetcorerazor" : "html", "razor" : "html" }

edited Apr 01 '20 at 14:50

m02ph3u5

3,022
7
38
51

answered Apr 01 '20 at 14:10

Muhammad Amir

43
7

score 1 · Answer 11 · answered Nov 18 '20 at 22:28

1

This happened to me in HTML files because another extension (for Django, a Python web framework) was overriding .HTML file types without a way to turn it off. I removed the extension, restarted VSCode, and now it's working again.

answered Nov 18 '20 at 22:28

Seth

6,514
5
49
58

1

simply adding `"django-html": "html"` to the user settings in VSCode -as @Ben Butterworth suggested- worked for me – M.Ionut Sep 10 '22 at 13:48
removing a extension is not a solution because of extensions useful in many ways. – Ajay Sahu Mar 18 '23 at 04:57

score 1 · Answer 12 · answered Oct 16 '21 at 07:07

1

In your setting.json file add this line "emmet.triggerExpansionOnTab": true,. Then ! and tab will do the work.

answered Oct 16 '21 at 07:07

Sahil Rajpal

510
4
8

score 1 · Answer 13 · edited Jul 17 '22 at 05:48

1

Go to VS Code settings -> Search Emmet -> In section Emmet:Include Languages, add {item, value}

{javascript :javascriptreact}

edited Jul 17 '22 at 05:48

JialeDu

6,021
2
5
24

answered Jul 11 '22 at 04:44

tyler_flx

11
1

score 0 · Answer 14 · answered Apr 11 '20 at 09:11

0

Tried all above , didn't work.

Updated my VScode by reinstalling it from here and everything works like a charm now.

answered Apr 11 '20 at 09:11

Kshitij Dhyani

703
2
8
23

You may have had the same issue I did https://stackoverflow.com/a/61432809/4223679 – Tom Mulkins Apr 25 '20 at 21:23
I tried everything , including your solution as well. – Kshitij Dhyani Apr 26 '20 at 09:29

score 0 · Answer 15 · answered Nov 02 '20 at 07:49

0

Simply uninstall the extension related to HTML or CSS And it work for me nicely

answered Nov 02 '20 at 07:49

Harshit Kapoor

1

what if we want to use that extension? please avoid writing a solution if it is unnecessary – Ajay Sahu Mar 18 '23 at 04:51

score 0 · Answer 16 · edited Dec 30 '20 at 02:27

0

"editor.defaultFormatter": "VisualStudioExptTeam.vscodeintellicode"

edited Dec 30 '20 at 02:27

Simas Joneliunas

2,890
20
28
35

answered Dec 30 '20 at 00:55

Kynan

21
5

score 0 · Answer 17 · answered Jun 24 '22 at 15:44

0

for me emmet auto-fill stopped to work on single html page ; turnout it was bcz i used "<" twice not on a tag ( like withen the text) , remove them or but \ before them or use them inside (prism cdn is recomended then) will solve the issue

answered Jun 24 '22 at 15:44

The Streamer

1

score 0 · Answer 18 · edited Jul 10 '22 at 08:30

0

I ran into this issue today and realized that the following setting wasn't checked. When I checked the box, I went back to a test HTML file and used "!" to bring up the boilerplate, and this time it worked.

"Emmet: Use inline Completions"

edited Jul 10 '22 at 08:30

Eric Aya

69,473
35
181
253

answered Jul 10 '22 at 07:20

DravenX

1
1

Pranav Arora · Answer 19 · 2022-07-15T14:51:50.733

Step 1: Start your VS Code. Click on the Settings or press Ctrl+, to open the VS Code Settings.

Step 2: Click on the Extensions tab on the left side of the settings. Click on HTML.

Step 3: Click on the Edit in settings:json hyperlink to edit the settings in JSON format.

Step 4: Inside the curly braces, enter the following code under the already written JSON code:

“emmet.triggerExpansionOnTab”:true,
“files.associations”: {“*html”:“html”},
“emmet.useInlineCompletions”:true

Step 5: Save the file. Now if you try to apply Emmet in your code, it will work smoothly!!

score 0 · Answer 20 · edited Feb 07 '23 at 19:25

You have to uninstall your VS code and Node.js by going into control panel → program & features.
After the uninstall is copmlete, go to C:\Users\your_user_name_folder.
After reaching there, delete the .vscode folder.
Go to AppData\Roaming\Code (delete this Code folder).
Go to C:\Users\<your_user>\AppData\Local\Programs and delete the Microsoft VS code folder.
Now go to C:\Users\rajat\AppData\Local and delete the npm_cache folder.
Now reinstall Node.js and VSCode.

score 0 · Answer 21 · answered Mar 18 '23 at 05:00

0

if the problem is occurring due to any Django extension then simply adding "django-html":"html" in "Emmet: Include Languages" in the settings will solve the problem.

answered Mar 18 '23 at 05:00

Ajay Sahu

186
1
7

Visual Studio Code Emmet not working

21 Answers21