DEV Community

Cover image for Emmet not working in VS Code ?— Here’s how you can fix this problem!!
Pranav Arora
Pranav Arora

Posted on • Edited on

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.

vscode_emmet.png

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


Enter fullscreen mode Exit fullscreen mode

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.

Oldest comments (70)

Collapse
 
ramprakashram profile image
Ram

Thanks. It worked flawlessly.

Collapse
 
pranavarora1895 profile image
Pranav Arora

You're Welcome Ram!! 😀

Collapse
 
uvlabs profile image
Uriahs Victor

You can also turn on this setting via VS settings without editing the .json file

Collapse
 
paubel profile image
Paul B • Edited

And here is where you do that: dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
pranavarora1895 profile image
Pranav Arora

Yup great!!

Collapse
 
pranavarora1895 profile image
Pranav Arora

True!! Thanks for telling. 😀

Collapse
 
mariullom profile image
Mari Ullom

You are a lifesaver!

Collapse
 
pranavarora1895 profile image
Pranav Arora

Oh thank you, Mari!! 😀

Collapse
 
ngl4 profile image
Cindy Lam

Thank you Pranav! This fixed the Emmet extension issue using your approach!

Collapse
 
pranavarora1895 profile image
Pranav Arora • Edited

You're most welcome, Cindy!! 😊

Collapse
 
tdrobison profile image
tdrobison

Bravo! Fixed my issue.

Collapse
 
pranavarora1895 profile image
Pranav Arora

That's great!! 😀

Collapse
 
victorsgb profile image
victorsgb

Thank you so much!!

Collapse
 
pranavarora1895 profile image
Pranav Arora

You're Welcome!!

Collapse
 
onwuemene profile image
Joshua

Thank you so much bro, it worked.

Collapse
 
hpinedoh profile image
hpinedoh

Great! thanks...

Collapse
 
alonedatascientist profile image
alonedatascientist

Fix still works as of 7 / 11/ 2022. Thank you sir!

Collapse
 
edichirca profile image
Edi Chirca • Edited

Ive tried it, still not working, maybe Im doing something wrong:
Image description
Image description

Collapse
 
ilonadev profile image
iLonaDev

Try to add one more line to the snippet:
"emmet.useInlineCompletions": true

Collapse
 
edichirca profile image
Edi Chirca • Edited

Just added it, finally its working thanks iLonaDev .