Front-end development sublime text common plug-ins and configuration

Front-end Development SUBLIMECONFIGMAC configuration

The files in this directory are mainly aboutsublimeplug-in configuration, shortcut configuration, theme and font configuration.

Plugin List

All plug-ins can be installed using the package control, the specific installation method can be installed by Google, not within the scope of this article. It can also be installed manually using Git.

1. Autoprefixer

The plug-in mainly makes CSS more convenient and fast, you can configure shortcut keys to tag properties to add browser vendor prefix. Before installing, you need to determine the computer installationnode.

Configure the shortcut keys as follows:

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

See the official documentation for specific configuration and documentation

For example, when I write CSS is not concerned about which attributes need to add a vendor prefix, when I need to save the test, only need to press the shortcut key, the plug-in will automatically add a prefix to the property to be added prefixes, 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 their own development project automation tools, such as: Gulp, Grunt

2. Babel

ES6 will eventually replace the ES5, but in the process from ES5 to ES6, each browser vendor is not very good at ES6 support.
The main is to compile the ES6 code into ES5. As for why to do so, is not the content of this article, you can self-Google understand.

3. Better Completion

JavaScript, JQuery, Bootstrap and other JS Library auto-completion. The plug-in is characterized by the ability to customize the library to which the configuration needs to be fully automated.

After the installation, its configuration file can be configured to complete the library

{
  // --------------------
  // 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 }
}

4. Brackethighlighter

Parentheses highlight the plug-in.
To borrow a website:

5. Color Highlighter

The plugin can display the color values of the colors used in the CSS file. Nested CSS styles, including HTML, can also be displayed.
Such as:

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

Specific can refer to the official website of the instructions.

6. CSS3

The plugin can highlight and auto-complete the CSS3 attribute.
The specific results are as follows:

After installation, the following settings are set:

View→syntax→open all with the current extension as ... →css3

7. Docblockr

This plugin can be very smart to add comments to the JS file, this is very convenient.
Refer to one official website:

8. Emmet

The legendary "artifact" of writing HTML code quickly. The specific will not be introduced. Online tutorial A big lump of a search.

9. filediffs

File difference comparison plugin.

10. html-css-jsprettify

The previously formatted JS,CSS file uses both Jsformat and Cssformat. Use two different plugins each time in a different file. Later found a plugin that can be formatted in three languages.

Format the Html,css,js file.

//html-css-jsprettify plugin shortcut
     {"keys": ["command+alt+l"],"command": "htmlprettify"}, 

11. Jade

If the usual template language use jade, or install a bar, this can make Sublime display more friendly. Jade related plugins, code highlighting

12. JavaScript next-es6 Syntax

Support for JavaScript ES6 syntax highlighting.

13. JQuery

This plugin mainly includes jQuery syntax highlighting, code snippets.

14. SassAnd SCSS

These two plug-ins are mainly used SCSS or sass These precompiled languages are useful, support syntax highlighting.

Tool plug-in 1. SFTP

This plugin is still very useful. When we are in the back-end, we usually have a development machine that temporarily stores our code, and this time if we want to make some changes. The usual steps are:
1. Upload svn 2. Mount the dev machine svn up. This process is a waste of time.

If we can save it by using the SFTP plugin, it will be automatically uploaded to the server. Configuration method:
1. Create a file in the project root directorysftp-config.json
2. Configure the file, detailed configuration such as

2. sidebarenhancementsAnd sidebarfolders

Sublime side bar Enhancement plugin.

3. Sublimecodeintel

syntax, function jumps. But I used the process to feel that the plugin is not very useful.

4. Markdown Extended

This plugin mainly enables Sublime to support the markdown syntax highlighting. Effects such as:

5. trailingspaces

Remove the spacebar at the end of the code

Syntax check plugin list 1. Sublimelinter

After installation, additional plugins are required to detect the language.

2. Sublimelinter-jshint

After the installation is complete,SublimeLinterthe plugin makes a syntax check of the JavaScript language.

3. Sublimelinter-csslint

After installing theSublimeLinterplugin to the CSS language syntax detection.

Theme Plugin 1. Theme-soda

The plugin is primarily capable of making sublime compatible with the Mac's Retina screen

Need to start in your own configuration file

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

2. Monokai Extended

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

Front-end development sublime text common plug-ins and configuration