最新消息:

Notepad++插件Python Script和Emmet的安装使用教程

软件技巧 大步 9494浏览 0评论

安装插件Python Script和Emmet:

最近在做一个项目,涉及到大量的HTML、CSS代码的编写,手动写代码效率实在是
低下。于是想搜索一下,有没有Notepad++插件可以支持自动生成的,果不其然还真有。Emmet,这款神器其实就是 Zen Coding
的升级版,它可以极大的提高代码编写的效率,并提供了一种非常简练的语法规则,立刻生成对应的 HTML 结构或者 CSS
代码,同时还有多种实用的功能帮助进行前端开发。

  Emmet支持多种编辑器,如Sublime Text 2,TextMate 1.x,Eclipse/Aptana,Espresso,Notepad++等。我习惯于在Notepad++下写代码,因此本文记述的是如何在Notepad++下安装和使用。

 

1、下载Emmet和Python Script
Emmet需要 Python Script 的支持,因此这两款插件必须同时安装才能使用。
详见:https://github.com/emmetio/npp

下载地址:
PythonScript_full_0.9.2.0

Emmet的Notepad++插件

2、安装
Emmet的安装比较简单,下载完解压后复制到Notepad++安装目录的plugins下即可。
Python Script的安装则稍稍复杂,我走了一些弯路后才搞定。一开始以为将解压后的文件扔到plugins下就行了,但启动Notepad++时总是报错。
于是我打开 Python Script 的帮助文件,看了一遍安装手册才搞明白。
下载完PythonScript_full_0.9.2.0.zip后解压,将python27.dll文件复制到Notepad++安装目录的根目录下,同时在plugins文件夹中的全部内容复制到Notepad++安装目录的plugins下。
为表达清楚,摘录Python Script 的目录结构如下:

3、Emmet的工作流程
安装完Emmet后,强烈建议更改 Expand Abbreviation 的键盘快捷键为Tab键。
打开Notepad++Settings > Shortcut Mapper…对话框,切换到 plugin commands,选中 Expand Abbreviation 项,修改其快捷键为Tab键即可。

然后,就可以按照 Emmet 的工作流程来干活了:
打开 HTML 或 CSS 文件->按语法编写指令->按下 TAB 键->生成!

 


使用Emmet教程:

Back in 2009, Sergey Chikuyonok wrote an article
to present a new way of writing HTML and CSS code. This revolutionary
plugin, called Zen Coding, has helped many developers through the years
and has now reached a new level.

Emmet, previously known as Zen Coding,
is the most productive and time-saving text-editor plugin you will ever
see. By instantly expanding simple abbreviations into complex code
snippets, Emmet can turn you into a more productive developer.

For those who prefer to watch instead of read, here is a summary of my favorite tricks.

How Does It Work?

Let’s face it: writing HTML code takes time, with all of those tags,
attributes, quotes, braces, etc. Of course, most text editors have code
completion, which helps a lot, but you still have to do a lot of typing.
Emmet instantly expands simple abbreviations into complex code
snippets.

HTML Abbreviations

Initializers

Getting started with a new HTML document takes less than a second now. Just type ! or html:5, hit “Tab,” and you’ll see an HTML5 doctype with a few tags to jumpstart your application.

initializers.gif

  • html:5 or ! for an HTML5 doctype
  • html:xt for an XHTML transitional doctype
  • html:4s for an HTML4 strict doctype

Easily Add Classes, IDs, Text and Attributes

