Sublime Text 3 Full details original tutorial _sublime

First, the preface

Use sublime Text also have a few years, version also from 2 to 3, but as if cold days drink ice water, warm and cool do self-knowledge. At first also do not know where to start, the whole of the earth to find information, but can be found in the information, suffer from their fragmented, one-sided, not enough system and comprehensive, so the way to spend a lot of my time and energy. So the monk wrote this "Sublime text 3 Full Detail Guide", one of their own experience is a summary, and second can give beginners to do a systematic, comprehensive guidance, so that they less go to the detour I walked at that time, so that can quickly grasp the Sublime Text this excellent editor.

The version I am currently using is the beta version of sublime Text 3 build 3083, which is already fairly stable. So all the explanations in this article are subject to this version, and the Windows 7 x64 platform is an example. As for the other versions, there is no big difference.

Second, Sublime Text features

1. The Sublime Text is a cross-platform code editor that can be used in Linux, OS x, and Windows.

2, Sublime Text is extensible, and contains a large number of practical plug-ins, we can install their own domain plug-ins to multiply the efficiency.

3, Sublime Text is the command line environment and graphical interface of the best choice, while using both will greatly improve work efficiency.

4, Sublime Text for the charging software, recommend the ability of people to pay to use to support developers. But you can always use it without buying it.

Third, download and installation

1, Download: Currently official version of v2.0.2, we open the website download link http://www.sublimetext.com/3, download sublime Text 3 build 3083.

where "Windows" bit "Download down to" Sublime Text build 3083 x64 Setup.exe "installation program;" Portable version "downloaded to" Sublime Text build 3083 X64.zi P "Editor's package, which can be run without installation.

If your computer platform is a Windows x86, or 32-bit system, click "Windows" to download the 32-bit installer, and if you don't want to install it, click "Portable Version" later to download its 32-bit editor package.

2, Installation: Double-click on the download down the "Sublime Text build 3083 x64 Setup.exe", remember to choose "Add to the Explorer context menu", add it to the right button shortcut menu. Others are installed with the default settings.

3, installation finished, double-click the desktop "Sublime Text 3" shortcut icon, open the program, you can see "Sublime Tex."

4, if you do not put "Sublime Text 3" installed in the default path, such as you install it in D disk, please add environment variables.

Set the font and font size

Point Menu "Preferences--->setting-user", open "preferences.sublime-settings".

The following figure adds the code you want and sets it according to your preferences. Set font with "Font_face": "Font name", set font size with "font_size": "Font size", notice that they need to be separated by commas.

V. Installation of Plug-ins

Learn the sublime text extension before installing, let's take a look at its plugin official website: https://packagecontrol.io/.

When we enter the keyword of the plugin in the search box, the relevant plug-ins will be displayed in real time below, we can choose the plugin we want to know.

1. Install package control

Package control is a plug-in Management Pack, so we first need to install it. With it, we can easily browse, install and uninstall the plugin in sublime text.

Open package control's Web page https://packagecontrol.io/and click on the "Install Now" button on the right.

Enter the Https://packagecontrol.io/installation#st3 page, select the "SUBLIME TEXT 3" tab, and copy the code snippet inside:

import urllib.request,os,hashlib; 
h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; 
pf = 'Package Control.sublime-package'; 
ipp = sublime.installed_packages_path(); 
urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); 
by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read();
dh = hashlib.sha256(by).hexdigest(); 
print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Double-click the desktop "Sublime Text 3" To open the program, shortcut CTRL + ' Open the Sublime Text console, paste the previously copied code into the console, press the ' Eenter ' button.

Wait for its installation to close the program, restart the "Sublime Text 3", click on the Menu "Preferences" visible "Package Control" item, the plug-in Management Pack has been installed successfully.

2, ConvertToUTF8 plug-in installation

A) Functional description: ConvertToUTF8 can be in addition to UTF8 code other than the encoding file in Sublime Text relay to UTF8 encoding, in the opening of the file at the beginning will display garbled, and then automatically show the normal font, of course, The encoding format of the original file does not change after you save the file.

