How to Install Emmet Extension for Shortcut Skeleton Template in Visual Studio Code

By Posted on

Introduction

There is an application which is very useful as an editor. Not a normal text editor but it has a specific function for editing files which are parts of any form of application source codes. For an example, in a web application development, HTML file is also may become part of the source codes. But normally, it will be require an amount of effort of time just to create a simple and normal HTML skeleton file. That is where a shortcut which is available in Visual Studio Code will come in handy. This article is going to explain how to install the necessary extension for enabling that shortcut. Using the shortcut, it will save effort and time just for creating the necessary skeleton or template of any specific file.

Installing Emmet Extension in Visual Studio Code

So, the following is the step for installing emmet extension in the Visual Studio Code application :

  1. First of all, run the Visual Studio Code application. The following is the image appearance of the Visual Studio Code application :

    How to Install Emmet Extension for Shortcut Skeleton Template in Visual Studio Code
    How to Install Emmet Extension for Shortcut Skeleton Template in Visual Studio Code

  2. After that, just access the extensions menu as follows :

    How to Install Emmet Extension for Shortcut Skeleton Template in Visual Studio Code
    How to Install Emmet Extension for Shortcut Skeleton Template in Visual Studio Code

    In the above image, searching using the ’emmet’ keyword will list several extension containing ‘Emmet’ as part of the extension. In this context, normally just read the description of the extension. If there are any suitable extensions, just click install to start installing those extensions. As for the image above, it has already been installed with ‘Mithril Emmet’ extension. There are several extensions so choose the most suitable one.

Configuring Emmet Extension in Visual Studio Code

  1. After successfully installing ‘Mithril Emmet’ extension, do not forget to configure it. The configuration of it exist in the ‘settings.json’ file of the Mithril Emmet extension. Just go the Settings menu and choose Extensions. In the Extensions, search for Emmet as in the following image :

    How to Install Emmet Extension for Shortcut Skeleton Template in Visual Studio Code
    How to Install Emmet Extension for Shortcut Skeleton Template in Visual Studio Code

    Click the link Edit in settings.json under the Preferences part. There will be tab displaying the content of the original ‘settings.json’ for the Emmet extension’s preferences setting.

  2. The original one for the context of the ‘settings.json’ for the Emmet extensions’s preferences settings available as follows : 

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

    For the Emmet extension run properly generating HTML skeleton or template just by typing a shortcut followed with a tab type, just add another configuration lines. That line are in the following : 

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

    So, the content of ‘settings.json’ overall will be as follows : 

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

    The following is the final content of ‘settings.json’ in the form of an image :

    How to Install Emmet Extension for Shortcut Skeleton Template in Visual Studio Code
    How to Install Emmet Extension for Shortcut Skeleton Template in Visual Studio Code

  3. Finally, in order to try the extensions, the easiest one is the typing the exclamation character (!) and end it by typing the tab button. It will automatically generate an HTML template or skeleton as follows : 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

Leave a Reply