Sublime Text 12 Secrets you don't know

1. Enter "!" or "Html:5", then press the TAB key:

Html:5 or!: for HTML5 document types

HTML:XT: For XHTML transition Document types

Html:4s: For HTML4 Strict document types

2. Easily add classes, IDs, text, and attributes

P#foo Supplemental ID
P.foo Supplementary class
H1{foo} and a[href=#] are H1 and a tags

3. Nesting

: A child element symbol that represents a nested element

+: Sibling tag symbol

^: You can raise the label in front of the symbol by one line

The effect is as follows:

Nested notation

4. Grouping

(. foo>h1) + (. bar>h2)

Generated:

 
   <div class="foo">  
        <h1></h1>  
    </div>  
    <div class="bar">  
       <h2></h2>  
    </div>

Group notation

5. Define multiple elements *

Ul>li*3

Define multiple elements

6. Define multiple elements with attributes

Ul>li.item$*3 $ represents mantissa different 1, 2, 3

Define multiple with attributes

7. CSS Shortcut

1) w100 = "width:100px;

2) p =%

e means em
   x means ex

h10p+m5e = "height:10%; Margin:5em;

3) @f

@font-face {
Font-family:;
Src:url ();
}

4) Fuzzy matching

Ov:h, Ov-h, OVH and OH

Fuzzy matching

5) Vendor Prefix

If you enter a non-standard CSS property, Emmet will automatically add a vendor prefix, such as entering TRS, to generate:

 
 
-webkit-transform: ;  
-moz-transform: ;  
-ms-transform: ;  
-o-transform: ;  
transform: ;

Quickly generate prefixes

You can also prefix any property with a "-" symbol, or you can add it to the attribute. such as input-super-foo:

 
-webkit-super-foo: ;  
-moz-super-foo: ;  
-ms-super-foo: ;  
-o-super-foo: ;  
super-foo: ;

If you do not want to add all the prefixes, you can use abbreviations to specify, such as-WM-TRF to add only the-webkit and-moz prefixes:

 
-webkit-transform: ;  
-moz-transform: ;  
transform: ;

The prefix is abbreviated as follows:

W indicates-webkit-
M represents-moz-
s represents-ms-
O indicates-o-

6) Gradient

Input lg (left, #fff 50%, #000)

Gradient Quick Build

7) Other references

Http://devework.com/emmets-css.html
https://www.douban.com/note/299285545/?qq-pf-to=pcqq.c2c

8. JS Code hint

1) c+s+p
2) Pcic
3) Input Sublimecodeintel

9, Sublime install the compilation sass

Although Postcss is the future, sass is mature and stable, has a large wave of loyal users, and open source projects, and recently Bootstrap 4 Alpha has been transferred from less to sass. So it is very necessary to know sass.

Based on rapid development and efficiency, I developed the habit of using the editor plug-in To complete Less/sass compilation, so that you can quickly locate and fix bugs.

The following is a Sublime text plug-in SASS build system for Sublime Text 2 can be completed in the editor Sass compilation. The name is 2 but sublime Text 3 is available without pressure.

Installing SASS
First to install Ruby and sass, detailed reference: http://www.w3cplus.com/sassguide/install.html or online a lot of tutorials, installation of Sass may not be installed on the wall, So you can step back and then install the test version--pre.

Sublime Text installation Sass Build Plugin
1) Install the package Control Plugin

Open: View > Show Console

Input:

Sublime Text2

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 (by). Hexdigest (); Open (Os.path.join (IPP, pf), if dh = = h else None; Print (if dh! = h else  "please restart Sublime Text to finish installation ')            

Sublime Text3

 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)) Span class= "Hljs-keyword" >if dh! = h else Open (Os.path.join (IPP, pf), " WB). Write (by)           

See: Https://packagecontrol.io/installation#st3

2) Install the package Control Plugin

Ctrl+shift+p (linux/windows) or command+shift+p (OS X), and then enter ' install ' to see the package Control:install the package and select it.

Wait for the list to come out, enter SASS to see the Sass Build system Select installation.

After the installation is complete, ctrl+b (linux/windows) or command+b (OS X) can compile sass as CSS, and there will be a. map file.

For more details see official: HTTPS://GITHUB.COM/JAUMEFONTAL/SASS-BUILD-SUBLIMETEXT2