Because Emmet’s syntax for describing elements is similar to CSS
selectors, getting used to it is very easy. Try mixing an element’s name
(e.g. p) with an identifier (e.g. p#description).

classes-ids.gif

Also, you can combine classes and IDs. For example, p.bar#foo will output this:

<p class="bar" id="foo"></p>

Now let’s see how to define content and attributes for your HTML elements. Curly brackets are used for content. So, h1{foo} will produce this:

<h1>foo</h1>

And square brackets are used for attributes. So, a[href=#] will generate this:

<a href="#"></a>

texts-attrs.gif

Nesting

By nesting abbreviations, you can build a whole page using just one line of code. First, the child operator, represented by >, allows you to nest elements. The sibling operator, represented by +, lets you place elements near each other, on the same level. Finally, the new climb-up operator, represented by ^, allows you to climb up one level in the tree.

nesting.gif

Grouping

To effectively take advantage of nesting without turning them into a
confusing mess of operators, you’ll need to group some pieces of code.
It’s like math — you just need to use parentheses around certain pieces.
For example, (.foo>h1)+(.bar>h2) will output this:

<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>

grouping.gif

Implicit Tag Names

To declare a tag with a class, just type div.item, and then it will generate <div class="item"></div>.

In the past, you could omit the tag name for a div; so, you just had to type .item and it would generate <div class="item"></div>.
Now Emmet is more intelligent. It looks at the parent tag name every
time you expand the abbreviation with an implicit name. So, if you
declare .item inside of a <ul>, it will generate <li class="item"></li> instead of <div class="item"></div>.

implicit-tags.gif

Here’s a list of all implicit tag names:

  • li for ul and ol
  • tr for table, tbody, thead and tfoot
  • td for tr
  • option for select and optgroup

Multiplication

You can define how many times an element should be outputted by using the * operator. So, ul>li*3 will produce:

<ul>
<li></li>
<li></li>
<li></li>
</ul>

multiplication.gif

Numbering

What about mixing the multiplication feature with some item numbering? Just place the $
operator in the element’s name, the attribute’s name or the attribute’s
value to output the number of currently repeated elements. If you write
ul>li.item$*3, it will output:

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>

numbering.gif

Try It Now!

Why not try it right now? Go ahead: type in an Emmet HTML abbreviation, and hit the Tab key.

CSS Abbreviations

Values

Emmet is about more than just HTML elements. You can inject values
directly into CSS abbreviations, too. Let’s say you want to define a
width. Type w100, and it will generate:

width: 100px;

values.gif

Pixel is not the only unit available. Try running h10p+m5e, and it will output:

height: 10%;
margin: 5em;

Here’s a list with a few aliases:

  • p → %
  • e → em
  • x → ex

Extra Operator

You already know many intuitive abbreviations, such as @f, which produces:

@font-face {
font-family:;
src:url();
}

Some properties — such as background-image, border-radius, font, @font-face, text-outline, text-shadow — have some extra options that you can activate by using the + sign. For example, @f+ will output:

@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}

extra.gif

Fuzzy Search

The CSS module uses fuzzy search to find unknown abbreviations. So,
every time you enter an unknown abbreviation, Emmet will try to find the
closest snippet definition. For example, ov:h and ov-h and ovh and oh will generate the same:

overflow: hidden;

fuzzy-search.gif

Vendor Prefixes

CSS3 is awesome, but those vendor prefixes are a real pain for all of
us. Well, not anymore — Emmet has abbreviations for them, too. For
example, the trs abbreviation will expand to:

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

vendor-prefixes.gif

You can also add prefixes to any kind of element. You just need to use the - prefix. So, -super-foo will expand to:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

What if you don’t want all of those prefixes? No problem. You can define exactly which browsers to support. For example, -wm-trf will output:

-webkit-transform: ;
-moz-transform: ;
transform: ;

  • w-webkit-
  • m-moz-
  • s-ms-
  • o-o-

Gradients

Speaking of annoying CSS3 features, we cannot forget gradients. Those
long definitions with different notations can now be easily replaced
with a concise, bulletproof abbreviation. Type lg(left, #fff 50%, #000), and the output will be:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

gradient.gif

Try It Now!

Had enough of the animated GIFs? Go ahead — type an Emmet CSS abbreviation, and hit the Tab key.

Extras

Lorem Ipsum

Forget about those third-party services that generate “Lorem ipsum”
text. Now you can do that right in your editor. Just use the lorem or lipsum abbreviations. You can specify how many words to generate. For instance, lorem10 will output:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

lorem.gif

Also, lorem can be chained to other elements. So, p*3>lorem5 will generate:

<p>Lorem ipsum dolor sit amet.</p>
<p>Voluptates esse aliquam asperiores sunt.</p>
<p>Fugiat eaque laudantium explicabo omnis!</p>

Customization

Emmet offers a wide range of tweaks that you can use to fine-tune
your plugin experience. There are three files you can edit to do this:

And A Lot More!

This is just the beginning. Emmet has a lot of other cool features, such as encoding and decoding images to data:URL, updating image sizes and incrementing and decrementing numbers.

Go check out the new website, the awesome documentation and the handy cheat sheet!

Supported Editors

If you are wondering, “Will it work in my text editor?,” The answer
is, “Oh yes, my friend!” A lot of editors are supported, and I hope you
find yours in the list below.

And You?

What are your favorite tricks? Leave a comment below. Now it’s your turn to share your favorite tricks.

 

 
来自为知笔记(Wiz)

转载请注明:大步's Blog » Notepad++插件Python Script和Emmet的安装使用教程

SiteMap