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

[Nayan]

very helpful sir appretiated

[Kim Leng]

Help please

[Sumit Tiwari]

[Sumit Tiwari]

In my VScode the emmet option is not showing in the setting. Even if i searched it still it did not show anything.

[Pranav Arora]

Thank you so much to all for appreciating my post. It was my first-ever post, and I am so glad that I was able to help a lot of developers. It means a lot to me and motivates me to share my findings and bug fixes with the community. 😀

[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.

[Pranav Arora]

Thank you so much mate. Glad that I could help :-)

[Vidhan Pandey]

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

[Pranav Arora]

Thank you so much for your kind words. It motivates me to share more of my findings on this platform. :-)

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