Emmet stopped working for CSS files in VS Code

Viewed 578

I used to write CSS with emmet all the time. It stopped working all of a sudden.

In the image below, It can be seen that emmet has stopped giving suggestions when I type m0. It used to give a dropdown showing margin: 0; Emmet Abbrevation But It isn't showing now. I've tried many answers from Stackoverflow, but unfortunately nothing seems to solve the issue for me. It would be nice If someone helps me sort this out.

Image showing CSS emmet not suggesting dropdowns

Settings.json

{
    "emmet.excludeLanguages": [
        "markdown"
    ],
    "emmet.includeLanguages": {
    },
    "emmet.optimizeStylesheetParsing": true,
    "emmet.preferences": {},
    "emmet.showAbbreviationSuggestions": true,
    "emmet.syntaxProfiles": {},
    "emmet.triggerExpansionOnTab": true,
    "emmet.variables": {},
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
    "emmet.showSuggestionsAsSnippets": true,
    "tailwindCSS.emmetCompletions": true
}
3 Answers

If none of this works then check the file association, should be CSS.

On the screenshot you can see the bottom bar and selected CSS, if yours not click it and associate .css files with CSS.

enter image description here

Reset your settings.json to minimal, like :

{
    "emmet.showExpandedAbbreviation": "always"    
}

Test to see if it works and change the config as you like. Read the docs for more info.

1. Uninstall Tabnine.

(or any other autocomplete installed).

2. Restart VS code

then add then add "emmet.showExpandedAbbreviation": "always"

Related