Sublime Text 3 Plugin Finishing

Sublime text as a well-known code editor, its advantages do not need to repeat. The interface is neat and beautiful, the text is powerful, and runs extremely fast, it is very suitable for writing code, writing articles to take notes. Sublime text also supports Mac, Windows, and Linux platforms for user-friendly use. A wide variety of powerful plug-ins give sublime Text 3 the icing on the cake. After downloading the package control, you can quickly open the plugin path.

Here is my sublime text 3 plugin list, which summarizes the convenience of being configured directly in other environments.

1. sidebarenhancements
Sidebarenhancements is a very useful right-click menu Enhancement Plug-in, there is a diff format to display unsaved changes, display the file in the File Manager, copy the file path, locate the file in the sidebar, etc., there are basic such as new file/directory, edit, open/Run, Display, in Select/Parent directory/Project Find, Cut, copy, paste, rename, delete, refresh and other common functions.

Configure shortcut keys
Click Preferences, Package Settings, Side Bar, Key Bindings-user in the toolbar, and configure it in the following format in the open configuration file.

1 [
  2 // Use the shortcut F12 to open the file directly in chrome
  3 {
  4 "keys": ["f12"],
  5 "command": "side_bar_files_open_with",
  6 "args": {
  7 "paths": [],
  8 "application": "C: \\ Program Files (x86) \\ Google \\ Chrome \\ Application \\ chrome.exe",
  9 "extensions": ". *"
10}
11}
12] 

Open Other software
Sublime text can directly preview files such as pictures, but with this plug-in, you can directly enable Photoshop and other tools in the side bar.
    How to use:
Right-click on a file in side bar and have an open with option to enter edit applications to configure the file.
The following is my configuration of Photoshop, the main change is to change the value in the application to the computer software path;
After you save it, you can select Photoshop in open with to open the file of the image type.

 
 
 1 //Photoshop
 2 {
 3   "caption": "Photoshop",
 4   "id": "side-bar-files-open-with-photoshop",
 5 
 6   "command": "side_bar_files_open_with",
 7   "args": {
 8     "paths": [],
 9     "application": "C:\\Program Files\\Adobe\\Adobe Photoshop CC 2014\\Photoshop.exe", // OSX
10     "extensions": "psd|png|jpg|jpeg", //any file with these extensions
11     "args": []
12   },
13   "open_automatically": false // will close the view/tab and launch the application
14 },

2. Bracket? Highlighter
Bracket? Highlighter is a bracket, quotation mark, label highlighting plug-in, support [], (), {}, "", "" and <tag></tag>, and so on, than the sublime text comes with a much more obvious highlighting.
  How to use: installation is in effect

3. filediffs
The Filediffs plugin allows developers to compare the differences between two different files, including the current file, another file, the code in the Clipboard, or even a file that is not saved.
  How to use:
Right-click on the open file or the selected text to have the relevant options, filediffs menu is used to display all commands.

4. Docblockr
Docblockr is a plug-in for generating annotations that makes it easy to document your code.
It parses functions, variables, and parameters, and automatically generates a document paradigm based on them, and your job is to fill in the corresponding instructions.

5. JS Format
A JS code format plugin.
  How to use: Ctrl+alt+f

6. Trimmer
You know that when you write code, there are some unnecessary spaces due to errors or some other reason. It is important to note that extra spaces can sometimes cause errors.
This plugin will automatically remove these unnecessary spaces.
  How to use:
By default, the shortcut key is Ctrl+alt+s, which clears the space at the end of each line.
or enter Ctrl+shift+p to bring up the command panel and enter trimmer to display all actions.
    

7.Emmet
Emmet (formerly Zen Coding) is an indispensable plugin for front-end development, which makes it easy to write HTML and CSS code, saving a lot of time.
Emmet enables developers to write code in an abbreviated form, and then extend the code to the full style automatically with the extension feature.
As early as 2009, Zen coding as a revolutionary HTML and CSS code-editing plugin once it came out, until now it has helped countless developers to reduce their time, making it easy and interesting to write code. Now, Emmet has surpassed Zen coding to reach a higher level, and the functionality of universality will bring convenience to more developers.
  Basic usage: Enter a shorthand form and press the Tab key.
See official documentation for detailed usage.

8.SublimeCodeIntel
Sublimecodeintel is a code hint and complement plugin that supports JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, All languages such as Django, HTML5, Perl, CSS, Twig, less, Smarty, node. js, Tcl, Templatetoolkit, and PHP are a better extension of the Sublimetext code-hinting feature. The code hinting feature can only prompt the system code, and Sublimecodeintel can prompt the user to customize the code. Sublimecodeintel supports the ability to jump to variables, function definitions, and automatic completion of functions, it is very convenient.

9.SublimeLinter
Sublimelinter is a handful of code-checking plugins that work in sublime text 3, Sublimelinter supports more than 10 development languages such as JavaScript, CSS, HTML, Java, PHP, Python, Ruby, and more. But the premise is that you need to configure the appropriate language environment, to check the JavaScript code needs to install node. js, check the PHP code to install PHP and configure the environment. Sublimelinter can prompt you to write code that is not standardized and wrong, and to develop our good coding habits and style.

Ten. Csscomb
Csscomb is a CSS coding style formatter that you can easily write your own configuration to make your stylesheets look and match.
The premise is that you need to install node. js.

Custom configuration:
Can be in Csscomb's official website, set up according to their own needs to build the configuration, the following is the configuration I used;
It is then placed in the. csscomb.json file of the installation directory, overwriting the default settings;
Or, in sublime text, open preferences, package Settings, Csscomb, refer to Settings-default to set your own settings-user.

 
 
 1 {
 2   "always-semicolon": true,
 3   "color-case": "lower",
 4   "block-indent": "\t",
 5   "color-shorthand": true,
 6   "element-case": "lower",
 7   "leading-zero": false,
 8   "quotes": "double",
 9   "space-before-colon": "",
10   "space-after-colon": " ",
11   "space-before-combinator": " ",
12   "space-after-combinator": " ",
13   "space-between-declarations": "\n",
14   "space-before-opening-brace": " ",
15   "space-after-opening-brace": "\n",
16   "space-after-selector-delimiter": " ",
17   "space-before-selector-delimiter": "",
18   "space-before-closing-brace": "\n",
19   "strip-spaces": true,
20   "tab-size": true,
21   "unitless-zero": true,
22   "vendor-prefix-align": true
23 }

How to use:
1. Shortcut key: Ctrl+shift+c
2. Right mouse button: Run csscomb
3.ctrl+shift+p bring up the command panel and enter run Csscomb

Sublime Text 3 plug-in grooming