In this blog post, we will see how to enable the Emmet Plugin to generate the HTML code snippets easily.

Emmet Plugin

The Emmet Plugin is very famous and useful tool that is pluggable with most of the text editors and IDEs for the snippet generation, like the barebone boilerplate code for HTML, and other Programming Langauges like Java etc., where you need some basic code to start with and you would not feel like typing everything from the scratch adds fun after sometime :)

Install in Atom.io

Installing a plugin is very easy in the Atom editor, as you can follow any of the following two.

  1. Search for a package inside the Atom Editor itself. Settings → Package.
Atom.io Editor Package Settings
  1. Use Ctrl + Shift + P to invoke the Install Package option inside the Atom.io editor.
Atom.io Editor Install Package using Ctrl+Shift+P

It takes you to the same Settings → Package screen. You can search for a particular package and click on Install.

Install Packages

Note:

  1. If the package is installed already, you get the buttons to Uninstall and Disable.
  2. If the package is not yet installed, you get the button install to install in the local machine/atom editor.

Enbale in Atom.io

Please make sure that you restart the Atom IDE after you install the Emmet Plugin.

Even afterwards if it still does not work, you must not have chosen/specified the file type for the Atom editor to realize the semantics. For which you can either do a Save As OR press Ctrl + Shift + L (for Windows) to enable the File Type, with which Atom.

You should get the boilerplate code now filled with a keystroke :)

You see that a green color arrow mark enabled on the html line you typed, and you see the syntax enabled - all in caps with the right hand side -HTML in the screenshot. Press Enter key there and you get the full HTML5 skeleton in a fraction of a second :)

References

Cheers,
RM…
Raghavan alias Saravanan Muthu
08 Jul 2021 | Thu | 10:23:32 AM IST