Sublime Text usage experience (1), sublime usage experience

Sublime Text usage experience (1), sublime usage experience

I used to write web Front-end styles using IDE development tools such as eclipse and myeclispe. Now I want to write something purely HTML and find a lightweight editor, so that I can easily open and write it, it is convenient for you to study in your spare time. I collected a bunch of editors on the Internet, and finally looked at Sublime Text, a small Editor. The price of 70 knives must be a cool. This software has been out for a long time. Now it's just getting started. While learning, you can write down your experiences as learning notes, as well as easily sharing your experiences with others, so that you can avoid detours, this article focuses on compiling HTML files with Sublime.

If the problem persists, check again!

I. Sublime Text2 installation and Localization

Sublime Text2 Baidu online drive download (hope to support more genuine versions, although unlimited trial)

Link: http://pan.baidu.com/s/1dDJcRxn password: bywe

Chinese package Baidu online disk download

Link: http://pan.baidu.com/s/1mgkYFGk password: 6o9z

Chinese method: run the software and choose Preferneces> Browse Packages from the menu. The parent directory of the opened directory contains a Packages folder, replace the files in the Default folder of the downloaded Chinese archive with the files with the same name in Packages-> Default.

Ii. Main Page settings and shortcut keys of Sublime Text2

In the left-side directory bar (close/open): View-> sidebar-> hide sidebar (click to open it once and click Close again. The tab text has not changed. It should be a problem of localization)

On the right side of the mini view (close/open): View-> hide the mini Map

Iii. Sublime Text2 plugin installation

There are many Sublime plug-ins. However, to install these plug-ins conveniently, you must install the Package Control. The simplest way to install these plug-ins is through the Sublime text console. In the console, use Ctrl + 'shortcut or view (View)-> Display Console menu access. Once opened, paste the Python code corresponding to your Sublime (this article is Sublime Text2) to the console.

The Python code for installing Package Control in Sublime Text2 is:

Import urllib2, OS, hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282 '+ 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'package Control. sublime-package '; ipp = sublime. installed_packages_path (); OS. makedirs (ipp) if not OS. path. exists (ipp) else None; urllib2.install _ opener (urllib2.build _ opener (urllib2.ProxyHandler (); by = urllib2.urlopen ('HTTP: // packagecontrol. io/'+ pf. replace ('', '% 20 ')). read (); dh = Hashlib. sha256 (). hexdigest (); open (OS. path. join (ipp, pf), 'wb '). write (by) if dh = h else None; print ('error validating download (got % s instead of % s), please try manual install '% (dh, h) if dh! = H else 'Please restart Sublime Text to finish installation ')Python Code

References: https://packagecontrol.io/installation#st2

4. the shortcut key allows Sublime Text2 to quickly open the file in the browser

After Package Control is installed, we can easily install various plug-ins. For example, question 4: how to install a plug-in that allows you to quickly open files in your browser ", in this way, when editing an HTML file, you can write code and view the Display Effect in the browser. This plug-in is called view in browser:

1. Open the Command Panel through "ctrl + shift + p"

2. Enter "ip" to open the installation plug-in panel, select the first package Control: install Package, and wait for a moment to jump out of the installation plug-in Input Panel.

3. Enter "view in browser" and click the left mouse button or enter the Enter key for installation.

4. Check the status bar in the lower left corner of SublimeText2 to check whether the installation is successful.

After the installation, you can see how to use it:

1. Open Sublime Text2. Menu Bar: Preference-> Package Settings-> View In Browser-> Settings-User

2. Enter the following code in "[]": the shortcut key set for you at the Red Letter 1, and the browser that runs the compiled file for the shortcut key at the Red Letter 2, other firefox and Apple safari

Note: The "[]" at the beginning and end cannot be deleted. Otherwise, an error will be reported when Sublime is opened. Even if there is no code, leave an empty "[]" symbol, otherwise, an error is reported.

V. Use the Sublime Text2 plug-in Emmet (to quickly generate code starting with an HTML file)

Standard header file code is automatically generated when HTML files are created using some IDE development tools. However, to achieve this effect, Sublime must work with plug-ins. The plug-in we will install here is Emmet, the installation method is the same as above.

After the Emmet plug-in is installed, create a file and open Sublime> File> New file. The created file is a Plain Text file, which can be seen from the bottom right corner of the Sublime form, click Plain Text in the lower-right corner and select the HTML type in the pop-up file type list, so that an empty HTML file is created.

Start to experience:Enter the following abbreviation and press the tab key. (Only HTML files of the file type can be automatically converted to the corresponding code after the Tab key is pressed)

For more information, see: http://docs.emmet.io/cheat-sheet/

Html: 4 TB

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 
Html: 4 s
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 
Html: xt
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 
Html: 5
 1 <!DOCTYPE html> 2 
 
6. Reference other files
As long as it is placed in the same folder on the desktop, the following statements can be referenced, such as CSS files.
./Current Directory

../Directory at the upper level

In the same directory, js files can be referenced directly.