One-stop hands-on teaching you to learn sublime Text 3 (Plug-in installation, html/css sketch, input method does not follow the cursor)

Sublime text is a popular code editor software and also an advanced text editor for HTML and prose that can run on Linux,windows and Mac OS X. It is also a text editor software that many programmers like to use. Here's a little bit more about sublime text-related practical skills.

Plug-in Installation

1. Sublime3 plug-in method
   Method 1: Install directly
   Installing the sublime Text 3 plugin is convenient and can be downloaded directly from the installation package to the Packages directory (menu->preferences->browse Packages).
   Method 2: Install using the Package control component

   Press CTRL + ' (this symbol is the key above the TAB key) to bring up the console (note: Avoid hot-key conflicts)
   Paste the following code into the command line and enter:

   import urllib.request,os; pf = ‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), ‘wb‘).write(urllib.request.urlopen( ‘http://sublime.wbond.net/‘ + pf.replace(‘ ‘,‘%20‘)).read())

2. Restart Sublime Text 3 after the download is complete.

3. If you see the package control item in Perferences->, the installation succeeds.

4. To install a plugin using the package control method:

Press Ctrl+shift+p to bring up the command panel, enter install to bring up the Install Package option and enter, then select the plug-in you want to install in the list.

Here are some useful sublime Text 3 plugins

• Emmet (formerly Zen Coding)

A method for quickly writing HTML/CSS

Note: While installing Emmet, it will automatically install its dependent PyV8 binary library, install PyV8 Library for a long time, you can see the status of the installation process in the lower left corner of Sublime

Plug-in packages that support the HMTL5 specification

How to: Create a new HTML document (be sure to save it as an HTML document!) ) > Input HTML5 (or Html:5) > Keystroke tab > Auto-complete HTML5 specification document

• Jquery

Plug-in packages that support the jquery specification

• Jsformat

JS Code format plugin.

How to use: Use shortcut keys Ctrl+alt+f

• Sublimelinter

A plugin that supports lint syntax can highlight lines of code that Linter think is wrong, and also support highlighting special notes such as "TODO," which can be quickly positioned. (IntelliJ idea's Todo function is very good, this plug-in, although not comparable, but also enough for it)

• Brackethighlighter

Similar to code matching, you can match the range within parentheses, quotation marks, and so on.

How to use: The system defaults to white highlighting, you can use the link described method for custom configuration

Http://www.360doc.com/content/14/1111/15/15077656_424301780.shtml

• Alignment

Code alignment, such as writing a few variables, check these lines, Ctrl+alt+a, wow, qi.

• Ctags

function jump, on my computer is ALT + click on the function name, will jump to the corresponding function

• Doc? Blockr

Note the plug-in to generate beautiful annotations. Standard annotations, including function names, parameters, return values, and so on, are displayed in multiple lines, eliminating manual writing.

How to use: http://www.cnblogs.com/huangtailang/p/4499988.html

Html/css Sketch

If you are engaged in web front-end development, Sublime Text 3 plug-in Emmet is definitely your favorite-it uses the syntax of The imitation CSS selector to generate code, greatly improve the speed of html/css code writing, about the installation of plug-ins, you can refer to the above method to install Emmet rack can be
The following functions are shown:

First, quickly write HTML code

1. Initialization

HTML documents need to contain some fixed tags, such as

Html:5 or!: for HTML5 document types
HTML:XT: For XHTML transition Document types
Html:4s: For HTML4 Strict document types

2. Easily add classes, IDs, text, and attributes

Successive input element names and Id,emmet will automatically complete for you, such as entering P#foo, which automatically generates HTML code:
<p id= "foo" ></p>
Successive input classes and IDs, such as P.bar#foo, automatically generate HTML code:
<p class= "Bar" id= "foo" ></p>

Here's a look at how to define the content and properties of HTML elements. You can automatically generate the following HTML code by entering H1{foo} and a[href=#]:

3. Nesting

Now you just need 1 lines of code to implement the nesting of tags.

: A child element symbol that represents a nested element
+: Sibling tag symbol
^: You can raise the label in front of the symbol by one line
The effect is as follows:

4. Group

You can quickly generate blocks of code by nesting and parentheses, such as input (. foo>h1) + (. bar>h2), which automatically generates the following HTML code:

<div class="foo">    

5. Implicit tags

Declare a tag with a class, just enter Div.item, generate <div class= "item" ></div>.

In previous versions, you can omit the Div, which is the input. Item to generate <div class= "item" ></div>. Now if you enter only. Item, Emmet is judged based on the parent tag. For example, entering. Item in <ul> will generate <li class= "item" ></li>.

Here are all the implicit tag names:
Li: Used in UL and OL
TR: For table, Tbody, THEAD, and Tfoot
TD: Used in TR
Option: for Select and Optgroup

6. Define multiple elements

To define multiple elements, you can use symbols. For example, Ul>li3 can generate the following HTML code:

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

7. To define multiple elements with attributes

If you enter ul>li.item$*3, the following HTML code will be generated:

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

Second, the CSS abbreviation

1, the value
For example, to define the width of the element, just enter w100, you can generate CSS code width:100px;

In addition to PX, other units can be generated, such as input h10p+m5e, the result is the following CSS code:

height: 10%;  margin: 5em;  

List of unit aliases:
p =%
E means EM
X means ex

2. Additional Properties
Maybe you've already learned some abbreviations, like @f, that you can generate CSS code:

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

Some additional options, such as Background-image, Border-radius, Font, @font-face,text-outline, Text-shadow, etc., can be generated by the "+" symbol, such as input @f+, The CSS code will be generated:

@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;  }  

3. Fuzzy matching
If you are unsure of some abbreviations, Emmet will match your input to the closest syntax, such as input ov:h, ov-h, OVH, and oh, and the generated code is the same CSS code:
overflow: hidden;

4. Supplier prefix

If you enter a non-standard CSS property, Emmet will automatically add a vendor prefix, such as entering TRS, to generate CSS code:

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

You can also prefix any property with a "-" symbol, or you can add it to the attribute. For example, enter-super-foo: The CSS code will be generated:

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

If you do not want to add all the prefixes, you can use abbreviations to specify, such as-WM-TRF to add only-webkit and-moz prefixes, to generate CSS code:

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

The prefix is abbreviated as follows:
W indicates-webkit-
M represents-moz-
s represents-ms-
O indicates-o-
5. Gradient

Entering LG (left, #fff 50%, #000) generates the following CSS code:

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);  

Third, additional functions

Generate Lorem Ipsum text
Lorem ipsum refers to a Latin article commonly used in the field of typography, the main purpose of which is to test the effect of an article or text in different font and version types. With Emmet, you can simply enter Lorem or lipsum to generate the text. You can also specify the number of words, such as LOREM10, that will be generated:

Reference
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero Delectus.

Iv. Customization
You can also customize the Emmet plugin:
To add a new abbreviation or update an existing abbreviation, you can modify the Snippets.json file
Change the behavior of Emmet filters and actions to modify the Preferences.json file
Define how to generate HTML or XML code to modify the Syntaxprofiles.json file
V. Plugins for different editors

Emmet supports the following editor (linked to the Emmet plugin for the editor):
Sublime Text 2
TextMate 1.x
Eclipse/aptana
Coda 1.6 and 2.x
Espresso
Chocolat (added via the "Install Mixin" dialog box)
Komodo Edit/ide (added via tools→add-ons menu)
notepad++
PSPad
<textarea>
Codemirror2/3
Brackets
Related documents: http://docs.emmet.io/(which contains a demo, you can experiment with the abbreviations mentioned in the article)

Input method in sublime Text3 does not follow the cursor problem

Use plug-in imesupport, or plug-in two kinds of installation methods:
1. Download and install the source package
GitHub page: Https://github.com/chikatoike/IMESupport
Download good after
The direct download installation package is extracted to the Packages directory (menu->preferences->browse Packages).

2, online installation

A list of plugins is listed by the Install Package option, which can be searched for imesupport.
See the package control click in the Perferences->

Then click on the install package and search for the Imesupport plugin.

Have a question to leave a message, take time to answer, feel useful point of praise, Support (^_^)!

One-stop hands-on teaching you to learn sublime Text 3 (Plug-in installation, html/css sketch, input method does not follow the cursor)