Sublime Text 3 Plugin installation and use of shortcut keys

Sublime Text 3 plugin installation and use of shortcut keys 1. Download and install sublime Text3

To the official website https://www.sublimetext.com/3 download, the fool installs, here omits the thousand words, then opens can use. 2. Install the package Control

Use CTRL + ' shortcut keys or open the command line from the View->show Console menu, and paste the following code to run:

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

1 1

After completing the restart sublime, you can see the package settings and the package control two submenu under the Preferences menu.

To install a plugin using the package control method:
1, use the shortcut key ctrl+shift+p (if cannot be adjusted out, may conflict with other, my is with Sogou Wubi Input Method of a shortcut key conflict) or through Tools->command Palette bring up the command panel
2. Enter install to bring up the Install Package option and enter, then select the plugin to install in the list or type the name of the plugin you want to install directly in the input box.

Well, once you know how to use the package control, we'll happily build our own editor. second, you deserve to have a common plug-in 1, Emmet

You can quickly write html/css.
Note: While installing Emmet, it will automatically install its dependent PyV8 binary library, install PyV8 library for a longer period of time, you can see the installation process status in the lower left corner of Sublime 2, HTML5

Support HMTL5 Specification plug-in package, with the Emmet plug-in with the use of better results
How to use: Create a new HTML document > Input html5> tab > auto-complete HTML5 specification document 3, 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. 4, Jsformat

JS Code format plugin.
How to use: Use shortcut keys ctrl+alt+f 5, Brackethighlighter

Code matching, you can match parentheses, quotes and other symbols within the range.
How to use: clicking on a tag or bracket will highlight the location of another label or parenthesis. 6, Alignment

Code alignment, note is not formatted OH.
How to use: if you write a few variables, select these lines, Ctrl+alt+a, will be left aligned. 7. Doc Blockr

Note the plug-in to generate beautiful annotations.
/*: Enter to create a code block comment
/**: Enter the parameters in the auto-find function and so on.
It generates comments in JSDOC format.

8, Sidebarenhancements

A toolkit that can customize the open with shortcut keys. He can define different shortcut keys to open different browsers. Refer to the following links using the method:
http://www.w3cfuns.com/notes/13810/d9b9ed2fb80785dae88a5344ef0f30d4.html 9, ColorPicker

Typically, if you want to use a color picker, you might open Photoshop or GIMP. In Sublime Text, you can use the built-in color picker. Once the installation is complete, simply press Ctrl/cmd + Shift + C shortcut.
Note: Sometimes press Ctrl/cmd + Shift + C shortcut key can not call out the color selector, mostly with other software shortcut key conflict, Preferences-browse packages find ColorPicker folder, open will see the following several files

This is corresponding to different systems, we can modify the corresponding files according to their own shortcut keys, I was modified to Ctrl+shift+a as follows:

10, Autofilename

Function: Shortcut input file name
Introduction: Automatic completion of file name input, such as picture selection
Use: Enter "/" to see other files relative to the project folder

11. JQuery

A plug-in package that supports the jquery specification. 12, Advancednewfile

Suppose there is a folder file. We are entering the code and would like to create a new subdirectory in the HTML file in the traditional way a lot of steps, new directories, new files, save and so on.
But with the plug-in, things become a lot easier, just press Ctrl+shift+n, enter the folder and the file name, you will see the following effect: (Enter, you will find that the sub-directory of the file has been newly completed.) ）
13. JavaScript Next

Perfect support for ECMAScript 6.
JavaScript Next provides a better syntax highlighting than the default JavaScript package, and he perfectly supports ECMAScript 6.
It is recommended to use JavaScript next instead of the JavaScript package entirely. 14, CSS3

Provides syntax highlighting. By default it is a piece of plain white text that is hard to see. 15. Color Highlighter

CSS color highlighting, will detect the CSS files in the color code, whether it is hex code or RGB code can be very good display, is a great.
Color highlighter can be set to use the background color or the border hint colors, I usually do this in the settings settings:

{"Ha_style": "Filled", "Icons": false}

1 1

The effect is as follows:

16, Csscomb

CSS property ordering.
The order of CSS properties is generally not important because the browser is rendered correctly in any order. But sorting all the properties still helps the code to be neat. In sublime text, select CSS properties and press F5 to sort by alphabetical order, or right-click Run Csscomb.

17. CSS Format

CSS formatting.
How to use: Right Button-"CSS format-" Expanded
Effect:

There are other features, such as the right-hand-CSS format-compact, which can be used in a single line of CSS, with the following effects:

18, ConvertToUTF8

GBK encoding is compatible. 19. Auto Close HTML Tags

Function: When writing HTML code, the input ">" will automatically generate the corresponding closed tag </>. 20, Nodejs

Function: Node code hint
Tutorial: Https://sublime.wbond.net/packages/Nodejs 21, A File Icon

Beautify the front of the file icon, the effect is as follows:

22, Htmlbeautify

Format the HTML code.
How to use: Check the code, and then press the shortcut key ctrl+alt+shift+f or edit->beautify HTML Three, the use of shortcut keys-let you step fly alt+f3

When you select the text and press the shortcut key, you can select all the same text at once (such as variable name, function name, etc.) for simultaneous editing. CTRL + C, CTRL + V

When the cursor rests on a row, press CTRL + C to copy a whole line, and then CTRL + V to paste to the next line. Iv. Other use tips

1, Sublime in the sidebar click on a file, note is click the Preview, double-click Open, when clicked, the title of the open file is italic, at this point, if you click another file, the file will be replaced, and double-click a file, the title is not italic, and then open another file will not replace it , but open a tab again.

2, add sublime Text3 to the right-click menu, refer to the following link: https://my.oschina.net/adairs/blog/466777#comment-list
3, I have included all the plug-ins and configuration information Sublime Text 3 folder uploaded to Https://github.com/Paranoidyang/sublimeText3, you can download and replace their own, This will not have to be installed (through preferences-"Browse packages can find the folder location).