Sublime Text 3 Full Details Original Tutorial_sublime (2023)

I. Introduction

I have been using sublime Text for several years, and the version is from 2 to 3, but I like to drink ice water in cold weather. Warm and cool make people have self-awareness. At the beginning, I didn't know where to start, and I searched for information all over the place, but the information I could find was scattered, one-sided, not systematic, and comprehensive, so that I spent a lot of time and energy along the way. So the monk wrote this "Sublime text 3 Full Detail Guide", firstly, it is a summary of his own experience, secondly, it can give beginners a systematic and comprehensive guidance, so that they can avoid the detours I took that day, so Sublime Text can Quickly understand this great editor.

The version I'm currently using is a beta version of sublime Text 3 build 3083, which has been fairly stable. Therefore, all explanations in this article are subject to this version, taking Windows 7 x64 platform as an example. As for other versions, there is not much difference.

2. Features of Sublime Text

1. Sublime Text is a cross-platform code editor that can be used on Linux, OS X and Windows.

2. Sublime Text is scalable and contains a large number of useful plug-ins. We can install plug-ins in our own field to multiply the utility.

3. Sublime Text is the best choice for the command line environment and GUI. Using both at the same time will greatly improve work efficiency.

4. Sublime Text is a paid software, and it is recommended that those who have the ability to support the developer pay to use it. But you can use it anytime without buying it.

3. Download and install

1. Download: Currently it is the official version of v2.0.2. We open the website download link http://www.sublimetext.com/3 and download sublime Text 3 build 3083.

Among them, the "Windows" bit "Download to "Sublime Text build 3083 x64 Setup.exe" installer? "Portable version" is downloaded in the "Sublime Text build 3083 X64.zi P" editing package, which can be run without installation.

If your computer platform is Windows x86 or 32-bit system, click "Windows" to download the 32-bit installer, if you don't want to install it, click "Portable Version" to download the 32-bit processing package later.

2. Installation: Double-click the download under "Sublime Text build 3083 x64 Setup.exe", remember to select "Add to Explorer context menu" and add it to the right-click shortcut menu. Other installations use default settings.

3. After the installation is complete, double-click the "Sublime Text 3" desktop shortcut icon, open the program, and you can see "Sublime Tex".

4. If you don't install "Sublime Text 3" in the default path, such as the D drive, please add environment variables.

Set font and font size

Menu item "Preferences--->user-setting", open "preferences.sublime-settings".

Add the code you want in the figure below, and set it according to your preferences. Set the font to "Font_face": "font name", set the font size to "font_size": "font size", note that they must be separated by commas.

5. Install the plug-in

Before installing, first understand the sublime text extension, first look at the official website of the plugin: https://packagecontrol.io/.

When we enter the plug-in keywords in the search box, the relevant plug-ins will be displayed in real time below, and we can choose the plug-ins we want to know.

1. Install Package Inspector

Package Checker is an additional management pack, so we need to install it first. With this, we can easily browse, install and uninstall the plugins in Dawen.

Open the package control webpage https://packagecontrol.io/, click the "Install Now" button on the right.

Go to the page https://packagecontrol.io/installation#st3, select the "SUBLIME TEXT 3" tab, and copy the code snippet inside:

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages _path(); urllib.request.install_opener( urllib.request .build_opener(urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Download verification error (received %s instead of %s), try to install manually' % (dh, h)) if dh != h else open(os .path.join( ipp, pf), 'wb' ) .write(from)

Double-click the desktop "Sublime Text 3" to open the program, press the shortcut key CTRL+' to open the Sublime Text console, paste the previously copied code into the console, and press the 'Eenter' key.

Wait for the program to close and install, restart "Sublime Text 3", click the menu "Preferences" to see the item "Check Packages", the plug-in management package has been installed successfully.

2. Install the ConvertToUTF8 plugin

a) Function description: ConvertToUTF8 can convert the encoded file in Sublime Text to UTF8 encoding. Except for UTF8 encoding, garbled characters will appear when the file is opened at the beginning, and then normal fonts will automatically appear. Of course, after saving the file, the format encoding of the original file did not change.

B Installation method one: shortcut key ctrl+shift+p, open the "Command Palette" suspension dialog box, above "Installation", and then click "Package check: package installation".

Enter "Convert" in the floating dialog box that appears, and then click the "ConvertToUTF8" plug-in below to start the installation automatically, please wait patiently.

After the plugin is installed successfully, the status bar at the bottom of the Sublime Text 3 editor will indicate that the installation is successful.

c) Installation method 2: You can also download the complete plug-in package and decompress it, and put it in the C:\Users\userName\AppData\Roaming\Sublime Text 3\packages directory to achieve the purpose of installing the plug-in. Download address: https://github.com/seanliang/ConvertToUTF8.

How to find the package directory. A shortcut method is: double-click to open "Sublime Text 3", the menu "Preferences--->Package Search ...".

Open the "Packages" directory where the plug-in package is directly stored. You can then copy the downloaded package to the Packages directory.

Of course, if you are familiar with Git, you can also use Git to directly clone the plug-in package from the GitHub repository of the plug-in in the Packages directory.

Note: All the plug-ins in the following can be installed through the above two methods. It is recommended to use the "Package Checker" to install the plug-ins, so I won't go into details.

3. Additional Bracke highlighter

Function description: Highlight the corresponding brackets, quotation marks, and labels.

Plug-in address: https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

4. Less plug-ins

Function description: Less syntax highlighting.

Plugin URL: https://github.com/danro/LESS-sublime

5. Sublime-less2css plugin

Function description: Compile the minimal file into a CSS file.

Plug-in address: https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

