Sublime Text plugin Emmet

Reprint: http://www.w3cplus.com/tools/using-emmet-speed-front-end-web-development.html

Formerly known as Zen Coding, the Emmet plugin is a plug-in for a text editor that helps you quickly write HTML and CSS code to accelerate web front-end development. As early as 2009, Sergey Chikuyonok wrote an article proposing new ways to write HTML and CSS. This revolutionary plugin refers to Zen Coding, which has reached a new level after years of effort and help from many developers. That's what we call the Emme plugin today.

In this article, we will learn how to use the Emmet syntax to generate HTML and CSS code.

Installing the Emmet Plugin

Emmet is just a plug-in for a text editor, and if you want to make it work, you have to install it into your favorite text editor. So far, many popular text editors have supported the Emmet plugin, which means that many popular text editors can install the plugin.

Click on the link below and follow the instructions to install the Emmet plugin for the corresponding text editor:

• Sublime Text
• Eclipse
• TextMate
• Coda
• Espresso
• Chocolat
• notepad++
• Brackets
• NetBeans
• Adobe Dreamweaver

How does it work?

In the development of Web front-end, we have to face a cruel reality. It takes a while to write HTML code, because we spend a lot of time writing HTML tags, attributes, quotes, and so on, as well as writing CSS with lots of attributes, attribute values, curly braces, and semicolons. Of course, most of the text editors are more or less with the Code auto-hint function, at the time of development, the help is very busy, but still need to manually enter a lot of code. and Emmet plug-in, integration of a lot of abbreviations, everyone in the development only need to enter a simple abbreviation, press the tab key or ctrl+E key to expand the required code snippet.

Emmet and HTML

Assuming you've successfully installed the Emmet plugin for your favorite text editor, let's take a quick look at how to use Emmet to help you quickly write your HTML tags.

Emmet uses the defined abbreviations to generate the elements. His syntax is very similar to the CSS selector: ul>li>img+p 

Once you've written your initials, press the tab key (I'm using the sublime text editor) to generate the code you requested. The example above will produce the following code:

<ul>    <Li>        <imgsrc=""alt="">        <P></P>    </Li></ul>

Earlier in the "front-end development must!" Emmet User's Manual The article details some code examples of Emmet generating HTML code. Next, let's take a closer look at the Emmet syntax to see how to create HTML tags with some more complex abbreviations.

Create an initial document

Any HTML file has some default document structure. Using Emmet to create takes less than a second. Just enter ! or html:5 , then click on the tab key and you'll see a HTML5 doctype default tag.

• html:5or ! : HTML5 document Type
• html:xt: XHTML Transition Document Type
• html:xs: XHTML Strict Document type
• html:4t: HTML4 Transition Document Type
• html:4s: HTML4 Strict Document type

Child elements >

>You can use operators to build elements that are nested with each other:

 section>div>p 

The code above generates the following code:

<  Section >    < Div >        < P ></ P >    </ Div > </  Section >

Adjacent elements +

+You can use operators to generate elements that are adjacent to each other:

 section+div+p 

The code above generates the following code:

<  Section ></  Section > < Div ></ Div > < P ></ P >

Return to the previous layer ^

With the ^ operator, you can return your code to the previous layer. This method works well when you want to get back to the previous layer when you use > nested elements.

 section>div>p>a^p 

This abbreviation places two paragraph elements div inside, but only the first paragraph contains a link.

< Section>    <Div>        <P><ahref=""></a></P>        <P></P>    </Div></ Section>

In fact, this is equivalent to:

 section>div>(p>a)+p 

Multiplication *

If you want to generate multiple identical elements at once, such as the Li in the list, you can use the multiplication operator * :

 ul>li*5 

The above code will generate no one li :

<ul>    <Li></Li>    <Li></Li>    <Li></Li>    <Li></Li>    <Li></Li></ul>

In addition to being able to generate multiple identical labels at once, we can also $ increment by symbols, decreasing by symbols, and [email protected] naming them [email protected]*5 from the third start in such a way:

Combination

To make more efficient use of nesting, we often make some code snippets. In Emmet you can look at () a simple example by combining a block together:

 ul>(li>a)*3 

The code above generates 3 li , and each li of them is set to one a :

