Sublime Text 2+zen Coding

Own long-term use of editplus to do code editing, use of DW, or accustomed to the former use of the environment. Friends recommend, try the new coding tool--sublime Text 2. In the code making process, the most important is 1) quick copy of the pattern work 2) fragmented code collation Alignment 3) reduce the number of keystrokes. Through my own trial, Sublime Text 2+zen coding combination can meet my these needs, in conjunction with the rest of the plugin. Detailed description below, this article mainly from the designer's point of view to choose Content, may be somewhat superficial.

It is recommended to use the official version, the green version is prone to some puzzling problems.

Website address: http://www.sublimetext.com/

Software Features:

• Auto-Complete:

  Auto-completed shortcut key is tab, if in the HTML file, input CL press TAB, you can automatically fill the class= "", plus zencoding, even more powerful, after the

• Multi-column editing:

  Ctrl-click the mouse, there will be more than one flashing cursor, at the same time can be modified at many places or hold the middle mouse button drag,

• Code Comment function:

  ctrl+/, ctrl+shift+/separate comments and block comments, and then click to remove the comments, ST2 can automatically identify the HTML, CSS or JS files, give different types of comments.

• Line operation:

  Ctrl+alt+↑, ctrl+alt+↓ up or down two lines, ctrl+enter, insert a blank line after the cursor, ctrl+d Select similar, you can refer to the following list of shortcut keys.

• Right-click function:

  The first 3, we all know, 4th, show unsaved changes, show unsaved changes, red minus indicates deleted content, Green plus sign indicates what's new

  Open containingfolder ..., opens the folders containing this file, this is easy to find the relevant files

  Copy file path, which allows us to copy the path to the browser to view

  Auto-format Tags on Selection format the selected document, so that we can see the code structure more clearly, although ST2 has automatic indentation, but when we paste into a piece of code that has not been formatted, we need this to, This plugin will not appear until this feature is installed with the tag.

How to install the sublime Text 2 plugin: 1. Direct installation

Installing the sublime Text 2 plugin is convenient and can be downloaded directly from the installation package to the Packages directory (menu->preferences->packages).

2. Installing using the Package control component

You can also install the package control component and install it directly online:

1. Press CTRL + ' bring up the console (note: There is a conflict between the keyboard shortcuts installed QQ Input method, Input Method property settings-Input Method management-Cancel Hotkey switch to QQ pinyin)

2. Paste the following code into the bottom command line and enter:
   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())

3. Restart Sublime Text 2.

4. If you see the package control item in Perferences->package settings, the installation succeeds.

If this method cannot be successfully installed, you can download the file here manually.

To install a plugin using the package control method:

1. Press Ctrl+shift+p to bring up the command panel

2. Enter install to bring up the Install Package option and enter, then select the plug-in you want to install in the list.

(In the green x64 version, the plug-in list is not called.) English version is no problem, not clear what reason

GBK Encoding Support

For gb2312, Sublime Text 2 is not supported, we can go through the plugin GBK to UTF8 or GBK transcoding work.

Main plugin Zen Coding:zen Coding

Do not know can be onlookers: "Zen Coding: A quick way to write html/css code"

Input div.wrapper>div.header+div.main+div.footer press TAB to instantly become

or press Ctrl+alt+enter to activate the zencoding console to see the entire dynamic process.

Zen Coding Code notation:

1) Use CTRL + ALT + Enter to Exhale zencoding

2) div#content>ul>li*3>a[href= "javascript:void (0);"] {links$} Such a short sentence is generated:

<did id= "Content" >

<ul>

<li><a href= "javascript:void (0);" >Links1</a></li>

<li><a href= "javascript:void (0);" >Links2</a></li>

<li><a href= "javascript:void (0);" >Links3</a></li>

</ul>

</did>

The developer of the Ps:zen Coding for Sublime Text 2 plugin has stopped sharing on GitHub and is now only installed through the package control.

Some tips for using Zen coding in Sublime Text

1. abbreviation extension

As previously known, you can generate code by using CONTROL + ALT + ENTER to enter the abbreviation for ZC in a new line. At the same time, if we write the ZC abbreviation directly in the editor, such as Div#content>p, when the cursor is placed after p, can be expanded by tab, ZC will search from the cursor to the left to the first space, between the code as the ZC abbreviation, so that you do not have to open a new line input each time, Improve efficiency, the disadvantage is not to be able to preview in real time.

2. Nested code

As shown, you can implement nesting of other code outside the already written code, by placing the cursor on the label you want to nest, and then using CONTROL + ALT + Enter to call out the ZC command line.

In fact, Zen coding also offers a number of handy code-writing operations, such as label matching, returning previous/next edit points, updating IMG tags, merging rows, and so on, but these features are not available because full support is not provided in sublime text.

Remaining plugins: JQuery package for Sublime Text

If you can't live without jquery, this is a must.

Sublime PREFIXR

PREFIXR,CSS3 Private Prefix auto-complete plug-ins, obviously also very useful wow

JS Format

A JS code format plugin.

Placeholders

Therefore, the name of the idea, occupy, including some placeholder text and HTML code snippets, practical.

Sublime Alignment

Used for automatic alignment of code formats. Legend has it that the latest version of Sublime has been integrated.

Tag
Some programs with code cleanliness are very good for this plugin, HTML code formatting can make HTML code more beautiful and tidy.

The method used is also very simple, after selecting an HTML code, press ctrl+alt+f to

Jsminifier

The plugin automatically compresses JS files based on Google Closure compiler.

Sublime Codeintel

Code Automatic Hints

Bracket highlighter

Similar to code matching, you can match the range within parentheses, quotation marks, and so on.

GBK to UTF8

Convert file encoding from GBK to Huang UTF8, shortcut key Ctrl+shift+c

Main shortcut keys

Ctrl+l Select Entire row (press and hold-continue to select the downstream)

CTRL+KK Delete from cursor to end of line

Ctrl+shift+k Delete an entire row

Ctrl+shift+d the entire line where the cursor is copied, before inserting the line

Ctrl+j merge rows (multiple rows that need to be merged are selected)

Ctrl+ku Change to uppercase

CTRL+KL Change to lowercase

Ctrl+d Word selection (press and hold-continue to select the next same string)

Ctrl+m cursor to start or end position within parentheses

Ctrl+shift+m Select the contents in parentheses (press and hold-continue to select the parent bracket)

ctrl+/Comment Entire line (if selected, same as "ctrl+shift+/" effect)

ctrl+shift+/Comment Selected content

CTRL + Z Undo

Ctrl+y Recovery undo

Ctrl+m cursor jumps to the corresponding parentheses

ALT +. Close the current label

Ctrl+shift+a Select the cursor position parent tag pair child

Ctrl+shift+[Folding Code

Ctrl+shift+] Unwind code

Ctrl+kt Collapsing properties

Ctrl+k0 Expand All

Ctrl+u Soft Undo

Ctrl+t Word Exchange

Tab Indent Auto-complete

Shift+tab removing indents

Ctrl+shift+↑ and Upstream Interchange

Ctrl+shift+↓ and Downlink Interchange

Ctrl+k Backspace Delete from cursor to beginning of line

Ctrl+enter cursor after insertion

Ctrl+shift+enter Cursor Front Insertion

CTRL+F2 setting bookmarks

F2 Next Bookmark

Shift+f2 Previous Bookmark

Sublime Text 2+zen Coding