Emmet not working on visual studio code

Emmet not working on visual studio code: Microsoft Visual Studio Code is one of the famous open source-code editors for the programmer. This code editor provides debugging, syntax highlighting, built-in emmet, intelligent code completion, embedded Git, snippets, code refactoring, and many more. It is a user-friendly code editor where users can change themes, can set keyboard shortcuts and preferences. Also, a variety of extensions are available to add additional functionality. I have been using this code editor for the last 5 years. I never found any problem but after the last update I got two issues those are;

  1. Visual studio code (VS code) has suddenly stopped recognizing HTML files (not detecting HTML file icon).
  2. Emmet not working on Visual studio code (VS code).

Don’t worry to solve the above problems you need to include two lines of code in the “settings.json” file. Just follow the instruction below your problem will be solved and thank me later.

If you don’t like reading you can watch this video below.

Problem: HTML files not recognizing by Visual studio code (VS Code)

It seems that the visual studio code extension isn’t associated with the type of file (HTML) you have to manually add *.html to files.associations, in user settings.

Solution: Go to the “Settings” by clicking the settings icon (In mac it is Code — > Preferences –> Settings) then go to “Extension” then click “Edit in settings.json”

Emmet not working on Visual studio code

Now add the following line of code at the end of the code.

"files.associations": {"*html" : "html"}

Problem: Emmet not working on Visual studio code (VS code).

Like other code editing software, Visual studio code doesn’t require any extension for running emmet. Emmet got to build in on VS code. But after the latest update, Microsoft thought Emmet code expansion should not be done by the “tab” key because the coder may want to indent the code instead of Emmet code expansion. That’s why they turned off by default Emmet code expansion by the “tab” key.

Also read: 14 WEBSITES TO LEARN PROGRAMMING LANGUAGE FREE IN 2020

Solution: Like the above solution (HTML file not recognizing) Go to the “Settings” by clicking the settings icon (In mac it is Code — > Preferences –> Settings) then go to “Extension” then click “Edit in settings.json”

Now add the following line of code at the end of the code.

"emmet.triggerExpansionOnTab": true,

Emmet not working on visual studio code

Conclusion: If you find this article helpful please don’t forget to help me by subscribing to the above youtube channel.

This article covers the following issues:

  • Emmet not working on VS code.
  • How to solve emmet issue in visual studio code.
  • How to active emmet in vs code
  • How to enable emmet in Visual studio code.
  • Html file is not recognized by VS code.