Emmet is a set of plugins, which enables the user to use a special syntax that can be transformed to HTML, JSX, or CSS. It is a productivity boost that allows the user to quickly write the code. In WebStorm, the configurations are made in the settings pages found under the Settings | Editor | Emmet page. There are separate configuration pages for General, HMTL, JSX, and CSS settings, as seen in the following screenshot:
Before we start, make sure that you have the Bootstrap example open, and then open the index.html and main.css files.
While you type your Emmet code, WebStorm will show a preview window if you have selected this in the HTML settings page. It is a good idea to do that in the beginning while you get accustomed to the syntax. The preview will show what your final code will look like.
Now you have to insert the sample in the index.html file after <h1>, so position your caret there, and type ul#features>li.feature*4. Then press the Tab key. This will expand...