Installation of notepad++ plug-in Emmet and Python script

Recently in a project, involving a large number of HTML, CSS code writing, manual writing code efficiency is really low. So want to search, there is no notepad++ plug-in can support auto-generated, sure enough. Emmet, this artifact is actually the Zen Coding upgrade version, it can greatly improve the efficiency of code writing, and provides a very concise syntax rules, immediately generate the corresponding HTML structure or CSS code, while there are a variety of useful features to help the front-end development.
Emmet supports a variety of editors, such as sublime Text 2,textmate 1.x,eclipse/aptana,espresso,notepad++. I'm used to writing code under notepad++, so this article describes how to install and use it under notepad++.

1. Download Emmet and Python Script
Emmet requires support for Python Script, so these two plugins must be installed for use at the same time.
See:https://github.com/emmetio/npp

：
pythonscript_full_0.9.2.0

Emmet's notepad++ Plugin

2. Installation
Emmet installation is relatively simple, download after the decompression copy to the notepad++ installation directory plugins can be.
The installation of the Python script was slightly more complicated, and I took some detours before I could fix it. At first thought that the extracted files to plugins under the line, but the start notepad++ always error.
So I opened the Python Script help file and looked through the installation manual before I could figure it out.
After downloading the Pythonscript_full_0.9.2.0.zip, extract the Python27.dll file to the root of the notepad++ installation directory , and copy the entire contents of the Plugins folder to notepad++ Under the plugins of the installation directory.
To make it clear, the directory structure of the excerpt Python Script is as follows:

notepad++ (notepad++ Installation home directory, usually under "C:\Program Files") + |--Python27.dll (placed in notepad++ installation home directory, and Notepad++.exe belong to the same directory) +-- Plugins                      |--PythonScript.dll           |           | --Pythonscript           |              |   | --lib | | | |     | --(*.py)   many *.py files and subdirectories           | | |   | --Scripts           |                        |             | --(scripts and some examples)           |           |           | --Doc           | |     | --Pythonscript           |                        |             | --Pythonscript.chm (Pythonscript help document, English version)

3, Emmet's work flow
After installing Emmet, it is strongly recommended that you change the keyboard shortcut for Expand abbreviation to the TAB key.
Open notepad++settings > Shortcut Mapper ... dialog box, switch to plugin commands, select the Expand abbreviation item,

(Expand abbreviation (ctrl+e): expand abbreviation usage: After you enter an abbreviated code, press the shortcut key directly at the end of the code to get the complete code. )

Modify its shortcut key to the TAB key.

Then, you can follow the Emmet workflow to work:
Open HTML or CSS file, press TAB---build by grammar writing instructions!

4, the use of Emmet tutorial

Expand abbreviation (ctrl+e): Expand Abbreviations

Usage: After entering the abbreviated code, press the shortcut key directly at the end of the code to get the complete code.

Wrap with abbreviation (CTRL+SHIFT+A): Nested parent element

Usage: Select the tag that you want to nest the parent element, press the shortcut key, enter the parent tag in the popup dialog box. Cases:

1 2 3 4 5

list1 list2 list3 list4 list5

Select the above and press "enter" after pressing "Ctrl+shift+a" to enter ul.nav>li.item-$*>a[title in the popup dialog box, then the following code will be generated

1234567

< ul class = "NAV" > &NBSP;&NBSP;&NBSP;&NBSP; < li class = "item-1" >< a Code class= "XML Color1" >href = title = >list1</ a ></ li > &NBSP;&NBSP;&NBSP;&NBSP; < li class = "item-2" >< a Code class= "XML Color1" >href = title = >list2</ a ></ li > &NBSP;&NBSP;&NBSP;&NBSP; < li class = "item-3" >< a Code class= "XML Color1" >href = title = >list3</ a ></ li > &NBSP;&NBSP;&NBSP;&NBSP; < li class = "item-4" >< a Code class= "XML Color1" >href = title = >list4</ a ></ li >     <li class="item-5"><a href="" title="">list5</a></li> </ul>

Balance Taginward/outward (ctrl+shift+d): Check code block

Select the tag where the current cursor is located, and press again to select its parent tag.

Go to next/previous Edit points (ctrl+alt+]/ctrl+alt+[): Go to Next/previous edit point

Merge Lines (ctrl+alt+m): Merging rows

Merges the selected multiline code into one line. This is handy when compressing the CSS and JS code as a line. CTRL + A, then ctrl+alt+m, two can be done, eliminating the use of compression tools trouble. (This, of course, simply merges the code into a single line, and does not do more in-depth code compression)

Toggle Comment (alt+/): Add, Remove comments

Comment out the code block where the cursor is located (notepad++ 's own ctrl+shift+q can also be used to annotate the code)

Split/join tag (ctrl + '): Empty tag Conversion

For example <div></div> , will be converted to <div/> , reverse also.

Remove tag (ctrl+shift+ '): Remove tag

For example <div>hello world</div> , the div tag will be removed, leaving Hello world.

zen-coding Common Abbreviations

1 2 3 4 5 6 7 8 9 Ten One A - - the -

html:4t (HTML 4.01 Transitional) html:4s (HTML 4.01) html:xt (XHTML 1.0) html:xs (XHTML 1.0 Strict) html:xxs (XHTML 1.1) html:5 (HTML5)   meta:utf, meta:compat style, link:css, link:print, link:favicon, link:rss, script, script:src   div, p, a, ul, ol, input:t, input:r   ol+, dl+, table+, tr+, select+, map+, optg+   cc:ie6, cc:ie, cc:noie

Can open C:\Program Files\notepad++\plugins\emmetnpp\emmet\snippets.json This JSON file to see, familiar with EMMETNPP some of the abbreviation rules.

Reference links

Installation of notepad++ plug-in Emmet and Python script