Emmet not working in VS Code ?— Here’s how you can fix this problem!!

Emmet is a powerful extension in Visual Studio Code. If you are developing a website or working with any language such as HTML, Emmet helps you to write your code fast and efficiently without making silly mistakes.

But sometimes, while updating VS Code, the VS Code loses the file associations or Emmet stops working for some reason. I encountered the similar problem after I updated my VS Code. I was not able to use Emmet and it seemed annoying to me because I didn’t want to write whole html starter templates while working on website development. So I started finding out the solution and figured out how to fix that.

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!!

That’s how I fixed this Emmet not working problem which I encountered when I updated VS Code. I hope this solution may be helpful for you as well and serves the purpose.

Comments

[Nicolás Rafales]

I don't usually use much of this (or any particular) platform. Just wanted to give you some good Karma mate. I appreciate this. Straight to the point when I needed solutions, not distractions.
Had to change the quotes to straight ones, but anyone can realise that if paying attention
😉

Cheers mate.

[Vidhan Pandey]

Created an account just to say that Pranav you are awesome! You did not ignore anyone in need :)

[AbdulmunimFiras]

I have a question, when i type in

it auto closes it but doesnt complete same with it doesnt complete , its really annoying having to write it everytime what should i do??

[graciamaria92]

still not working. please, I really need help

[Pranav Arora]

Hi,

put a comma , at the end of line 8

change the quotes to "". If you see the the quotes on line 9 & 10 are different from the rest in the file. Kindly do that and let me know if that works.

[Govind1326]

hello sir..

[graciamaria92]

thanks pranav, but sadly still not working

{
"editor.formatOnSave": true,
"workbench.colorTheme": "Default Dark+",
"emmet.useInlineCompletions": true,
"emmet.showSuggestionsAsSnippets": true,
"emmet.triggerExpansionOnTab": true,
"window.zoomLevel": 1,
"html.format.contentUnformatted": "",
"emmet.triggerExpansionOnTab": true,
"files.associations": {"*html": "html"},
"emmet.useInlineCompletions": true,
"emmet.useInlineCompletions": true,
}

[Pranav Arora]

In line 10, replace the following snippet:

"files.associations": {
"index.html": "html",
"*.css": "css",
"App.js": "javascriptreact",
"*.py": "python"
}


[graciamaria92]

not working :(

{
"editor.formatOnSave": true,
"workbench.colorTheme": "Default Dark+",
"emmet.useInlineCompletions": true,
"emmet.showSuggestionsAsSnippets": true,
"emmet.triggerExpansionOnTab": true,
"window.zoomLevel": 1,
"html.format.contentUnformatted": "",
"emmet.triggerExpansionOnTab": true,
"files.associations": {
"index.html": "html",
".css": "css",
"App.js": "javascriptreact",
".py": "python"
}
}

[graciamaria92]

[Pranav Arora]

From line 4, replace the code with the given snippet:

"emmet.extensionsPath": [
""
],
"emmet.triggerExpansionOnTab": true,
"emmet.useInlineCompletions": true,
"files.associations": {
"*html": "html",
"*.html": "html",
"*.py": "python",
"*.css": "css"
},
"emmet.preferences": {},
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},


[graciamaria92]

*thanks a loooot pranav, you solved it *

[Pranav Arora]

you're welcome!!

[Bonaventure Ogeto]

Helpful!

[shahzadndch]

Why not working ?

[shahzadndch]

Emmet not working
When i type ! In me file it should show options but it is not

[Govind1326]

hi

[CandentMind]

This was very helpful and it worked, thanks a lot

[Aziz-denden]

emmet not working i need some help

[KENDRICK KEETON]

Fixed it. Nice. I wonder why vscode doesn't have these setting by default?

[Astowny]

Amazing, thanks ! It worked for me.

[Ian Cover]

Just remember to add the dot on the file extensions, since the setting files.associations is associating files by their extension (e.g., ONE file my-file.html or ALL files *.html) to their language identifier, e.g. html and because its a JSON file, must be wrapped in double quotes, for example:

"files.associations": {
    "index.html": "html",
    "*.css": "css",
    "App.js": "javascriptreact",
    "*.py": "python"
}

[spyrosko]

Thank you, Pranav! My problem was fixing the quotation marks to the rest that were already in my settings.json file.

[Md Mahim]

****

why its not working
plz help
i cant learn for this prblm

[Madhusudannn03]

bro if ur done then help me

[Euhan Sarkar]

Thank You Arora! it's working.