Sublime text 2

I. Preface

As a front-end, it is essential to have a good development tool. editplus and notepad ++ are both good tools, lightweight and fast to start (DW is too swollen ). Recently, another new editor was born, sweeping the front-end industry and attracting countless preferences. Many front-end er abandoned their "partners" that have been used for several years ", into her arms-Sublime text2. Sublime text2 is a cross-platform editor. You no longer have to worry about changing the platform without finding a suitable and familiar editor. Currently, it is still in beta version, but the function is very powerful and the update is fast. Currently, the latest version is bucket 2181. St2 is not free, but it can be used permanently for free. It only occasionally pops up a dialog box asking you to purchase and register when saving it. Official website address: http://www.sublimetext.com/2.

Ii. Functions

Sublime text2 is an editor software with code highlighting, syntax prompts, Automatic completion, and fast response. It not only has a gorgeous interface, but also supports plug-in extension mechanism and uses her to write code, it is definitely a pleasure.

Interface

First look at the st2 interface:

L from top to bottom: Comment tab control bar on the title bar; Comment edit area comment status bar;

L from the right: the sidebar (can be closed) → editing area → minimap

Menu Bar

Various commands and settings.

Tab bar

There are many editors. If the file has not been edited and saved, there is a small dot in the upper right corner to remind you to save it. If it is not saved, you don't have to worry. st2 is very considerate and will automatically save it.

Editing Area

This is our main work area. st2 supports Automatic Code indentation and code folding.

Describes several common functions:

L Automatic completion: the shortcut key for Automatic completion is tab. If you enter CL in the HTML file and press the tab, the system will automatically fill in "class =". After zencoding is added, it is even more powerful, I will talk about it later.

L multi-column Editing: press Ctrl and click the mouse to display multiple blinking cursors. You can modify multiple

Or press and hold the middle mouse button to drag,

L code annotation function: Ctrl +/, CTRL + Shift +/without comments and block comments, and then click it to remove comments, st2 can automatically identify HTML, CSS, or JS files and provide different types of annotations.

L row operation: CTRL + ALT + ↓, CTRL + ALT + ↓ swap up or down two rows, CTRL + enter, insert blank lines after the cursor, CTRL + d select similar, you can refer to the shortcut key list.

L right-click:

The first three, we all know, 4th, show unsaved changes, display unsaved changes, red minus signs indicate deleted content, and green plus signs indicate new content

Open containing folder ..., Open the folder containing this file, which is convenient for you to find the relevant file

Copy file path. copy the file path to your browser.

Auto-format tags on Selection: format the selected document for a clearer view of the code structure. Although st2 has the automatic indent function, when we paste it into a piece of unformatted code, this is required. The tag plug-in must be installed for this function.

L Humanized Design: Although st2 is still in beta version, many design details are still commendable. For example, clicking a label or arc will show a dot line at the start, it is easy to see the code results. Each layer of nested code has a vertical line, which plays a role of visual assistance.

Iii. Settings

After bucket 2181, sublime text2 merges [settings]. Currently, there are only two options: system settings and shortcut key settings.

If we modify the settings, we recommend that you copy them to the user to avoid overwriting the default update later.

L settings: in this file, you can modify many things, such as themes, fonts, font sizes, whether to display line numbers, automatic indentation, and automatic completion. Many of them are selected by default. I have modified the following two parts:

98 rows -- display the thumbnail border

101 rows -- highlight the current row of the cursor

This helps us quickly find the cursor position.

L key bindings: There are many shortcut keys in st2, so do not overwrite them when you change the key. Because there are many shortcut keys, there is a combination of the following shortcut keys, first press Ctrl + k, release K, then press J to expand all the code.

L main shortcut keys

CTRL + l select the entire line (Press and hold-continue to select downstream)

CTRL + KK Delete from cursor to end of line

CTRL + Shift + k Delete the entire row