B Installation Method One: shortcut key ctrl+shift+p, open "Command Palette" Suspension dialog box, at the top of the "Install", and then click "Package control:install Package."

Enter "Convert" in the floating dialog box that appears, and then click the "ConvertToUTF8" plugin below to automatically start the installation, please wait patiently.

When the plug-in is successfully installed, the status bar at the bottom of the Sublime Text 3 editor prompts for a successful installation.

c) Installation method Two: You can also download the full plug-in package after decompression, put into the C:\Users\userName\AppData\Roaming\Sublime Text 3\packages directory to achieve the purpose of installing plug-ins. Download Address: https://github.com/seanliang/ConvertToUTF8.

How to find the Packages directory. A quick way is: Double hit Open your "Sublime Text 3", point menu "Preferences--->browse Packages ...".

It opens the directory "Packages" where the plug-in package is stored directly. Then you can copy the downloaded package to the Packages directory.

Of course, if you are familiar with Git, you can also use Git to clone the plug-in package directly from the plugin's GitHub library into the Packages directory.

Note: All later Plug-ins can be installed through the two methods described above, will no longer repeat, the recommended method, the use of "Package control" to install Plug-ins.

3, Brackethighlighter Plug-ins

Feature Description: Highlight matching brackets, quotes, and labels.

Plugin Address: https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

4, less Plug-ins

Function Description: Less syntax highlighting.

Plugin Address: Https://github.com/danro/LESS-sublime

5, Sublime-less2css Plug-ins

Function Description: Compile the less file into a CSS file.

Plugin Address: https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

Accessibility: Download less.js-windows from https://github.com/duncansmart/less.js-windows after installation, and configure Less.js-windows environment variables.

6, Emmet Plug-ins

Function Description: Emmet's predecessor is the famous Zen Codin. Front-End development prerequisites, HTML, CSS code to quickly write artifacts.

How to: Default Shortcut key tab

Plugin Address: Https://github.com/sergeche/emmet-sublime

Auxiliary tools: PyV8 Download Address: https://github.com/emmetio/pyv8-binaries

Note: The Emmet plug-in requires PYV8 plug-in support, so when installing Emmet, will automatically install PyV8 Plug-ins, if the installation Emmet can not be normal warranty, it is likely because the PyV8 is not installed completely, Sublime Text 2 and 3 easy to appear this problem. You can delete it and then manually download it using method two to install the PyV8 plugin.

How to use Example: Writing code Ul#nav>li.item$*8>a{item $}

The cursor is then set at the end of this line of code, and the Tab key is automatically generated:

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 I TEM 7 Item 8

For more detailed usage, please refer to Emmet website: http://docs.emmet.io/

7, Jsformat Plug-ins

Description of function: JavaScript code formatting.

How to: Right-click in the open JavaScript file and select Jsformat.

Plugin Address: Https://github.com/jdc0589/jsformat

8, Colorhighlighter Plug-ins

Feature Description: Displays the color of the selected color value and integrates the ColorPicker

Plugin Address: Https://github.com/Monnoroch/ColorHighlighter

Right-click on the 16-in color value, select "Choose Color", and the color picker will be flexible, clicking on the desired color block.

Look at the effect, color values and display colors have been changed accordingly.

9. Compact Expand CSS Command Plugin

Function Description: Make CSS properties expand and shrink, format CSS code.

How to: Press ctrl+alt+[to shrink the CSS code to display one line, press ctrl+alt+] to expand the CSS code for multiple lines.

Plugin address: https://gist.github.com/vitaLee/2863474 or: Https://github.com/TooBug/CompactExpandCss

Shortcut key ctrl+alt+[shrink CSS code as an effect:

Shortcut key ctrl+alt+] Expand CSS code to display the effect in multiple lines:

10, Sublimetmpl Plug-ins

Feature Description: Quickly generate file templates.

