Objective:
Many plugins have started to abandon support ST2, so it is recommended to use ST3, A lot of the latest plugins and latest features are no longer supported St2 .
Poke here:HTTP://WWW.SUBLIMETEXT.COM/3
1. All Plugins
Ease of Use:
Monokai Extended theme, recommended use
HTML5,HTML5 Label Expansion
Js? Format,javascript formatting
CSS format,css Formatting
tag,html formatting
Brackethighlighter, tag-to-tag
Side? Bar? Enhancements, enhanced side-Sidebar
Bufferscroll, code collapse state reserved
Styletoken, Tag color code
Function:
Emmet, Front end artifact
TORTOISESVN,SVN, you know that.
Quote? HTML, stitching HTML into JS Insert string, artifact
Clipboard Manager, enhanced clipboard with access to history Clipboard records
Fileheader, file template, Automatic Update modification time
Autoprefixer, browser private property prefix completion (node. js dependency)
Colorconvert,rgba color conversion, hex color converted to RGBA color
Better completion, almighty code hint
Livestyle, bidirectional change no refresh Live preview, including Chrome plugin Emmet Livestyle
SFTP, need to activate, look here http://mooring.iteye.com/blog/2067269
*jquery,jquery code hint (Sublimecodeintel can replace this plugin)
*sass and Sass build, using sass prerequisites, Ctrl+b performing the compilation
*yui Compressor,js and CSS compression (JRE dependent), Ctrl+b perform compilation
We recommend the use of future-oriented front-end automation tools (relatively mature grunt, and the rising star Gulp, as well as Baidu FIE), the above two stars can be replaced by automation tools.
Other:
CONVERTTOUTF8,GBK encoding Compatible
Imesupport, Input method does not follow the installation at any time
Trailingspaces, extra space markers, the Gospel of obsessive-compulsive disorder patients
Hasher, Symbol escape, ctrl+shift+p select Entity Encode
Packageresourceviewer, plugin modification required, ctrl+shift+p call Open Resource
2, configuration 1) User Configuration
Trim_trailing_white_space_on_save, automatic removal of extra space at the end of the line, Virgo more peace of mind.
Ensure_newline_at_eof_on_save, the end of the file automatically keep a blank line, understand people naturally know its usefulness.
Font_face set the font. Microsoft Yahei Mono is a hybrid font that is designed for code optimization and looks comfortable. Of course you can also use your own favorite fonts, or delete the line, using the default font.
Disable_tab_abbreviations is set to True to disable the TAB function of Emmet (use ctrl+e), the tab function of the system is still commendable. Of course you can also not set it up to fully use the Emmet tab completion feature.
Translate_tabs_to_spaces very clear is to convert the Code tab alignment to a space alignment, Tab_size mates set the number of spaces. This requirement varies from person to person and does not like to be removed.
Draw_minimap_border, used for the right code preview when the area is added to the border, easy to identify.
Save_on_focus_lost, window out of focus immediately save the file, well no longer worry about you forget to save.
Highlight_line, the current row is highlighted. Word_wrap, set the line wrap.
Fade_fold_buttons, the code snippet to the right of the default display line number closes the expansion triangle.
Bold_folder_labels, Sidebar folder display bold, different from the file.
Highlight_modified_tabs, highlight unsaved files.
default_line_ending: "Unix", using Unix-style line breaks.
Auto_find_in_selection:true, open the search in the selected range instead of the entire document
Microsoft yahei Mono Font Download sutep
2) Default shortcut key modification
3) Default HTML completion modification
ST3 with the HTML code completion mechanism, the previous configuration of the Disable_tab_abbreviations disabled the Emmet tab function, just because I feel that the HTML complement to use more handy. I won't say it again, of course, what a ghost.
Ctrl+shift+p, input Open Resource, enter, select HTML, enter, select html_completions.py, enter can be modified.
Replace the following (perhaps on line 170th:
("A\ttag", "a Href=\" javascript:void (0), ">$0</a>"), ("Iframe\ttag", "iframe src=\" $1\ ">$0</iframe" > "), (" Link\ttag "," Link href=\ "$1\" rel=\ "stylesheet\" type=\ "Text/css\"/> "), (" Script\ttag "," Script type=\ " Text/javascript\ "src=\" $1\ ">$0</script>"), ("Style\ttag", "style>$0</style>"), ("Img\ttag", "img Src=\ "$1\" alt=\ "$2\"/> "), (" Param\ttag "," param name=\ "$1\" value=\ "$2\" > "), (" Br\ttag "," br/> "), (" Input\ Ttag "," Input type=\ "$1\"/> ")
4) Plugin Modification
After upgrading ST3, the plugin's modification relies heavily on packageresourceviewer, using ctrl+shift+p, entering Open Resource, enter to view all plug-in directories, the following instructions do not repeat this step. Self-modified plugins will automatically generate the corresponding files in the Packages folder.
Emmet Auto-prefix when using @keyframes and still in ... After a Google, in an English discussion post to see Emmet @keyframes using snippets (can create their own snippets, for the commonly used code very efficient, please Google yourself).
Open Resource Select Emmet, modify the Snippets.json in the Emmet folder. Find the "@kf" and replace it with the following:
"@kf": "@keyframes ${1:identifier} {\n\t${2:from} {${3}}${6}\n\t${4:to} {${5}}\n}",
After that, in CSS, enter @k, and then ctrl+e can generate a standard block of @keyframes code. The things in the back are given to autoprefixer.
5) Other
1, bidirectional modification no refresh Preview
In addition to installing the Livestyle plugin, the appropriate Chrome plugin Emmet Livestyle is also required. Is the connection reset? Oh, you must be teasing me, self-found the wall road bar juvenile. Also, there seems to be a plugin for Firefox and Safari.
2.
Fileheader is a file template plug-in, you can customize various file templates and file header information, save can automatically update the file when the modification time.
Fileheader configuration files are also saved in the Packages folder, template in the body corresponding file templates, header corresponding to the file header, the file corresponding to the format named, modified very simple, the following dynamic diagram example CSS automatically update the file modification time.
3, Side? Bar? Enhancements
Open with can set the shortcut key program opened, such as the use of each browser to open the corresponding shortcut keys, self-Google.
Edit Preview URLs, editing project paths and corresponding URL prefixes (not as if Chinese is supported) for configuring default open domain name path settings
{// "Local Project path": { "url_testing": "Test Environment Address", "url_production": "Official Environment Address" },//above, including bank, below is example "D :/xampp/htdocs/example/": { " url_testing ":" http://localhost/example/", " url_production ":"/HTTP// www.baidu.com/example/" }}
The "type" here: "Testing" corresponds to the "test environment address" above. You can also specify "production" to open the "official environment address".
After the setup is complete, it is very convenient to open the file in the local test environment using F12
3. Other
There are two types of shortcut keys.
1. toolbar Preferences–key bindings-user add shortcut keys.
2. Directly modify the plug-in configuration file.
Method 1, you can refer to Clipboard Manager and Autoprefixer configuration, the most important is the value of command. This can usually be found in the plugin's readme. I don't know where the README is. Open Resource find the corresponding plugin and you can see it. Or go to the plugin's GitHub homepage (if you have one ...).
Method 2, take ConvertToUTF8 plugin as an example, it solves the problem that ST3 native does not support Chinese encoding file. However, it has a default shortcut key Ctrl+shift+c
Open the Packages folder to find the plug-in directory (not in the Packages folder plug-ins please use Open Resource), you can see a few. sublime-keymap files, find the file corresponding to the operating system name you use, open it with ST3
Sublime Text3 Configuring plug-in Package logging