Sublime Text 3 tutorial (2)

This section mainly installs some sublime text 3 plugins. first, common plug-in installation

1, ConvertToUTF8 plug-in installation

a) Function Description: ConvertToUTF8 can be in addition to UTF8 encoding other encoding files in Sublime Text transfer to UTF8 encoding, the opening of the file at the beginning of the display garbled, and then a flash automatically display the normal font, of course, The encoding format of the original file does not change after saving the file.

b) Installation method One: shortcut key <font color= "#f00" >ctrl+shift+p, open the "Command Palette" hover dialog box, enter "Install" at the top, then click " Package Control:install ".

In the Hover dialog box that appears, enter "Convert" and click on the "ConvertToUTF8" plugin below to start the installation automatically, please wait patiently.

When the plugin is successfully installed, the status bar at the bottom of the Sublime Text 3 editor will prompt for successful installation.

c) Installation Method II: You can also download the full plug-in package after decompression, put into the D:\sublime text3\data\packages directory, to achieve the purpose of installing plug-ins. Download Address: https://github.com/seanliang/ConvertToUTF8.

How to find the Packages directory. A quick way to do this is: double-click on your "Sublime Text 3", click on the menu "Preferences->browse Packages ...".

It will directly open the directory "Packages" where the plugin package resides. Then you can copy the downloaded plug-in package into this Packages directory.

Of course, if you're familiar with Git, you can also use Git to clone plug-ins directly from the plugin's GitHub library to the Packages directory.

Attention:

After all the plug-ins can be installed through the two methods described above, will not repeat, recommend method one, use "package Control" to install plug-ins.

2. Brackethighlighter Plug-in

Feature Description: Highlight matching brackets, quotes, and labels.

Plugin Address: https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

3. Emmet Plug-in

Function Description: Emmet's predecessor is the famous Zen Codin. Front-end development essentials, HTML, CSS code to quickly write artifacts.

How to use: Default shortcut key tab or Ctrl + E

Plugin Address: Https://github.com/sergeche/emmet-sublime

Auxiliary tool: PyV8 Download Address: https://github.com/emmetio/pyv8-binaries

Note: The Emmet plug-in requires PYV8 plug-in support, so when installing Emmet, the PyV8 plug-in will be installed automatically, if Emmet is not properly insured after installation, because D:\sublime Text3\data\packages does not have Emmet related content, Manually download the Emmet plugin and unzip it into the D:\sublime text3\data\packages folder. Download the address above.

Example of how to use: Write code Ul#nav>li.item$*8>a{item $}

Then place the cursor at the end of this line of code and press the TAB key to generate it automatically:

For more information about Emmet, check out the official documentation and this quick reference form to help you quickly memorize shorthand forms.

4. Jsformat Plug-in

Feature Description: JavaScript code formatting.

How to use: Right-click in the open JavaScript file, select Jsformat or use the default shortcut (ctrl+alt+f).

Plugin Address: Https://github.com/jdc0589/jsformat

5. Compact Expand CSS Command plugin

Function Description: Make CSS properties expand and shrink, format CSS code.

How to use: press ctrl+alt+[to shrink the CSS code to display one line, press ctrl+alt+] to expand the CSS code for multiple lines of display.

Plugin address: https://gist.github.com/vitaLee/2863474 or: Https://github.com/TooBug/CompactExpandCss

Shortcut keys ctrl+alt+[shrink the CSS code as the effect:

6. Sublimetmpl Plug-in

Feature Description: Quickly generate file templates.

How to use: Sublimetmpl The default shortcut keys are as follows, if the shortcut key settings conflict may not be valid.

   Ctrl+alt+h              New HTML file

   ctrl+alt+j new              JavaScript file

   ctrl+alt+c new              css file

   ctrl+alt+p              new PHP File

   ctrl+alt+r              new Ruby file

   ctrl+alt+shift+p        new python file

Plugin Address: Https://github.com/kairyou/SublimeTmpl

The following figure is a new HTML file that presses the shortcut key ctrl+alt+h.

The corresponding templates are Tmpl formatted files, which are saved under D:\sublime text3\data\packages\sublimetmpl\templates.

Of course you can change the template format according to your preference. For example, "Html.tmpl" is changed to an earlier HTML standard format after saving.

Added language: You can also add file templates that are not in the template folder and make the appropriate settings to use this feature. For details, refer to its Chinese document: http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

7. Alignment Plug-in

Feature Description: Enables automatic alignment of code formats.

Usage: Shortcut key ctrl+alt+a, may conflict with the QQ screenshot, one of the two to reset the shortcut key.

Plugin Address: https://github.com/kevinsperrine/sublime_alignment

8. Autofilename Plug-in

Function Description: Auto-complete file (directory) name.

Plugin Address: Https://github.com/BoundInCode/AutoFileName

9. Docblockr Plug-in

Feature Description: Fast generation of JavaScript (including ES6), PHP, ActionScript, Haxe, Coffeescript, TypeScript, Java, Groovy, Objective C, C, C + + and rust language function comments.

How to use: Enter/** on the function and press TAB to generate comments automatically.

Plugin Address: Https://github.com/spadgos/sublime-jsdocs

10. Html-css-js prettify Plug-in

Function Description: HTML, CSS, JS format.

Plugin Address: https://github.com/victorporof/Sublime-HTMLPrettify

Installation method: node. js must be installed before installing this plugin, specifying the location of the Node.exe's execution file. The Html-css-js prettify is then installed.

To use method one: View-and Show Console or use the shortcut (Ctrl + ') to enter the command line: View.run_command ("Htmlprettify"), and then press ENTER.

Use Method Two: Default shortcut key: Ctrl+shift+h.

You can also set your own shortcut keys, the menu "preferences-> key Bindings–user" added:

{
    "keys": ["Ctrl+shift+o"], 
    "command": "Htmlprettify" 
}

After the completion of the save, the above code set to execute this plug-in shortcut keys are: Ctrl+shfit+o, their own settings will be tested, do not conflict with other shortcut keys.

Before formatting:

After formatting:

11. Sidebarenhancements Plug-in

Function Description: Sidebar menu expansion function.

Plugin Address: Https://github.com/titoBouzout/SideBarEnhancements/tree/st3

12. JavaScript Completions Plugin

Function Description: Prompt js Api, write script, prompt and finish faster.

Plugin Address: https://github.com/pichillilorenzo/JavaScript-Completions

second, plug-in list

Ctrl+shift+p the shortcut key, enter "list" in the dialog box and select "Package Control:list Packages".

All installed plugins are listed. This makes it easy to understand which plugins you have installed. third, remove the plug-in

Sometimes we need to remove the plugin we do not want, as follows: Shortcut key ctrl+shift+p, enter "Remove" in the dialog box, select "Package Control:remove Packages".

Then click the plugin you want to remove in the list of plugins that appear. Four, Sublime Text of the window operation

1. Split screen

Sublime text has a variety of split-screen form, let me take a concrete look. The menu "View-layout" lets you choose your split-screen style.

The corresponding shortcut keys and sub-screen situation are as follows:

   Alt+shift+1             single screen

   alt+shift+2       columns:2          vertical Two-column split screen

   alt+shift+3       columns:3          Vertical three-column split screen

   alt+shift+4       columns:4          vertical four-bar split screen

   alt+shift+8       rows:2             horizontal Two-column split screen

   alt+shift+9       Rows:3             Horizontal three-column split screen

   alt+shift+5       Grid               four format split screen

2. Create a new window

Shortcut key Ctrl+shift+n Create a new window.