10. Install Multiline Comment Plugin

Use the package control to install Docblockr. After the installation is complete, use the following methods:

A, finish writing your function first

 
function testFunction(a, b, c) {

}

B, and then on the front line of the function, enter

/**

C, then enter, auto generate

 
 
/**
 * [testFunction description]
 * @param  {[type]} a [description]
 * @param  {[type]} b [description]
 * @param  {[type]} c [description]
 * @return {[type]}   [description]
 */
function testFunction(a, b, c) {

}

12 Little Secrets

1) Select

Here are some shortcut keys for sublime text selection:

• Command + D To select a single word
• Command + L Select a row
• Command + A Select all
• Ctrl + Command + M ' Check all the contents in parentheses (very useful when writing CSS or JS)

Sublime text also supports the operation of selecting multiple rows at once: Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly b Oost your productivity. There is several ways to perform this feature:

• command and then click on the line you want to select
• Command + Ctrl + G (when partial text is selected) Press this key to select all the same text
• Command + D (when partial text is selected) directly selects the next occurrence of the text

Selected shortcut keys

2) CSS Sorting

The order of CSS properties is generally not important because the browser is rendered correctly in any order. But sorting all the properties still helps the code to be neat. In sublime text, you can sort alphabetically by selecting CSS properties and pressing F5.

CSS Sorting

You can also use third-party plug-ins such as Csscomb to control the sorting method in more detail.

3) command Panel (Palette)

Use the command panel to quickly accomplish multiple tasks. Press COMMAND + Shift + p to bring up the panel and type the desired command. Look at a few examples below:

Renaming files

Renaming files

Set file as HTML syntax

HTML syntax

Inserting Code Snippets

Inserting Code Snippets

4) Toggle tab and Project

When you open multiple tabs at the same time, you can switch between them with the following hotkeys:

• Command + T lists all tab pages
• Command + Shift +] next tab
• Command + Shift + [Previous Tab]
• Command + Ctrl + P Toggle side Bar Display Project

5) Cross-file editing

The same editing operation can be repeated in multiple files at the same time. For example, when you have the same piece of code in multiple files, you can quickly edit it using the following steps:

• Press COMMAND + Shift + F to enter the code you want to find in the Find box. You can quickly use the code snippet in the selection by command + E.
• In the Where box, specify the range of files that you want to find, or fill in the file that represents the current open.
• Enter the code you want to replace in the Replace box and replace it in bulk by pressing the Replace button.

Cross-file editing

6) file crawler

Press COMMAND + R to list all CSS selectors in the document. You can select and jump to view immediately. This operation is much faster than using the general "find" function.

File crawler

7) spell check

If you often use sublime text for English authoring, it is useful to enable spell checking. Select the Preferences > Settings–user menu and add the following code:

"spell_check": true,

8) Enhanced Sidebar

The Sidebarenhancements plugin effectively improves the sublime sidebar. After installing the plugin, right-click on the sidebar to find new features: Open in Explorer, new file, new folder, ... Open, open in the browser.

Enhanced Sidebar

Note: The hotkey opened in the browser is F12.

9) Change Theme

Sublime text can be replaced by the appearance theme. Soda theme is a good topic that can be installed in the Package manager.

Change theme

If the topic you want to install is not in the online repositories, you can also install it manually:

• Download and unzip the theme pack
• Click menu Preferences > Browse Packages ...
• Copy the theme folder to the Packages folder.
• Click menu Preferences > Settings–users and add the following code: "Theme": "Soda light.sublime-theme"

10) Replace the sublime text program icon

Not only can the theme be changed, but also the icon. There are plenty of redesigned sublime text icons on the dribbble. Replacement method:

• Download an icon that has the. icns format best. If not, convert it with IConvert.
• Terminal execution: open/applications/sublime\ text.app/contents/resources/
• Replace the sublime text 3.icns or sublime text 2.icns file.

Replace icon

11) Sync Options

If you are working on more than one computer, synchronizing option settings should be a good idea. We use Dropbox to complete this task.

First, run the following command in the terminal to upload the settings file:

mkdir $HOME/Dropbox/sublime-text-3/  
mv "$HOME/Library/Application Support/Sublime Text 3/Packages" "$HOME/Dropbox/sublime-text-3/"  
mv "$HOME/Library/Application Support/Sublime Text 3/Installed Packages" "$HOME/Dropbox/sublime-text-3/"

