Sublime Text 12 Secrets you Didn’t Know

139128168 ← Click Add group

Package Control installation:

The first is to copy and paste the code in the console and press enter, sublime.wbond.NET/installatio… The second way to download PC files, Baidu a lot of schemes, here unspecified

Emmet installation:

3. Enter Emmet and Emmet Css. 4. After the installation is complete, C+E can quickly generate code

Emmet grammar:

1. Enter! Or “HTML :5”, then press Tab:

HTML: 5 or!!! : for HTML5 document types

HTML: XT: Used for XHTML transitional document types

HTML: 4S: For HTML4 strict document type

Easily add classes, ids, text, and attributes

P# foo supplements ID. Foo supplements classes h1{foo} and a[href=#] for h1 and a tags

3, nested

> : child element symbol, representing nested elements

+ : indicates the label of the same level

^ : Can elevate the label before the symbol by one line

The effect is shown below:

4, grouping

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

Generation:

    <div class="foo">  
        <h1></h1>  
    </div>  
    <div class="bar">  
       <h2></h2>  
    </div>Copy the code

5. Define multiple elements *

ul>li*3

Define multiple elements with attributes

Ul >li.item$*3$= 1, 2, 3

7, Css fast

1) w100 = “width: 100px;

2) p stands for %

E stands for EM and x stands for exCopy the code

H10p + m5e = “height: 10%; margin: 5em;

3) @ f

@font-face {

font-family:;

src:url();

}

4) Fuzzy matching

Ov :h, OV-h, OVH, and OH

5) Supplier prefix

If you enter CSS properties that are not W3C standard, Emmet automatically prefixes them with vendors, such as TRS, which generates:

-webkit-transform:;-moz-transform:;-ms-transform:;-o-transform:;transform:;Copy the code

You can also prefix any property with a “-” sign. For example, type -super-foo:

-webkit-super-foo:;-moz-super-foo:;-ms-super-foo:;-o-super-foo:;super-foo:;Copy the code

If you do not want all prefixes, you can specify them using abbreviations, such as -wm-trf to indicate only the -webkit and -moz prefixes:

-webkit-transform:;-moz-transform:;transform:;Copy the code

The prefix is abbreviated as follows:

W indicates -webkit -m indicates – moz-s indicates – ms-o indicates -o-

6) the gradient

Enter lg(left, # FFF 50%, #000)

7) Other references

Devework.com/emmets-css…. www.douban.com/note/299285…

8, JS code prompt

2) PCIC 3) Input sublimeCodeIntel

Sublime install and compile Sass

While PostCSS is the future, Sass is mature and stable, has a loyal following, open source projects, and recently Bootstrap 4 Alpha moved from Less to Sass. So it’s important to know about Sass.

Based on rapid development and efficiency, I used to compile Less/Sass through editor plug-ins in the development process, so that I could locate and fix bugs quickly.

SASS build system for Sublime Text 2 can be used to complete SASS compilation in the editor. The name is 2 but Sublime Text 3 is available without pressure.

Install Sass first to install Ruby and Sass, detailed may refer to: www.w3cplus.com/sassguide/i… Or there are a lot of tutorials on the web, you might not be able to install Sass, so you can install the test version of the next best thing, pre.

1) Install the Package Control Plugin for Sublime Text

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), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) ifdh ! = helse 'Please restart Sublime Text to finish installation')Copy the code

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)) ifdh ! = helse open(os.path.join( ipp, pf), 'wb' ).write(by)Copy the code

See: packagecontrol. IO/installatio…

2) Install the Package Control Plugin

Ctrl+Shift+P (Linux/Windows) or Command+Shift+P (OS X), then type ‘install’ to see Package Control: Install Package and select.

Wait for the list to come up and type Sass to see Sass Build System select install.

After the installation is complete, Ctrl+B (Linux/Windows) or Command+B (OS X) can compile Sass into CSS, and there will be a.map file.

More details: github.com/jaumefontal…

10. Install the multi-line comments plug-in

Install DocBlockr using Package Control. After installation, use the following methods:

A. Write your function first

function testFunction(a, b, c) {}Copy the code

B. Then, on the first line of the function, type

/ * *Copy the code

C. Press Enter to automatically generate

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

12 little secrets

1) to select

Here are some shortcuts for Sublime Text selection:

• Command + D selects a word
• Command + L Selects a row
• Command + A Select all
• Ctrl + Command + M ‘selects everything in parentheses (very useful when writing CSS or JS)

Sublime Text also supports selecting multiple lines at once: Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this feature:

• Command Hold down the Command key and click on the row you want to select
• Command + Ctrl + G press this key to select all the same text
• Command + D (when part of the text is selected) directly selects the text that appears next time

2) CSS sort

The order of CSS attributes generally doesn’t matter, because browsers will render correctly in either order. But sorting all the attributes still helps clean up the code. In Sublime Text, select the CSS properties and press F5 to sort them alphabetically.

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

3) Command Palette

