Sublime Text Common Plugin

Prerequisite: The package control must be installed first.

How to install the plugin: Ctrl + Shift + P, enter the package Control:install, wait a moment to appear in the selection box, enter the plugin you want to install (auto search), enter, wait, restart, Enjoy it!

How to view plugins: Preference, package setting, package control, Setting-user;

How to uninstall the plugin: Ctrl + Shift + P, enter the package control:remove, wait a moment for the installation to appear, select, enter, over!

Introduction of two commonly used plugins: Emmet, autoprefixer;

First, Emmet

Front end must back, originally called Zen Coding,

1. Skip Div

The first trick is to skip div,emment and be very clear about what you need to enter, you just need to enter class or Id,emmet will automatically help you generate the correct div. As follows:

As you can see, whether or not you add Div,emmet will automatically generate the need for DIV elements.

Ambiguous label name

This technique belongs to the implicit tag names feature, you do not need to specify DIV or Li,emmet will automatically help you build, as follows:

2. Chain abbreviation with DOM navigation

If you use Emmet to extend a simple class name to generate a div. This way can help you save a lot of time. You just have to remember the following syntax:

> Child nodes: Add an element in the next layer of the DOM tree

+ Same level: Add create an element at the same level in the DOM tree

^ to the top: Add a layer up to create an element.

Up one level

You can climb up multiple layers if you want, as follows:

3. Use grouping to simplify your code structure

There are times when you might find it more complicated to use the up notation, and it might be more reasonable to use grouping. As follows:

A more complex example, as follows:

4. Inserting text and attributes

If you need to generate HTML, the content and attributes are often added to your needs. Many developers just use Emmet to build the framework and then add content. In fact, you can add both properties and content during the process of generating the page frame.

As you can see from the code below, the text and attributes you enter can be generated by curly braces and brackets, respectively.

5. Add more than one class to an element

This is very simple, you just need to use a comma to add more than one class, as follows:

6. Repeat add

This may be the most comfortable operation to help you repeat the addition of elements:

If you integrate the grouping functionality, you will be able to handle more complex HTML generation:

7. Automatic list Count

If you need to generate HTML elements sequentially, this technique you must like, using the $ notation can help you to generate a series of numbers that support Class,id, attributes, content, and so on. As follows:

Note If you need to generate a 2-bit number, use two $ symbols.

Second, Autoprefixer

Incompatible CSS3 tag name prefixes are sometimes annoying, but don't worry:

Sublime Text Common Plugin