Sublime text 2 tips

Preface

A few months ago, I wrote a blog post "sublime text 2 usage experiences", which introduced the basic usage of st2, recommendation of extension plug-ins, and shortcut keys. Due to space limitations, some functions, such as snippet (CodeSegment), Zen coding in-depth introduction, and other content is not involved. In addition, st2 is updated very quickly and has now been released to 2.0.1 (2012-8-1), and many new features are also added. This article will add this content.

2.0.1 New Features

The details of Version 2.0 have been improved and optimized a lot. The following are the obvious details:

• Code drag: select the code and drag it to the target to release it.
• Added the function opened in the browser: previously required to install plug-ins to implement the function, now st2 is built in, in the HTML file, right click → open in browser to open the file in your default browser (the file must be saved first)
• Double-click the tab to create a file.
• When saving a file, you can save the selected code status (similar to the PS constituency)
• Double-click the blank area in the Code and select only the blank area (more convenient than before, and the '<' of the previous tag will also be selected)

Zen Coding .)

Zen coding is a powerful tool for web development. It has multiple versions and corresponds to different editors.

Zen coding on st2 is also powerful. It not only allows you to quickly write HTML/CSS code, but also supports code editing and searching.

Basic usage

 <!  Doctype html  > <  Html  >      <  Head  >          <  Meta  Charset  = "UTF-8"   />          <  Title  > </  Title  >          < Meta  Name  = "Keywords"  Content  = ""   />          <  Meta  Name  = "Description"  Content  = ""   />          <  Link  REL  = "Stylesheet" Href  = "CSS/. CSS"   />      </  Head  >      <  Body  >  Table. Demo> (thead> tr> TH) + (tbody> tr> TD)  </  Body  >  </  Html  > 

Expand code by Tab

<!  Doctype html  >  <  Html  >      <  Head  >          <  Meta  Charset  = "UTF-8"   />          <  Title  > </ Title  >          <  Meta  Name  = "Keywords"  Content  = ""   />          <  Meta  Name  = "Description"  Content  = ""   />          < Link  REL  = "Stylesheet"  Href  = "CSS/. CSS"   />      </  Head  >      <  Body  >          <  Table  Class  = "Demo"  >             <  Thead  >                  <  Tr  >                      <  Th  > </  Th  >                  </  Tr  >              </  Thead  >              < Tbody  >                  <  Tr  >                      <  TD  > </  TD  >                  </  Tr  >              </  Tbody  >          </  Table >      </  Body  >  </  Html  > 

Code editing

Zen coding comes with a rich set of code operation shortcuts. I use the most of these two shortcut keys, CTRL + [and CTRL +] (I have changed them to my favorite shortcut keys ).

The two functions are similar, but one is from inside to outside, and the other is from outside to inside.

Sometimes we often need to operate on a DIV, and this Div contains many sub-Div. To select this Div, we must check where the DIV is closed at the end, which is not only a waste of time, you may also be mistaken. Using this shortcut key is fast and accurate, and can expand and contract layer by layer or to the inside.

For example, to select the table, place the cursor in <Table>, and press Ctrl +] to automatically select the code. Now it is much faster and more convenient to delete or move the table.

Another common shortcut key is to select the content in quotation marks. If the class name in HTML is named with an underscore, double-click it. If it is a hyphen, double-click it to select only one word. It is inconvenient to press and hold the mouse, you can try Ctrl + Shift +. select the quotation mark content; Ctrl + Shift + u, delete the label of the package cursor; there are many shortcut operations, such as increasing and decreasing data, merging rows, matching tag names, etc, if you are interested, you can view and modify this file/zencoding/default (Windows ). sublime-keymap. If you forget to do so many shortcut keys, don't worry. The latest Zen coding adds a help panel and selects preferences-zencoding has command pallete, the pop-up Panel lists all zen coding shortcuts.

Customize your own zen Coding

This section describes the shortcut keys and modification methods of Zen coding. Let's take a look at how to change the HTML and CSS shortcut keys of Zen coding. Zen coding provides many CSS shortcuts, but some do not conform to our usage habits, such as float: Left; it is too troublesome to input FL: L. We generally use FL more easily; there are also some such as margin and padding. If we want to output a unit (PX), we need to modify the zen_settings.py file of Zen coding, which is located in data \ packages \ zencoding, it is a python file. open the file, modify and save the file, and restart st2 to take effect. You can customize your own zen coding.

Custom new file sublimetmpl

Many people have told me that st2 is good in all aspects, but it is uncomfortable to create a new file. By default, it is always in plain text format, you need to manually switch each time. At present, the official website has not provided such a function, but Chinese people have developed a plug-in to make up for this defect. Search for sublimetmpl in package installation and install it. Common panel types such as HTML, CSS, and JS are added by default, press CTRL + ALT + H/CTRL + ALT + C/CTRL + ALT + J to create a three-minute file. The shortcut key is default (Windows ). sublime-keymap. The template file is here data \ packages \ sublimetmpl \ templates, which can be modified.

Code snippet (SNIPPET)

Quick input of Zen coding is very convenient, but it is sometimes inconvenient to enter a large segment of Code. For example, enter a table in the table above. demo> (thead> tr> TH) + (tbody> tr> TD) so many words, if you have predefined the table code segment, it is much easier to enter the shortcut key to generate, this is the code snippet. We can define some common code snippets, such as tabs, navigation bars, and basic page structures. The following are examples:

Content: The code must be placed in CDATA. $1 indicates the cursor position, which facilitates the editing of class names.

Tabtrigger: shortcut key

Scope: The response scope can be html css js files.

Description: Description of the Code in the prompt box when you enter the shortcut key.

Figure 2 is the most basic structure of a page. You can enter a DTD in an HTML page and press tab to generate it. The cursor stops at the title, so that you can enter the title, similar to a variety of snippets. Snippets can be stored anywhere. We recommend that you create a folder to store snippets for easy maintenance and management.

Some CSS and JS snippet downloads are also provided for package installation.

Summary

Sublime text 2 has powerful functions and rich plug-ins, but it takes time to understand and familiarize yourself with various settings and shortcut keys. NextArticleThis article introduces how to use sublime text 2 Bootstrap F5 to quickly develop web pages.