Use the command palette to accomplish multiple tasks quickly. Press Command + Shift + P to bring up the panel and type the required Command. Take a look at the following examples:

Rename the file

▼ Set the HTML syntax for the file

Insert code snippets

4) Switch between tabs and projects

To open multiple tabs at the same time, use the following hotkeys:

• Command + T lists all the tabs
• Command + Shift +] Next TAB
• Command + Shift + [Previous TAB
• Command + Ctrl + P toggles the project displayed in the sidebar

5) Cross-file editing

The same edit operation can be repeated in multiple files simultaneously. For example, if you have the same code in multiple files, you can use the following steps to quickly edit it:

• Press Command + Shift + F to enter the code to look for in the Find box. You can quickly use the selected snippet by pressing Command + E.
• Specify the range of files you want to find in the Where box, or fill in to find the currently open file.
• Enter the code to Replace in the Replace box and press the Replace button to Replace in batches.

6) File crawler

Press Command + R to list all CSS selectors in a document. You can select and jump to view it immediately. This operation is much faster than using the normal “find” function.

7) Spell check

If you often use Sublime Text for English writing, enabling spell checking can be very useful. Choose Preferences > Settings-User menu and add the following code:

"spell_check": true.Copy the code

8) Enhance the sidebar

The Sidebarenh chimes plug-in is an effective improvement to Sublime’s sidebar. After installing the plug-in, right-click on the sidebar to find the new features: Open in Explorer, New File, New Folder, to… Open, open in a browser.

Note: The hotkey opened in the browser is F12.

9) Change the theme

Sublime Text’s look theme is interchangeable. A good Theme is Soda Theme, which can be installed in the package manager.

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

• Download and extract the theme package
• Click the menu Preferences > Browse Packages…
• Copy the theme folder into the Packages folder.
• Click the menu Preferences > Settings-Users and add the following code: “theme”: “Soda Light. Sublime-theme”

10) Replace the Sublime Text program icon

Not only themes can be changed, but ICONS can also be changed. There are plenty of beautifully redesigned ICONS for Sublime Text on Dribbble. Replacement method:

• Download an icon that has. Icns format best. If not, use iConvert to convert it.
• Terminal execution: open/Applications/Sublime does \ Text app/Contents/Resources /
• Replace the Sublime Text 3.icns or Sublime Text 2.icns file.

11) Synchronization options

If you’re working on multiple computers, the sync option Settings should be a good idea. We borrowed Dropbox to do this.

First run the following command on 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/"Copy the code

Then run the following command on all the machines you need to synchronize 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"Copy the code

12) Clickable URLS

Use a small plug-in called ClickableURLs to make urls in files clickable.

Common operations for Sublime

1. Multi-cursor operation: You can edit multiple lines of code at the same time by pressing Cmd (Ctrl under Windows) and selecting different lines with the mouse.
2. Re-open Closed tabs: Like Chrome, if you accidentally close a page, you can re-open it by pressing Shift+Cmd+T (on Windows, hold Shift+Ctrl+T). If you press this key combination consecutively, you can turn them back on in the order they were closed.
3. Quick file opening: This is probably my favorite feature of Sublime Text. Holding down Cmd+T (Ctrl+T on Wiondows) will open a text box that you can type in to open the target file, and 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. To jump to a symbol: If you want to jump quickly to a particular symbol, press Cmd+P (Ctrl+P in Windows) to open the search box, type in the target symbol, and press Enter to jump to that symbol.
5. Search through the entire project document: Hold Shift+Cmd+F (For Windows, Shift+Ctrl+F) and search under the entire Sublime Text project.
6. Jumping between Text or lines: This is more of an OS trait, but I discovered it while using Sublime Text. On the Mac, if you hold down Alt and use the ARROW keys, you can jump between words instead of characters. Similarly, if you hold down Cmd and use the arrow keys, you will jump to the other end of the line. This is great for quickly locating code without using a mouse.
7. Quick Settings change: Hold Down Shift+Cmd+P (Shift+Ctrl+P on Windows) to quickly launch lookups and make changes to Settings for Sublime Text.

Here are a few more things to add after reading the hacker news comments:

1. Jump between words: Hold down the Ctrl key and move the cursor between words. This is hump sensitive. Assuming that the cursor is currently at the beginning of the word “cakeParty,” hold Down Ctrl and press the right arrow key to move the cursor between “E” and “P.”
2. Move the current line Up or Down: Press Ctrl+Cmd+Up/Down to move the current line Up or Down.
3. Sublime Package Control: Great for installing themes, syntax checking, code validation, and more.
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: Hold CMD +Ctrl+G to select all instances.
6. To jump to the specified line: press Ctrl+G and enter the line number.
7. Copy the current line: Hold Cmd/Ctrl+Shift+D to copy the current line. There are some common operation can click the link, very to force oh: www.lupaworld.com/article-248…

Summary of Shortcut keys

Choose class

