Sublime text common shortcut keys and plug-in configuration

Most common shortcut keys

control+ ' console shift+cmd+p command panel cmd+f (control+f) Find option+cmd+f Find replacement

cmd+/(control+/) Add or remove comments to selected rows

Cmd+z (CONTROL+Z) revoke cmd+y (control+y) revert revocation

Plug-in installation configuration

To enable the package control method:

Menu View--show Console (This step or control+ ' implementation) to open the console interface, paste into the relevant system Pyhon code and enter--restart sublime Text

To install the plugin:

Cmd+shift+p (control+shift+p) Open the command panel--install package Enter-Enter or select the plug-in you want to install to complete the installation.

Common Sublime Text plugins

Emmet Plugin: implementation function (HTML:5->CTRL+E code Auto-completion)

SFTP: Directly edit files on an FTP or SFTP server

YUI Compressor: Compressing js and CSS files

Minify: Compression js

Jsformat: Format code, press CONTROL+ALT+F format code (compressed JS file)

Sidebarenhancements: Sidebar Displays by directory

Codeintel: Smart hints such as method names, code prompts automatically

Autoprefixer:css add a private prefix. CSS is not standardized yet, so a prefix is given to each large browser to resolve compatibility issues.

How to use: Ctrl+shift+p, select Autoprefixer. Need to install node. js

Snippets: Code Snippets function, save our common code, and then repeatedly call through the form of plugins

ConvertToUTF8: transcoding Plugin

Prettify:html, CSS, JS, JSON ... Use CTRL+SHIFT+H to format a key

Theme:soda Skin Selection

Git: Provides a collection of commands common to Git

AUTOFILENAME Automatic hint Path plugin

Demonstrates the use of the snippets plugin

1 <Snippet>2     <content><![cdata[You need to insert the code snippet ${1:name}]]></content>3     <!--Optional: Shortcut keys, the ability to use tab Auto-complete code -4     <Tabtrigger>Xyzzy</Tabtrigger>5     <!--Optional: Use range, do not fill in the representative for all files valid. Attached: Source.css and test.html correspond to different documents respectively.  -6     <Scope>Source.python</Scope>7     <!--Optional: Display instructions in the Snippet menu (supports Chinese). If not defined, the menu displays the file name of the current file.  -8     <Description>My Fancy Snippet</Description>9 </Snippet>

${1:name} indicates where the cursor is positioned after the code is inserted, and can be inserted more than once. Where: Name is a custom parameter (optional).
${2} indicates that after the code is inserted, pressing the TAB key, the cursor jumps to the appropriate position (and so on) in order.

Look at the following example:

1 <Snippet>2      <content>3      <![cdata[4 <footer>5           <P>copyright©2008-2012 ${1:bluesdream}.com</P>6           <P>Value-added telecom business license Shanghai B2-${2}<ahref="#">Shanghai ICP No. ${3}</a> </P>7      </Footer>8 ]]>9      </content>Ten      <Tabtrigger>Cft</Tabtrigger> One      <Description>Custom-footer</Description> A      <Scope>Text.html</Scope> - </Snippet>

After creation, save in the \packages\user directory (example X:\Sublime Text 2.0\data\packages\user), the file is named Cft-code, suffix. Sublime-snippet.

At this point we open an HTML file, enter CFT, and press TAB, and the code snippet that we just wrote is plugged in. And at this point the cursor stays at the location of the ${1} we marked, and if we press TAB again, the cursor jumps to the position of ${2}. Since we have defined in scope only for use in HTML files, it is not possible to insert code snippets at this point if we open a file in CSS or other format.

Add: In addition to using the shortcut key to tab out the code, we can also load through the menu, open Tools > Snippet, select Snippet:custom-footer. If you do not define description, you will now see the Snippet:cft-code option named after our file name.

Sublime text common shortcut keys and plug-in configuration