Sublime Text 3 full detailed graphics and text use tutorial _h5

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.

Fourth. 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.

Fifth. 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:

<ul id= "NAV" >

<li class= "item1" ><a href= "" >item 1</a></li>

<li class= "item2" ><a href= "" >item 2</a></li>

<li class= "Item3" ><a href= "" >item 3</a></li>

<li class= "item4" ><a href= "" >item 4</a></li>

<li class= "ITEM5" ><a href= "" >item 5</a></li>

<li class= "Item6" ><a href= "" >item 6</a></li>

<li class= "Item7" ><a href= "" >item 7</a></li>

<li class= "ITEM8" ><a href= "" >item 8</a></li>

</ul>