• Ctrl+D selects the text occupied by the cursor. If you continue, the next text of the same type will be selected.
• Alt+F3 select the text and press the shortcut key to select all the same text at one time for simultaneous editing. For example: quickly select and change all the same variable names, function names, etc.
• Ctrl+L selects the entire row. If you continue to select the next row, the effect is the same as Shift+↓.
• Ctrl+Shift+L selects multiple lines and then presses the shortcut key to insert the cursor at the end of each line to edit them simultaneously.
• Ctrl+Shift+M selects the contents of the parentheses (continue selecting the parent parentheses). For example: quickly check to remove code from a function, rewrite the function body code, or rewrite the contents inside parentheses.
• Ctrl+M moves the cursor to the end or start position in parentheses.
• Ctrl+Enter inserts a new line on the next line. For example, you can quickly insert a line down even if the cursor is not at the end of the line.
• Ctrl+Shift+Enter inserts a new line on the previous line. For example, you can quickly insert a line up even if the cursor is not at the beginning of the line.
• Ctrl+Shift+[Select code, press shortcut key, collapse code.
• Ctrl+Shift+] select the code and press the shortcut key to expand the code.
• Ctrl+K+0 to expand all folding codes.
• Ctrl+← Moves the cursor unevenly to the left, moving the cursor quickly.
• Ctrl+→ Move the cursor unitary to the right, moving the cursor quickly.
• Shift +↑ Up select multiple rows.
• Shift +↓ Down select multiple rows.
• Shift+← Selects text to the left.
• Shift+→ Select text right.
• Ctrl+Shift+← selects the text unitary to the left.
• Ctrl+Shift+→ Select the text unitarily to the right.
• Ctrl+Shift+↑ Swaps the line where the cursor is and the previous line of code (insert the line where the cursor is before the previous line).
• Ctrl+Shift+↓ Interswitch the cursor line with the next line of code (insert the cursor line after the next line).
• Ctrl+Alt+↑ Add the cursor to edit multiple lines at the same time.
• Ctrl+Alt+↓ Add the cursor down to edit multiple lines at the same time.

Edit the class

• Ctrl+J merges the selected multiple lines into one line. For example, merge multi-line CSS properties into one line.
• Ctrl+Shift+D copies the entire line where the cursor is and inserts it into the next line.
• Tab indents to the right.
• Shift+Tab indents to the left.
• Ctrl+K+K deletes code from the cursor to the end of the line.
• Ctrl+Shift+K delete the entire line.
• Ctrl+/ comment a single line.
• Ctrl+Shift+/ comment multiple lines.
• Ctrl+K+U converts uppercase.
• Ctrl+K+L converts to lowercase.
• Ctrl + Z.
• Ctrl+Y resumes undo.
• Ctrl+U soft Undo feels the same as Gtrl+Z.
• Ctrl+F2 sets bookmarks
• Ctrl+T left and right switch letters.
• F6 word spelling detection

Search class

• Ctrl+F opens the bottom search box to find the keyword.
• Ctrl+ Shift +F searches within folders, and sublime allows you to add multiple folders for searching, which is a bit more advanced and unexplored than normal editors.
• Ctrl+P opens the search box. For example: 1, enter the name of the file in the current project to quickly search the file, 2, enter @ and keyword to find the function name in the file, 3, enter: and number to jump to the line of code in the file, 4, enter # and keyword to find the variable name.
• Ctrl+G to open the search box, automatically with:, enter a number to jump to the line of code. For example: quickly locate files with long page code.
• Ctrl+R opens the search box with @ automatically, enter the keyword to find the function name in the file. For example: quickly find a function on a page with many functions.
• Ctrl+ : Open the search box, automatically with #, enter the keyword, find the variable name in the file, attribute name, etc.
• Ctrl+Shift+P opens the command box. Scenario Chestnut: Open the naming box, enter the keywords, and invoke sublime Text or plug-in functionality, such as installing the plug-in using package.
• Esc exit cursor multi-line selection, exit search box, command box, etc.

According to the class

• Ctrl+Tab Toggles the tabs of the current window in the order that the files are browsed.
• Ctrl+PageDown Toggles the TAB page of the current window left.
• Ctrl+PageUp Toggles the tabs of the current window to the right.
• Alt+Shift+1 Window split screen, restore default 1 screen (non-keypad number)
• Alt+Shift+2 Split screen -2 columns
• Alt+Shift+3 Split screen -3 columns
• Alt+Shift+4 Split screen -4 columns
• Alt+Shift+5 evenly split 4 screens
• Alt+Shift+8 Vertical split screen -2 screen
• Alt+Shift+9 Vertical split screen -3 screen
• Ctrl+K+B toggles/closes the sidebar.
• F11 Full screen mode
• Shift+F11 DND mode

Commonly used plugins for Sublime:

1. www.php100.com/html/it/foc…
2. www.oschina.net/translate/2…
3. blog.jobbole.com/79326/

Reference: blog.jobbole.com/88648/ segmentfault.com/a/119000000…

“Luff luff duang, pay attention ~~”