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

Pranav Arora @pranavarora1895

About: Developer/Educator

Location:
St. John's, Newfoundland and Labrador, Canada
Joined:
Mar 4, 2021

Emmet not working in VS Code ?— Here’s how you can fix this problem!!

Publish Date: Oct 20 '21
57 70

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.

Comments 70 total

  • Ram
    RamDec 6, 2021

    Thanks. It worked flawlessly.

  • Uriahs Victor
    Uriahs VictorJan 3, 2022

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

  • Mari Ullom
    Mari UllomJan 13, 2022

    You are a lifesaver!

  • Cindy Lam
    Cindy LamFeb 6, 2022

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

  • tdrobison
    tdrobisonFeb 8, 2022

    Bravo! Fixed my issue.

  • victorsgb
    victorsgbApr 5, 2022

    Thank you so much!!

  • Joshua
    JoshuaJul 10, 2022

    Thank you so much bro, it worked.

  • hpinedoh
    hpinedohJul 11, 2022

    Great! thanks...

  • alonedatascientist
    alonedatascientistJul 11, 2022

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

  • Edi Chirca
    Edi ChircaJul 14, 2022

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

    • iLonaDev
      iLonaDevJul 15, 2022

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

      • Edi Chirca
        Edi ChircaJul 15, 2022

        Just added it, finally its working thanks iLonaDev .

  • utkarsh
    utkarshJul 15, 2022

    It actually helped thanks man

  • Akano Olayinka Afeez
    Akano Olayinka AfeezJul 18, 2022

    Thanks, it worked

  • freddyteddy
    freddyteddyJul 19, 2022

    Thanks Pranav

  • Madhusudannn03
    Madhusudannn03Jul 23, 2022

    still not working
    please anyone help .
    Image description

    • Pranav Arora
      Pranav AroraJul 23, 2022
      1. As you can see " " (the quotes) that you have copied are different from the others in settings.json. So you remove the copied quotes and type them again.

      2. Place a , (comma) at the end on line 19. This will separate line 19 from line 20.

      Hope that helps!! 😀

      • Madhusudannn03
        Madhusudannn03Jul 24, 2022

        Can u explain me 1 point 🙄🙄
        main 5 dino se kosis kr rha lekin nhi ho rhaa mere se utube bhi dekha vha bhi sb yhi bol rhe ki
        “emmet.triggerExpansionOnTab”: true,
        “files.associations”: {“*html”: “html”},
        isko copy kar le ho jayega but jab main kar rha to red ho jaa rha

        • Pranav Arora
          Pranav AroraJul 24, 2022

          Dhyan se dekho jo tumne copy kia hai uske quotes different hain. Tum sirf ek kaam kro, jo tumne copy kia hai uske quotes ko delete kro aur apne se firse lga lo.

          • Madhusudannn03
            Madhusudannn03Jul 24, 2022

            bhaiya kaha glt hai mujhe to dikh hi nhi rhaa jo red me show ho rha oo maine shi likha hua hai aap kiska baat kar rhe ho

            • Pranav Arora
              Pranav AroraJul 24, 2022

              Quotes (" ") bdlo bas, baki sab sahi hai.

              • Madhusudannn03
                Madhusudannn03Jul 24, 2022

                Image description

                ab ye light blue ho gya

                • Madhusudannn03
                  Madhusudannn03Jul 25, 2022

                  bhaiya abhi bhi kaam n kar rhaa ab to sb kar dala lagg rha mera me hi unique error hai

                  Image description
                  Image description

                  • Pranav Arora
                    Pranav AroraJul 25, 2022

                    Settings.json me apni line 18 me ye code daalo:

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

                    • Madhusudannn03
                      Madhusudannn03Jul 25, 2022

                      kuch nhi huaa

                      Image description
                      Image description

                      • Pranav Arora
                        Pranav AroraJul 26, 2022

                        Line 23 wali file associations delete krdo. wo puri line delete krdo.

                        • Madhusudannn03
                          Madhusudannn03Jul 26, 2022

                          bhaiya nhi ho rha agar aap dhyn se dekhe to 17 aur 22 ka text color baki sb sr different hai mujhe lagg rha isi karn se nhi ho rha.

  • Euhan Sarkar
    Euhan SarkarJul 25, 2022

    Thank You Arora! it's working.

  • Md Mahim
    Md MahimAug 5, 2022

    Image description****

    why its not working
    plz help
    i cant learn for this prblm

  • spyrosko
    spyroskoAug 8, 2022

    Thank you, Pranav! My problem was fixing the quotation marks to the rest that were already in my settings.json file.

  • Ian Cover
    Ian CoverAug 20, 2022

    Just remember to add the dot on the file extensions, since the setting files.associations is associating files by their extension (e.g., ONE file my-file.html or ALL files *.html) to their language identifier, e.g. html and because its a JSON file, must be wrapped in double quotes, for example:

    "files.associations": {
        "index.html": "html",
        "*.css": "css",
        "App.js": "javascriptreact",
        "*.py": "python"
    }
    
    Enter fullscreen mode Exit fullscreen mode
  • Astowny
    AstownySep 8, 2022

    Amazing, thanks ! It worked for me.

  • KENDRICK KEETON
    KENDRICK KEETONOct 10, 2022

    Fixed it. Nice. I wonder why vscode doesn't have these setting by default?

  • Aziz-denden
    Aziz-dendenNov 11, 2022

    Image description
    emmet not working i need some help

  • CandentMind
    CandentMindDec 24, 2022

    This was very helpful and it worked, thanks a lot

  • shahzadndch
    shahzadndchJan 29, 2023

    Uploading image
    Emmet not working
    When i type ! In me file it should show options but it is not

  • shahzadndch
    shahzadndchJan 29, 2023

    Why not working ?
    Uploading image

  • Bonaventure Ogeto
    Bonaventure OgetoFeb 13, 2023

    Helpful!

  • graciamaria92
    graciamaria92Feb 27, 2023

    still not working. please, I really need help

    Image description

    • Pranav Arora
      Pranav AroraFeb 27, 2023

      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.

      • graciamaria92
        graciamaria92Feb 27, 2023

        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
          Pranav AroraFeb 27, 2023

          In line 10, replace the following snippet:

          "files.associations": {
          "index.html": "html",
          "*.css": "css",
          "App.js": "javascriptreact",
          "*.py": "python"
          }

          • graciamaria92
            graciamaria92Feb 27, 2023

            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
              graciamaria92Feb 27, 2023

              Image description

              • Pranav Arora
                Pranav AroraMar 1, 2023

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

      • Govind1326
        Govind1326May 26, 2023

        hello sir..

  • AbdulmunimFiras
    AbdulmunimFirasJun 23, 2023

    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??
  • Vidhan Pandey
    Vidhan PandeyOct 1, 2023

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

    • Pranav Arora
      Pranav AroraJun 15, 2024

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

  • Nicolás Rafales
    Nicolás RafalesJan 28, 2024

    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
      Pranav AroraJun 15, 2024

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

  • Pranav Arora
    Pranav AroraJun 15, 2024

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

  • Sumit Tiwari
    Sumit TiwariJul 4, 2024

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

  • Sumit Tiwari
    Sumit TiwariJul 4, 2024

    Image description

  • Kim Leng
    Kim LengAug 11, 2024

    Help please
    Uploading image

  • Nayan
    NayanFeb 18, 2025

    very helpful sir appretiated

Add comment