Then run the following command on all computers that need synchronization to download the settings:

DSTPATH="$HOME/Library/Application Support/Sublime Text 3"  
DROPBOX_PATH="$HOME/Dropbox/sublime-text-3"  
rm -rf "$DSTPATH/Installed Packages"  
rm -rf "$DSTPATH/Packages"  
mkdir -p "$DSTPATH"  
ln -s "$DROPBOX_PATH/Packages" "$DSTPATH/Packages"  
ln -s "$DROPBOX_PATH/Installed Packages" "$DSTPATH/Installed Packages"

12) Clickable URL

Using the widget Clickableurls allows the URL in the file to be clicked.

Sublime Common operations

1. Multiple cursor actions: You can edit multiple lines of code at the same time by pressing CMD (under the Windows System Ctrl) key and then selecting a different row with the mouse.
2. Reopen closed Tags: like chrome, if you accidentally close a page, you just press shift+cmd+t (press and hold shift+ctrl+t under Windows) to reopen the page. If you press the key combinations in succession, you can reopen them in the order they were closed.
3. Quick Open File: This is probably my favorite feature in sublime text. Press and hold Cmd+t (press and hold ctrl+t under Wiondows System) to open a text box, you can type the target file you want to open in the text box, the system will search for the location of the file in the project, so that you can no longer use the file directory list.
4. Jump to symbol: If you want to jump to a specific symbol quickly, press cmd+p (press and hold ctrl+p under Windows System) to open the search box, type the target symbol, and then jump to that symbol after you enter.
5. Search throughout the project document: Press and hold Shift+cmd+f (press and hold shift+ctrl+f under Windows System) to search under the entire sublime text item.
6. Jump in text or between lines: this is more of a feature of the operating system, but I found it in the process of using sublime text. On a Mac, if you hold down the ALT key while using the arrow keys, you can implement a word instead of a jump between characters. Similarly, if you press and hold the CMD key while using the arrow keys, you will jump to the other end of the line. This is ideal for quickly locating in code without a mouse.
7. Quick Change settings: Press and hold Shift+cmd+p (press and hold shift+ctrl+p under Windows) to quickly start the lookup and modify the settings for sublime text.

Here are some additions after reading the hacker News commentary:

1. Jump between words: Hold down the CTRL key and let the cursor move between words, which is sensitive to the hump type. Assuming that the cursor is at the beginning of the word "cakeparty", hold down CTRL and then press the right ARROW key to move the cursor between "E" and "P".
2. Current row up or down: You can press the Ctrl+cmd+up/down key combination to move up or down the current line.
3. Sublime Package Control: Installation of topics, syntax checking, code validation, etc. is very useful.
4. Quick text editing: Press Cmd+d to select the current text and click Cmd+d again to edit the selected text. It makes it easy to rename local variables or HTML tags.
5. Select all instances: Press and hold cmd+ctrl+g to select all instances.
6. Jump to the specified line: Press ctrl+g and enter the line number.
7. Copy the current line: Press and hold cmd/ctrl+shift+d to copy the current line.
   There are also some common actions you can click on the link, very to the force OH:
   Http://www.lupaworld.com/article-248738-1.html

Summary of shortcut keys

Select Class

