Front-end development artifact Sublime Text

Useful Sublime plug-in collection –sublime Prerequisites preface

Into the front-end field began, learning to use sublime, has been used very handy, speed is my favorite, fast no editor can rival. Or not much nonsense, into the subject. A lot of how much, use it to know.

Plugin Introduction to Package Control

Features: Installation package management

Introduction: Sublime plug-in console, provide add, delete, disable, find plug-ins and other functions

Use: https://sublime.wbond.net/installation

Installation method:

1. CTRL + ', the console appears
2. Paste the following code into the console

ST2:

1

ImportUrllib2,Os; 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( ))); Open( Os.Path.Join( Ipp, Pf), ' WB ' ).Write( Urllib2.Urlopen ( ' http://sublime.wbond.net/' +pf. Replace ( ", '%20 ' ) ) read () print ( restart Sublime Text to finish installation ' )

ST3:

1

ImportUrllib.Request,Os; Pf = ' Package Control.sublime-package '; Ipp = Sublime.Installed_packages_path(); Urllib.Request.Install_opener( Urllib.Request.Build_opener( Urllib.Request.Proxyhandler()) ); Open(Os.Path.Join(Ipp, Pf), ' WB ' . Write (urllib. Request. Urlopen ( ' http://sublime.wbond.net/' + PF replace ( ", '%20 ' ) ) . Read () )

Other methods:

If the above methods do not install, use the following method

1. Select menu: Preferences > Browse Packages
2. Open the sublime plug-in installation package folder
3. Download the file and copy it to the open folder
4. Restart Sublime

Emmet

Function: Encoding shortcut key, front-end prerequisite

Introduction: Emmet as an upgraded version of Zen coding, for the front end, but the necessary plug-in, if you are not familiar with it, you can on its official website (http://docs.emmet.io/) to see the specific demo video.

Use: Tutorials-http://docs.emmet.io/cheat-sheet/, http://peters-playground.com/Emmet-Css-Snippets-for-Sublime-Text-2/

Jsformat

Features: JavaScript code formatting Plugin

Introduction: Many of the site's JS code are compressed, one-line or even confusing compression, which makes us look very laborious. And this plugin can help us to format the original code, including line wrapping and indentation, and so on, is the code at a glance, faster read ~

Use: In the compressed JS file, right-click to select Jsformat or use the default shortcut key (CTRL+ALT+F)

Less

Function: Less Highlight plugin

Introduction: With less students know that sublime does not support the syntax highlighting, so this plugin can help us

Use: Open. Less files or set to less format

Less2css

function: Compile Less

Summary: When a file change is monitored, the compilation is saved as a. css file

Use: Open the. less file, write the code to save and see the files that generate. css at the same time, if not, you need to install node. Compiling with this method is not recommended, either with koala or with grunt.

Alignment

function: "=" number alignment

Description: Variable definitions are too many, vary in length, can be aligned by one key

Use: Default shortcut key Ctrl+alt+a and QQ screenshot conflict, you can set other shortcut keys such as: Ctrl+shift+alt+a; Select the text you want to align first

Sublime-autoprefixer

Features: CSS adds a private prefix

Summary: CSS is not standardized, so you need to give each big browser a prefix to solve the compatibility problem

Use: Ctrl+shift+p, select Autoprefixer. You need to install node. js.

Other settings, such as shortcut keys, refer to: Https://sublime.wbond.net/packages/Autoprefixer

Clipboard history

Features: Clipboard history

Summary: Easy to use copy/cut content

Use:

• Ctrl+alt+v: Show History
• Ctrl+alt+d: Clear History
• Ctrl+shift+v: Paste previous record (oldest)
• Ctrl+shift+alt+v: Paste Next Record (latest)

Bracket highlighter

Features: Code matching

Description: Can match [], (), {}, "", ", <tag></tag>, highlighting for easy viewing of start and end tags

Use: Click on the corresponding code to

Git

Features: Git management

Summary: Plug-ins basically implement all the features of Git

Use: Https://github.com/kemayo/sublime-text-git/wiki

Jquery

Function: JQ function hint

Introduction: Fast input JQ function, is a good way to lazy

Doc? Blockr

Features: Generating graceful annotations

Introduction: standard annotations, including function name, parameter, return value, etc., and display in multiple lines, manual writing is more troublesome

Use: Enter/*,/** and enter, and many other uses, please refer to

Https://sublime.wbond.net/packages/DocBlockr

Color? Picker

Function: color palette

Summary: When you need to enter a color, you can select a color directly

Use: Shortcut key Windows:ctrl+shift+c

ConvertToUTF8

Function: File transcoding into Utf-8

Introduction: Through this plug-in, you can edit and save the current encoding is not Sublime Text support files, in particular, the use of GB2312,GBK,BIG5,EUC-KR,EUC-JP, ANSI and other users of CJK. ConvertToUTF8 supports both Sublime Text 2 and 3.

Use: Automatically convert to utf-8 format after installing plug-ins

Autofilename

Function: Shortcut input file name

Introduction: Automatic completion of file name input, slice selection

Use: Enter "/" to see other files relative to the project folder

Nodejs

Function: Node code hint

Tutorial: Https://sublime.wbond.net/packages/Nodejs

Imesupport

Function: Sublime Chinese Input method

Introduction: Still Tangled Sublime Text Chinese Input method can not follow the cursor? Try "imesupport" this plugin! Currently only supported Windows, in the search and other interfaces do not very well follow the cursor.

Use: Ctrl + Shift + p→ input pci→ input imesupport→ Enter

Trailing spaces

Function: Detect and remove extra space in code with one click

Introduction: Also in tangled code there are extra spaces and the code is not standardized? Or a Virgo episode? The next plug-in to help you realize the discovery of extra space, a key to delete the space, save automatically delete the extra space, let your code specification refreshing up

Use: Install the plugin and reboot to automatically prompt for extra spaces. Remove extra space with one click: ctrl+shitf+t (Configuration required), more configuration click on the title. Shortcut configuration: In Preferences/key bindings–user plus code (in array)

1	{ "keys": ["Ctrl+shift+t"], "command": "Delete_trailing_ Spaces " }

Filediffs

Features: Powerful comparison code with different tools

Summary: Compare the differences between the current file and the selected code, the code in the Clipboard, the other file, the unsaved file. Can be configured to show differences in the external diff tool, accurate to the line.

Use: Right-click tab, appear filediffs menu or diff with tab ... Select the corresponding file to compare

GBK Encoding Support

Function: Chinese recognition

Summary: Sublime Text 2 recognizes Chinese in the UTF-8 format, does not recognize GBK and ANSI, so opening many documents with Chinese characters will be garbled. You can identify GBK and ANSI by installing the plug-in GBK support.

Use:

• Open a GBK File
• Save file with GBK encoding
• Change file encoding from UTF8 to GBK or GBK to UTF8

Git? Gutter

Introduction: Indicates where code is inserted, modified, deleted

Front-end development artifact Sublime Text