Work with Emmet plugin in Notepad++

Coding HTML projects quickly requires additional tools for writing tags faster.  Time spent working in HTML is mostly spent typing tags.  Tools like Zen Coding or Emmet help speed up this task.

Long constructions, especially those with writing classes or ids, take a long time to type and are very routine. Projects like Zen Coding, or its further development Emmet, help programmers speed up and automate their coding process.

To start working with Emmet, first install the Emmet plugin for Notepad++ by opening Notepad++ and going to Plugins → Plugin Manager → Show Plugin Manager. Find Emmet on the list and install it. The plugin will ask you to install Python script. Agree to install it. However, this version of Python script, which comes from a repository, is out-of-date and will generate “unknown exception: error and “Python Script Plugin did not accept the script” when using Emmet. These errors can by fixed by downloading the latest version of Python script. Unpack the archive and copy to the folder where all the Notepad++ files are installed. If it will be necessary to replace some files – agree. Restart Notepad++ and begin the work.

Working principle with Emmet

The working principle of Emmet is simple — first type an abbreviated formula, then choose the option Expand Abbreviation (Ctrl+Alt+Enter).

To demonstrate how this works, open a new document and type html:5, then press Ctrl+Alt+Enter.

This converts:

To:

The Emmet plugin uses the code folding and supplements it. Here are some of the most common abbreviations.

To create any element with an id, use the syntax p#yy, where p is an element and yy is the id of the element. Similarly, the syntax for a class is — p.yy.

Will be deployed at:

Id and class can be combined with the syntax p.class#id. To add attributes, use the syntax p[title=”hello”]. This code will deploy in:

To add any element you just need to type its name: div, p, h1.

Contents can be added to an element by using braces. For example, the code h1{Hello} is converted into:

For sub-elements, use the selector: <

Construction div>p>span is converted into:

The sign + generates two elements of one level. For example, div+p will make:

The logic of the syntax is rather simple, isn’t it?

Typing lists is boring, long, and tiresome, especially if the lists contain hyperlinks. Emmet provides a much better solution for entering lists than typing one line of the list and copying it several times.  Consider the following example: ul>li*3>a[href=”#” title=”#”]

Note that the modifier *3 duplicated the line 3 times.

The shortcuts described above should be enough to help write any difficult HTML code.