Velvet Star Monitor

Standout celebrity highlights with iconic style.

news

Visual Studio Code Emmet not working

Writer Matthew Harrington

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.

0

15 Answers

In your vscode user setting, add

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

That way you can use emmmet in your js files.

2

in vs code user setting add these

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

This following worked for me:

  1. Open Command Palette (Ctrl + Shift + P)

  2. Open Settings (JSON)

  3. Add to the end:

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

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" }
1

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.

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.I just did this to get emmet working on my react code.

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"

1

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

enter image description here

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", },

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

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

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.

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

You will need this extention: html-class-completion. That functionality is not built into vscode without an extension. Then you will need to add this to your user settings:

"html-css-class-completion.enableEmmetSupport": true,

and it works very nicely.

Tried all above , didn't work.

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

2

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

"editor.defaultFormatter": "VisualStudioExptTeam.vscodeintellicode"

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy