Sublime Text is a popular code editor software and an advanced text editor for HTML and prose that runs on Linux, Windows and Mac OS X. It is also a text editor software that many programmers like to use. The following focuses on the practical skills related to Sublime Text.
Plugin installation
-
Sublime3 plug-in method
Method 1: Direct installation
and installation of Sublime text 3 plug-in is very convenient, you can directly download the installation package and extract it to the Packages directory (menu->preferences->Browse Packages).
Method 2: Install using Package Control componentsPress Ctrl+ ` (this symbol is the key above the tab key) to call up the console (note: avoid hotkey conflicts),
paste the following code into the command line and press 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()) -
Restart Sublime Text 3 after the download is complete.
- If you see the package control item in Perferences->, the installation is successful.
- How to install plugins with Package Control:
Press Ctrl+Shift+p to bring up the command panel, enter install to bring up the Install Package option and press Enter, then select the plugin to be installed in the list.
Below are some useful Sublime Text 3 plugins
- Emmet (formerly Zen Coding)
A fast way to write html/css
Note: When installing Emmet, its dependent PyV8 binary library will also be automatically installed. It will take a long time to install the PyV8 library. You can see the installation process status in the lower left corner of Sublime
Plugin package supporting hmtl5 specification
How to use: Create a new html document (be sure to save it as an HTML document!) > enter html5 (or html:5) > hit the Tab key > automatically complete the html5 specification document
- jQuery
A plugin package that supports the JQuery specification
- JSFormat
JS code formatting plugin.
How to use: Use the shortcut key ctrl+alt+f
- SublimeLinter
A plugin that supports lint syntax, can highlight lines of code that linter thinks have errors, and also supports highlighting some special comments, such as "TODO", so that they can be quickly located. (IntelliJ IDEA's TODO function is very good, although this plugin is not comparable, but it is enough)
- BracketHighlighter
Similar to code matching, it can match ranges within symbols such as parentheses, quotes, etc.
How to use: The system defaults to white highlighting, you can use the method described in the link for custom configuration
http://www.360doc.com/content/14/1111/15/15077656_424301780.shtml
- Alignment
Code alignment, such as writing several variables, select these lines, Ctrl+Alt+A, wow, all.
- Ctags
Function jump, on my computer is Alt+click the function name, it will jump to the corresponding function
- DocBlockr
Annotation plugin to generate beautiful annotations. Standard comments, including function names, parameters, return values, etc., are displayed on multiple lines, eliminating manual writing.
See 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's plug-in Emmet is definitely your favorite - it uses the syntax of imitating CSS selectors to generate code, which greatly improves the speed of HTML/CSS code writing. Regarding the installation of plug-ins, you can Refer to the above method to install the Emmet socket to
demonstrate the function as follows:
1. Quickly write HTML code
- initialization
HTML documents need to contain some fixed tags, such as <html>, <head>, <body>, etc. Now you only need 1 second to enter these tags. For example, enter "!" or "html:5", then press the Tab key:
html:5 or !: for HTML5 doctype
html:xt: for XHTML transitional doctype
html:4s: for HTML4 strict doctype
- Easily add classes, ids, text and attributes
Enter the element name and ID continuously, and Emmet will automatically complete it for you. For example, if you enter p#foo, the Html code will be automatically generated:
<p id="foo"></p>
Enter the class and id continuously, such as p.bar# foo, the Html code will be automatically generated:
<p class="bar" id="foo"></p>
Let's take a look at how to define the content and attributes of HTML elements. You can automatically generate the following Html code by typing h1{foo} and a[href=#]:
<h1>foo</h1>
<a href="#"></a> 
- nested
Now you only need 1 line of code to achieve nesting of tags.
: Sub-element symbol, indicating nested elements
+: Label symbol at the same level
^: The label before the symbol can be upgraded by one line
. The effect is shown in the following figure:
- grouping
You can quickly generate some code blocks by nesting and parentheses, such as typing (.foo>h1)+(.bar>h2), the following Html code will be automatically generated:
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div> 
- implicit label
Declare a tag with a class, just type div.item and <div class="item"></div> will be generated.
In the past version, you can omit the div, that is, enter .item to generate <div class="item"></div>. Now if only .item is entered, Emmet will judge 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: used in table, tbody, thead and tfoot
td: used in tr
option: used in select and optgroup
- define multiple elements
To define multiple elements, you can use symbols. For example, ul>li 3 can generate the following Html code:
<ul>
<li></li>
<li></li>
<li></li>
</ul> 
- 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> 
2. CSS abbreviations
1. Value For
example to define the width of an element, just enter w100 to generate the Css code width: 100px;
In addition to px, other units can also be generated, such as input h10p+m5e, the result is the following Css code:
height: 10%;
margin: 5em; List of unit aliases:
p for %
e for em
x for ex
2. Additional properties You
may have learned some abbreviations before, such as @f, which can generate Css code:
@font-face {
font-family:;
src:url();
} Some other properties, such as background-image, border-radius, font, @font-face, text-outline, text-shadow and other extra options, can be generated by the "+" symbol, such as typing @f+, will generate Css Code:
@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 not sure about some abbreviations, Emmet will match the closest syntax according to your input, such as input ov:h, ov-h, ovh and oh, the generated code is the same Css code:overflow: hidden;
4. Supplier prefix
If you enter a non-W3C standard CSS property, Emmet will automatically add the vendor prefix. For example, if you enter trs, the CSS code will be generated:
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ; 
You can also prefix any attribute with a "-" sign, or prefix the attribute. For example, entering -super-foo: will generate Css code:
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ; If you don't want to add all the prefixes, you can use abbreviations to specify, for example -wm-trf means add only -webkit and -moz prefixes to generate Css code:
-webkit-transform: ;
-moz-transform: ;
transform: ; The prefixes are abbreviated as follows:
w for -webkit-
m for -moz-
s for -ms-
o for -o-
5, gradient
Enter lg(left, #fff 50%, #000), the following css code will be generated:
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); 
3. Additional functions
Generate Lorem ipsum text
Lorem ipsum refers to a Latin article that is often used in the field of typesetting design. The main purpose is to test the effect of the article or text in different fonts and layouts. With Emmet, you can generate these words by simply typing lorem or lipsum. You can also specify the number of words, such as lorem10, which will generate:
Like
the pain itself Your freedom is selected.
4. Customization
You can also customize the Emmet plugin:
add new abbreviations or update existing abbreviations, modify the snippets.json file
to change the behavior of Emmet filters and operations, modify the preferences.json file
to define how to generate HTML or XML code, and modify syntaxProfiles.json file
5. Plug-ins for different editors
The editors supported by Emmet are as follows (link is the Emmet plugin for this editor):
Sublime Text 2
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (added via "Install Mixin" dialog)
Komodo Edit/IDE (Added via Tools → Add-ons menu)
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets
related documentation: http://docs.emmet.io/ (It contains a Demo, you can experiment with the abbreviations mentioned in the text)
The input method in sublime text3 does not follow the cursor problem
There are two ways to use the plug-in IMESupport or plug-in installation:
1. Download and install the source code package on the
GitHub page: https://github.com/chikatoike/IMESupport
After downloading,
directly download the installation package and extract it to the Packages directory (menu->preferences-> Browse Packages). 
2. Online installation
List the plug-in list through the Install Package option and search for IMESupport to install.
See the package control in Perferences->Click 
then click install package and then search for the IMESupport plug-in and click to install.
If you have any questions, you can leave a message, take the time to answer, if you find it useful, give it a like and support ( ^_^ )!