Front-end development artifact Sublime Text

Source: Internet
Author: User
Tags manual writing install node

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


Installation method:

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


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 ( '' +pf. Replace ( ", '%20 ' ) ) read () print ( restart Sublime Text to finish installation ' )


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 ( '' + 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


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 ( to see the specific demo video.

Use: Tutorials-,


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)


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


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.


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


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://

Clipboard history

Features: Clipboard history

Summary: Easy to use copy/cut content


    • 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


Features: Git management

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

Use: Https://


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


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


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


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


Function: Node code hint

Tutorial: Https://


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 " }


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.


    • 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.