• Ctrl+d selects the text that the cursor occupies, and continues, the next identical text is selected.
• Alt+f3 selected text Press the shortcut key, you can select all the same text at once to edit simultaneously. Give a chestnut: quickly select and change all the same variable names, function names, and so on.
• Ctrl+l Select the entire row, continue to select the next row, the effect is the same as the shift+↓ effect.
• Ctrl+shift+l Select multiple rows First, and then press the shortcut key to insert the cursor at the end of each line to edit the rows at the same time.
• Ctrl+shift+m Select the contents in parentheses (continue to select the parent bracket). Give me a chestnut: Quickly select the code in the delete function, rewrite the function body code, or rewrite the contents of the parentheses inside.
• CTRL+M cursor moves to the end or start position within the parentheses.
• Ctrl+enter inserts a new row in the next line. For a chestnut: even if the cursor is not at the end of the line, you can quickly insert a line down.
• Ctrl+shift+enter inserts a new row in the previous line. For a chestnut: even if the cursor is not at the beginning of the line, it can be inserted quickly.
• ctrl+shift+[Select the code, press the shortcut key, and collapse the code.
• ctrl+shift+] Select the code, press the shortcut key, and expand the code.
• Ctrl+k+0 expands all collapsed code.
• ctrl+← move the cursor to the left and move the cursor quickly.
• ctrl+→ move the cursor to the right and move the cursor quickly.
• Shift+↑ select multiple rows upwards.
• Shift+↓ Select multiple rows.
• shift+← Select the text to the left.
• shift+→ Select the text to the right.
• ctrl+shift+← Select the text to the left of the unit.
• ctrl+shift+→ Select the text to the right of the unit.
• Ctrl+shift+↑ swaps the cursor line and the previous line of code (before inserting the row of the cursor into the previous row).
• Ctrl+shift+↓ swaps the lines of the cursor and the next line of code (inserts the row of the cursor after the next line).
• Ctrl+alt+↑ Add a multiline cursor up, and you can edit multiple lines at the same time.
• Ctrl+alt+↓ adds a multiline cursor down to edit multiple lines at the same time.

Edit Class

• Ctrl+j Merge the selected lines of code to one line. For a chestnut: merge the CSS properties of the multiline format into one line.
• Ctrl+shift+d the entire line where the cursor is copied, and inserts it into the next row.
• Tab right indent.
• Shift+tab indents to the left.
• Ctrl+k+k removes code from the cursor at the end of the line.
• Ctrl+shift+k Delete the entire row.
• ctrl+/Comment Line.
• ctrl+shift+/comment Multiple lines.
• Ctrl+k+u convert uppercase.
• Ctrl+k+l convert lowercase.
• CTRL + Z undo.
• Ctrl+y restore Undo.
• Ctrl+u soft undo, feeling and gtrl+z the same.
• CTRL+F2 setting bookmarks
• Ctrl+t around the letter interchange.
• F6 Word detection spelling

Search class

• Ctrl+f Open the bottom search box to find keywords.
• Ctrl+shift+f in folders, unlike the normal editor is sublime allow to add multiple folders to find, slightly high-end, not researched.
• Ctrl+p Open the Search box. For a chestnut: 1. Enter the file name in the current project, quickly search for files, 2, enter @ and keywords, find the function name in the file, 3, enter: And number, jump to the line code in the file, 4, enter # and keyword, find the variable name.
• Ctrl+g Open the Search box and automatically take:, enter a number to jump to that line of code. For a chestnut: Quickly locate a file in which the page code is relatively long.
• Ctrl+r Open the Search box, automatically with @, enter keywords, find the function name in the file. For a chestnut: Quickly find a function on a page with more functions.
• CTRL +: Open the search box, automatically with #, enter keywords, find variable names in the file, attribute names, and so on.
• Ctrl+shift+p Open the Command box. Scene Chestnut: Open the Name box, enter the keyword, call sublime text or plug-in features, such as using the package installation plugin.
• ESC exits the cursor multi-line selection, exits the search box, command box, and so on.

Display class

• Ctrl+tab Toggles the tab of the current window in the order in which the files were browsed.
• Ctrl+pagedown Toggles the tab of the current window to the left.
• Ctrl+pageup Toggles the tab of the current window to the right.
• alt+shift+1 window split screen, restore the default 1 screen (non-keypad number)
• Alt+shift+2 left and right split screen-2 columns
• Alt+shift+3 left and right split screen-3 columns
• Alt+shift+4 left and right split screen-4 columns
• Alt+shift+5 4 Screen
• Alt+shift+8 Vertical Split Screen-2 screen
• Alt+shift+9 Vertical Split Screen-3 screen
• Ctrl+k+b Toggle the sidebar on/off.
• F11 Full Screen mode
• SHIFT+F11 free-to-disturb mode

Sublime commonly used plugins:

1. Http://www.php100.com/html/it/focus/2014/1128/7935.html
2. Http://www.oschina.net/translate/20-powerful-sublimetext-plugins?p=3#comments
3. http://blog.jobbole.com/79326/

Reference:
http://blog.jobbole.com/88648/
1190000000505218

Sublime Text 12 Secrets you don't know