Sublime text front end development plug-in installation and configuration


Front end development sublimeconfig

Mac configuration

The files in this file directory are mainly aboutsublimePlug in configuration, shortcut key configuration, theme and font configuration.

Plugin list

All plug-ins can be installed using package control. Specific installation methods can be installed by Google, which is not covered in this article. It can also be installed manually using GIT.


This plug-in mainly makes writing CSS more convenient and fast. You can configure shortcut keys to add browser manufacturer prefix to label attributes. Make sure the computer is installed before installationnode

Configure shortcut keys as follows:

//Autoprefixer shortcut key settings
    { "keys": ["command+alt+p"], "command": "autoprefixer" }

Please refer to official documents for specific configuration and documents

For example, when I write CSS, I don’t care which attributes need to be prefixed. When I need to save the test, just press the shortcut key, and the plug-in will automatically prefix the attributes that need to be prefixed, as follows:

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;

Of course, the plug-in can also be added to the automation tools of its own development projects, such as gulp and grunt


ES6 will eventually replace Es5, but in the process of transition from Es5 to ES6, various browser manufacturers do not support ES6 very well.
It is mainly to compile ES6 code into Es5. As for why to do this, it’s not the content of this article. You can Google yourself.

3.Better Completion

JavaScript, jQuery, Bootstrap and other JS library automatic completion. The feature of the plug-in is that it can customize the configuration of the library that needs to be automatically completed.

After installation, its configuration file can be used to configure the library that needs to be completed

  // --------------------
  // sublime-better-completions-Package (sbc package)
  // --------------------
  // API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).
  // After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.
  // Your own setting file `sbc-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.
  // --------------------
  // APIs Setup
  // --------------------
  // `true` means enable it.
  // `false` means disable it.
  "completion_active_list": {
    // build-in completions
    "css-properties": false,
    "gruntjs-plugins": false,
    "html": false,
    "lodash": false,
    "javascript": false,
    "jquery": false,
    "jquery-sq": false, // Single Quote
    "php": false,
    "phpci": false,
    "sql": false,
    "twitter-bootstrap": false,
    "twitter-bootstrap-less-variables": false,
    "twitter-bootstrap3": false,
    "twitter-bootstrap3-sass-variables": false,
    "underscorejs": false,
    "react": false,

    // Your own completions?
    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-angularjs.sublime-settings
    "my-angularjs": false,

    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-glossary.sublime-settings
    "my-glossary": false,

    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-html.sublime-settings
    "my-html": false,

    // ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/sbc-api-my-javascript.sublime-settings
    "my-javascript": false


Parentheses highlight the matching plug-in.
Borrow a screenshot of the official website:

5.Color Highlighter

The plug-in can display the color value of the color used in the CSS file. Including CSS styles nested in HTML can also be displayed.
The following picture:

You can also adjust the display style, such as when I mouse over the color

Please refer to the official website for details.


This plug-in can highlight and auto complete the CSS3 attribute.
The specific effects are as follows:

After installation, the settings are as follows:

View → Syntax → Open all with current extension as… → CSS3


This plug-in is very smart to add comments to JS files, which is very convenient.
Refer to a screenshot of the official website:


The legendary “artifact” that can quickly write HTML code. I will not introduce it in detail. Online course search a big lump.


File difference comparison plug-in.


Before formatting JS, CSS files used both jsformat and cssformat. Use two different plug-ins in different files each time. Later, we found a plug-in that can support formatting in three languages.

Format HTML, CSS, JS files.

//HTML CSS jsprettify plug-in shortcut
    {"keys": ["command+alt+l"],"command": "htmlprettify"},


If you usually use jade as the template language, install one, which can make the display of sublime more friendly. Jade related plug-ins, code highlighting

12.javascript next – ES6 syntax

JavaScript ES6 syntax highlighting support.


This plug-in mainly includes jQuery syntax highlighting and code snippets.


These two plug-ins mainly use pre compiled languages such as SCSS or sass, which are useful and support syntax highlighting.

Tool plug-in


This plug-in is still useful. When we are in joint debugging with the backend, there is usually a development machine to store our code temporarily. At this time, if we want to make some changes. The usual steps are:
1. Upload SVN 2. Log on to the development machine SVN up. It’s a waste of time

If we use the SFTP plug-in, we can upload it to the server automatically when we save it. Configuration method:
1. Create in the project root directorysftp-config.jsonfile
2. Configure the file, as shown in the figure below


Sublime sidebar enhancements.


Syntax, function jump. But I don’t think this plug-in is easy to use.

4.Markdown Extended

This plug-in mainly enables sublime to highlight the markdown syntax. The effect is as follows:


Remove the space bar at the end of the code

Syntax check plug in list


After installation, you need to install the plug-in that needs to detect the language.


After installationSublimeLinterAfter that, install and transfer the plug-in to check the syntax of JavaScript language.


After installationSublimeLinterAfter that, install and transfer the plug-in to check the syntax of CSS.

Theme plug-in


This plug-in is mainly able to make sublime compatible with the retena screen of MAC

Need to start in your own profile

    "theme": "Soda Light 3.sublime-theme"

2.Monokai Extended

If you feel good, please visit GitHub (click me) address to give me a star. Thank you!