<ul>    <Li><ahref=""></a></Li>    <Li><ahref=""></a></Li>    <Li><ahref=""></a></Li></ul>   

In one of our pages, we often include three parts of the page header, body, and footer, and many times we can quickly generate valid code by making a combination of all of them:

Quickly add class names, IDs, text, and attributes

In Emmet, there is also an effect that can quickly help you add class names, IDs, text, and attributes.

• Using the E#ID Add ID name
• Using the E.class Add class name
• Using the E[attr] Add property
• Using E{text} Add text

Omitting a label signature

Tag names can be omitted from the Emmet, which, by default .item , div.item is consistent with the action <div class="item"></div> . In practice, there are several situations:

• uland ol Middle input refers to theli
• table, tbody , thead and tfoot refers totr
• trthe middle finger istd
• selectand optgroup refers to theoption

A more detailed introduction to Emmet and HTML can be read: Matt West's "Using Emmet to speed up front-end Web development", Zeno Rocha's Goodbye, Zen Coding. Hello, emmet! and white tooth "front-end development must!" Emmet User Manual "

Emmet and CSS

Many articles describe how Emmet and HTML are implemented, but Josh Medeski's Turbo-charge Your CSS with Emmet details the implementation between Emmet and CSS. The following code and pictures come mainly from this article.

Property

CSS provides the values of properties, such as font-size , margin and padding so on:

Emmet defines all known CSS properties and abbreviations. So the border-bottom abbreviation is bdb , the border-top abbreviation is bdt . As the following example font-size abbreviations are fz :

Assuming you type in your editor fz , and then press the tab key, Emmet is like a magician who turns the abbreviation into a valid CSS and places it where your cursor is.

Property value

Now that we have a look at the properties of the CSS, it just needs to add a value. This is done with a combination of abbreviations and required values. For example, fz18 the output will be font-size:18px . You don't need to enter px because Emmet will be in its unit px . If a project does not have a single unit (such as font-weight ), Emmet will be smart and he will not add pixel units.

Unit

If you're using a pixel () unit that's not often used in CSS px , what would that be? Yes em ,,, rem % ex and px ? Then these units can be used in Emmet. Each unit in the Emmet has its own abbreviated form:

• px→ Default
• p→%
• e→em
• r→rem
• x→ex

To use a single unit, you only need to use the abbreviated unit value after the value. The following example uses a em definition font-size :

Multiple units

Some of the genus trunk in CSS, for example margin , allow multiple values. To do this in Emmet, you only need to use dashes () between each value - . To take a look at the following example, give a body definition margin of four values:

Color

Prefixes are used in Emmet, followed by # color values, but different characters will output different hexadecimal codes. Take a look at some examples:

• ＃1→＃111111
• ＃E0→＃e0e0e0
• ＃FC0→＃FFCC00

The following definition c#2 defines body the color value that will be output #222 :

!important

Although !important not used frequently in CSS, Emmet also has a certain abbreviation. Add ! it to automatically generate:

Multi-attribute

Now we have a basic understanding of Emmet CSS features, and it's time to put them together. is similar to the functionality of adjacent elements in Emmet and HTML. You can use the plus + operator to create multiple properties. Let's look at a simple example:

Example

Remember, you can use all abbreviations or separate them. This is not very important, the key is that you have to use it correctly, it makes it easier for you to write your CSS. Here's an animation that he gives to div.panel create some styles:

The above sample code and demo are from the Turbo-charge Your CSS with Emmet of Josh Medeski.

Summarize

Emmet is a powerful tool, also known as a high-speed coding tool that allows you to spend less time doing the same thing without having to create your own code snippets manually. Emmet is inspired by CSS selectors and can be used in all major text editors to adapt to the developer's workflow.

Keep in mind that you can add any new tools to your workflow, and this learning process is also a curve, but you don't spend more time doing the same things. You just need regular access to the Emmet documentation, and you'll be familiar with all the features of HTML and CSS in Emmet. Let you think less, write less, and implement more of the code you want.

PS: (1) Sublime plug-in installation method: Http://www.cnblogs.com/bananaplan/p/Sublime-Text-3-Powerful.html

(2) Sublime Text3 's usage experience: Https://github.com/jikeytang/sublime-text

Sublime Text plugin Emmet