CTRL + Shift + D copy the entire row where the cursor is located and insert it before this row

CTRL + J merge rows (multiple rows to be merged have been selected)

CTRL + Ku to uppercase

CTRL + KL to lowercase

CTRL + d (Press and hold-continue to select the next same string)

CTRL + M move the cursor to the start or end position in parentheses

CTRL + Shift + M select the content in the brackets (Press and hold-continue to select the parent bracket)

CTRL +/comment out the entire line (if the selected content is used, the effect is the same as that of "Ctrl + Shift +)

CTRL + Shift +/comment on selected content

CTRL + z undo

CTRL + y resume undo

CTRL + M jump to the corresponding parentheses

Alt +. Close the current tag

CTRL + Shift + A select the cursor position parent tag

CTRL + Shift + [collapse code

CTRL + Shift +] Show Code

CTRL + KT fold Property

CTRL + K0 show all

CTRL + u soft undo

CTRL + T word Interchange

Tab indent automatically completed

Shift + TAB remove indentation

CTRL + Shift + swap and uplink swap

CTRL + Shift + swap and downstream

CTRL + k backspace Delete from cursor to first line

CTRL + enter insert row after cursor

CTRL + Shift + enter insert row before cursor

CTRL + F2 set bookmarks

Next bookmarks on F2

Shift + F2 bookmarks

Iv. Expansion

St2 supports plug-in extension. First, we need to install package contro, CTRL + 'to call up the command line tool, and input import urllib2, OS; pF = 'package control. sublime-package '; IPP = sublime. installed_packages_path (); OS. makedirs (IPP) if not OS. path. exists (IPP) else none; open (OS. path. join (iPP, PF), 'wb '). write (urllib2.urlopen ('HTTP: // sublime.wbond.net/'{pf.replace ('', '% 20 ')). read ())

Press enter.

Click preferences> package control. The following pop-up window is displayed:

N disable package: Disable plug-ins

N enable package: Enable Plug-in

N install package: Install the plug-in

N list package: view the list of installed plug-ins

N remove package: remove the plug-in

N upgrade package: Upgrade the plug-in

Recommended plug-ins:

List of installed plug-ins:

L zencoding: front-end essential for quick html/CSS Development

Enter Div. Wrapper> Div. header + Div. Main + Div. footer and press tab.

Or press CTRL + ALT + enter to activate the zencoding console and you can see the entire dynamic process.

L jsformat: Format JS Code. This plug-in is very useful. We sometimes see some effects on the Internet and want to see how it is implemented, but the code is compressed and hard to read. Don't worry, open it with st2 and press CTRL + ALT + 5 (this is the shortcut key I set) to restore the Code. This is not the long-lost "I am pretty boxing" in the martial arts ".

L tag format tags to make messy code instantly neat and clear.

L brackethighlighter, highlighted by arc

L clipboard history: clipboard history. Multiple copies can be saved. Press CTRL + ALT + V to select the clipboard history.

L goto-CSS-Declaration: Jump to the class declaration of the CSS file to facilitate modification and viewing, as shown below. Note that the corresponding CSS file must be opened at the same time.

L gotorecent: Open the latest file. The system has this function, but you can only view the last eight files. It is a bit uncomfortable. Press Ctrl + E and select.

L SCSs supports SCSs syntax highlighting, which comes with a lot of CSS snippet, which can save a lot of time whether used or transformed.

There are also many plug-ins, jquery syntax prompts, jshint, and so on.

V. Conclusion

All in all, sublime text2 is a good code writing tool with a nice UI, user-friendly detailed design, comprehensive functions and scaling mechanisms. If you haven't used it yet, please give it a try, it won't disappoint you. If there are any disadvantages, st2 currently does not display ANSI or GBK Chinese characters normally (utf8 encoding is not a problem, and there is a GBK plug-in package control ), we hope st2 will support Chinese in the future.

Sublime text 2