Accessibility: After the installation is complete, download less.js-windows from https://github.com/duncansmart/less.js-windows and configure the Less.js-windows environment variable.

6. Emmet plugin

Feature description: The predecessor of Emmet is the famous Zen Codin. Necessary for front-end development, an artifact for quickly writing HTML and CSS codes.

Mode: Default Hotkeys Tab

Plugin URL: https://github.com/sergeche/emmet-sublime

Utilities: PyV8 download address: https://github.com/emmetio/pyv8-binaries

Note: The Emmet plugin needs the support of the PYV8 plugin, so the PyV8 plugin will be automatically installed when Emmet is installed. If the Emmet installation cannot be guaranteed, it may be that PyV8 is not fully installed, and Sublime Text 2 and 3 are prone to this problem. You can delete it , then manually download it using method two to install the PyV8 plugin.

How to use Example: write code Ul#nav>li.item$*8>a{item $}

Then set the cursor to the end of this line of code and automatically create the Tab key:

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 I TEM 7 Item 8

For more detailed usage, please refer to the official website of Emmet: http://docs.emmet.io/

7. Jsformat plugin

Function description: JavaScript code formatting.

How: Right-click the open JavaScript file and select Jsformat.

Plug-in URL: https://github.com/jdc0589/jsformat

8. Color highlighter plug-in

Function description: Display the color of the selected color value, embedded ColorPicker

Plugin URL: https://github.com/Monnoroch/ColorHighlighter

Right-click on the 16-inch color value, select "Color Picker", the color picker will be flexible, and click on the color block you want.

Looking at the effect, the color value and screen color have changed accordingly.

9. Compact Expand CSS Commands Plugin

Function description: Expand and collapse CSS properties, format CSS code.

How to: Press ctrl+alt+[ to collapse CSS code to reveal one line, ctrl+alt+] to expand multiple lines of CSS code.

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

Hotkey ctrl+alt+[ to fold CSS code effect:

The hotkey ctrl+alt+] expands the multi-line display effect of the CSS code:

10. Sublimetmpl plugin

Function description: Quickly create file templates.

How to: Sublimetmpl's default hotkeys are as follows, if the hotkey settings conflict, it may not work.

Ctrl+alt+h Create a new HTML file

Ctrl+alt+j New JavaScript file

Ctrl+alt+c Create a new CSS file

Ctrl+alt+p Create a new PHP file

Ctrl+alt+r Create a new Ruby file

Ctrl+alt+shift+p Create a new Python file

Plugin URL: https://github.com/kairyou/SublimeTmpl

The picture below is to press the hotkey ctrl+alt+h to create a new HTML file.

The corresponding template is a Tmpl format file stored in C:\Users\username\appdata\roaming\sublime Text 3\packages\sublimetmpl\templates.

Of course, you can change the template format to your liking. For example, change "Html.tmpl" to old standard HTML and save.

Now press the hotkey ctrl+alt+h to create a new HTML file in the exact same format as when changing the template format. The following figure:

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

11. Alignment added

Function description: Automatically align code format.

How to use: Ctrl+alt+a hotkey, it may conflict with QQ screenshot, choose one of the two to reset the hotkey.

Plug-in address: https://github.com/kevinsperrine/sublime_alignment

12. Add file name automatically

Function Description: Automatically fill in the complete file (directory) name.

Plugin URL: https://github.com/BoundInCode/AutoFileName

After the installation is complete, you can try how to use Autofilename, the first displayed CSS file. When you enter href="", Sublime text will now center on the file path to determine the path of all files.

The template file will be fetched along with abc.html at the same level as the filelist.

Like us, this time the link is in the css folder in Auto.css, so if we link directly to css/, it will run out of the css folder files, the whole usage, etc.

Part B is the same road, there is no difficulty, just understand the road.

c) Look at the CSS file using the URL, which is the same method, but because it needs to be connected to the top layer of the Images folder in Arrow.png, it is typed in front. (same as above), depending on the selected path.

13. Docblockr plugin

Function description: Quickly produce JavaScript (including ES6), PHP, ActionScript, Haxe, Coffeescript, Typescript, Java, Groovy, Objective C, C, C++ and Rust language function comments.

How to: Type /** in a function and press Tab to automatically generate comments.

Plugin URL: https://github.com/spadgos/sublime-jsdocs

Enter /** in the function and press TAB to automatically generate comments.

14. Sublime code intel plugin

Function description: Smart prompt.

Plugin URL: https://github.com/SublimeCodeIntel/SublimeCodeIntel

15. html-css-js Prettify plugin

Function description: Format HTML, CSS, JS.

Plug-in address: https://github.com/victorporof/Sublime-HTMLPrettify

Installation method: Before installing this toolkit, you must first install Node.js and specify the location of the Node.exe executable file. Then install the Html-css-js beautifier.

Method 1: View->Show Console or use the hotkey (Ctrl+') to enter the command bar: View.run_command("Htmlpretify") and press Enter.

(Bug fix: This time an error may be reported. In the Html-css-js prettift plugin installation package file htmlpretify.py, find "Node_path" and modify the path of Node.exe to the path of your own installation)

Use the second method: Default hotkey: Ctrl+shift+h.

You can also set your own hotkeys, menu "Preferences---> Keybindings–user" new:

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

After saving, the above code is set to run this plug-in. The hotkey is: Ctrl+shfit+o. If you set it yourself, test it, and don’t conflict with other hotkeys.

Before formatting:

After formatting:

16、Additions Sidebarenhancements

Function description: Sidebar menu extension function.

Plugin URL: https://github.com/titoBouzout/SideBarEnhancements/tree/st3