[Nuag] Today I Learned - #2 Trigger Emmet Abbreviation Expansion On Tab for VS Code

What's up guys, here is another "Today I Learned" session.

How many people here will use code expansion tools to speed up their coding efficiency?

I guess many of you have been using it for quite a long time already. Me too!

Recently, I switch my main code editor from Sublime to VS code. Many people have recommended VS code over Sublime because VS code because VS code provides more user-friendly configurations and extensions for coders.

However, the transition was not so smooth as there are some VS code specific configurations needs to be set before use, which is not so straightforward for novices. One of the bigger headaches for me is the Emmet code expansion tool.

---

What Is Emmet?

Emmet is a code expansion tool that is designed to dramatically speed up the creation of HTML and CSS.

Let's see these gifs for the power of emmet.

source

source

Simply put, it allows you to type the abbreviations with a tab button press for a wordy HTML tag with specific properties. It is so useful that if you can't enable this feature you feel like you are handicapped once you taste the sweets of it.

So, how do I overcome my pain to enable this amazing feature on my new VS code editor?

After a long and boring search for the answer, I found that to continue to expand Emmet abbreviations and snippets using the Tab key, one needs to set/add

"emmet.triggerExpansionOnTab" to true and

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

under your workspace settings.

Tada! Now you can enjoy the powerful Emmet with VS code editor for your project!

Have a good day!