How to: Sublimetmpl The default shortcut key is as follows, if the shortcut key setting conflict may be invalid.

Ctrl+alt+h New HTML file

Ctrl+alt+j new JavaScript file

Ctrl+alt+c New CSS File

Ctrl+alt+p New PHP file

Ctrl+alt+r New Ruby File

Ctrl+alt+shift+p New Python file

Plugin Address: Https://github.com/kairyou/SublimeTmpl

The following figure is a new HTML file ctrl+alt+h by pressing the shortcut key.

The corresponding templates are Tmpl-formatted files that are saved under C:\Users\ usersname\appdata\roaming\sublime Text 3\packages\sublimetmpl\templates.

Of course, you can change the template format according to your preferences. For example, change "Html.tmpl" to an earlier HTML standard format and save it.

Now press the shortcut key ctrl+alt+h to create a new HTML file formatted exactly as you would if you changed the template format. The following figure:

Add language: You can also add file templates that are not in the template folder and make the appropriate settings to use this feature. You can refer to its Chinese documents in detail: http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

11, Alignment Plug-ins

Feature Description: Automatically align code formatting.

Usage: Shortcut key Ctrl+alt+a, may clash with QQ screenshot, one of the two to reset shortcut keys.

Plugin Address: https://github.com/kevinsperrine/sublime_alignment

12, Autofilename Plug-ins

Function Description: Automatically fill the full file (directory) name.

Plugin Address: Https://github.com/BoundInCode/AutoFileName

After installation you can test how to use Autofilename, the first CSS file to demonstrate, when the input href= "", Sublime text will now edit the file path as the center, to determine the path of all files.

A the file as a template it will go to crawl with abc.html on the same level of the file list.

Like us this time link is in the CSS folder in the Auto.css, so we directly linked to css/, will run out of the CSS folder file, the entire usage and so on

B as part of the same way, there is no difficulty, to understand the path is good.

c) again to see is the CSS file to use the URL, but also in the same way, but because to connect to the upper layer of the Images folder in the Arrow.png, so on the front dozen. (top), in order to select the path can be.

13, Docblockr Plug-ins

Function Description: Fast generation JavaScript (including ES6), PHP, ActionScript, Haxe, Coffeescript, Typescript, Java, Groovy, objective C, C, C + + and rust language function annotations.

How to: Enter/** on the function, and then press Tab to automatically generate comments.

Plugin Address: Https://github.com/spadgos/sublime-jsdocs

Enter/** on the function, and then press TAB to automatically generate a comment.

14, Sublimecodeintel Plug-ins

Feature Description: Smart tips.

Plugin Address: Https://github.com/SublimeCodeIntel/SublimeCodeIntel

15, Html-css-js Prettify Plug-in

Function Description: HTML, CSS, JS format.

Plugin Address: https://github.com/victorporof/Sublime-HTMLPrettify

Installation method: Before installing this kit, you must first install Node.js to specify the location of the Node.exe's execution file. And then install Html-css-js prettify.

Use the method one: View-> Show Console or use the shortcut key (Ctrl + ') to enter the command column: View.run_command ("Htmlprettify"), and then press ENTER.

(Error correction: At this time may be wrong in the newspaper, into the Html-css-js prettift plug-in installation package file htmlprettify.py, find "Node_path" Modify the path of the Node.exe for their own installation time path)

Use Method Two: Default shortcut key: Ctrl+shift+h.

You can also set your own shortcut keys, menu "Preferences---> Key bindings–user" NEW:

    "Keys": ["Ctrl+shift+o"],     "command": "Htmlprettify"}

After the completion of the save, the above code set to perform this plug-in shortcut keys are: Ctrl+shfit+o, set their own words to test, do not conflict with other shortcut keys.

Before formatting:

After formatting:

16, Sidebarenhancements Plug-ins

Function Description: Sidebar menu expansion function.

Plugin Address: Https://github.com/titoBouzout/SideBarEnhancements/tree/st3