How to Solve HTML Skeleton Shortcut is not working in Visual Studio Code

Introduction

After installing a fresh install of a Visual Studio Code application as an IDE to develop application, there is something wrong. Actually, according to a simple assumption, the shortcut for defining HTML skeleton in an HTML file will be working normally. Instead of generating the HTML skeleton just by typing “!” and press the tab indentation button, it just normally display the “!” character.

Solution

Actually, the solution is already exist in another article. That article is an article with the title of ‘How to Install Emmet Extension for Shortcut Skeleton Template in Visual Studio Code’ in this link. There are several parts which is very important in order to solve the problem. The following are the simple descriptions of those parts :

1. The first part is the installation part of the suitable extension. In order to add functionality to generate HTML skeleton or HTML template, installing a suitable extension is one of the answer for that.

2. But installing emmet extension is not the only step to achieve it. In other words, installing emmet extension alone is not enough for the HTML template or HTML skeleton. There is an additional step for configuring the Emmet extension so that the functionality for generating HTML skeleton or HTML template will run properly. Just access the Emmet extension’s settings. Click the link with the label of ‘Edit settings.json’ in the Preferences part. There will be the original content of ‘settings.json’ as follows :

   {
       "editor.suggestSelection": "first",
       "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
   }
   

3. Edit the ‘settings.json’ file which is going to add the functionality of Emmet extension so that it will generate HTML skeleton or HTML template by typing one shortcut and a tab. Those configuration lines are in the following :

       
   "files.associations": {"html":"html"},     
   "emmet.triggerExpansionOnTab": true
   

4. So, overall configuration for Emmet extension to perform its function for generating template, skeleton or boilerplate for HTML exist as follows :

   {
       "editor.suggestSelection": "first",
       "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
       "files.associations": {"html":"html"},
       "emmet.triggerExpansionOnTab": true
   }
   

   Where the above full and complete Emmet extension’s configuration exist as in the following image :

5. Last but not least, just type “!” followed by typing the tab indent to generate the HTML template, skeleton or boilerplate inside an HTML format file.