preface

Today I share with you an editor I’ve been using for a long time: Sublime Text 3. It’s lightweight and highly customizable, which I think is the best thing about it. This article covers all aspects of Sublime Text 3 for your own convenience and hopefully for you.

Installation and initialization

First, you can download the latest version of the installation file from the official website. I use the MAC version, and the latest installation package is only 15.2m, which is really lightweight.

The first thing to do after the installation is to customize it according to your own habits

Open Preferences->Setting to display the current configuration in a split screen. On the left is the system Default Setting of setting-default, which does not need to be moved. Generally, we will add customized configuration in setting-user on the right. My configuration table is as follows:

{// Use the Unix newline character by default"default_line_ending": "unix"// When writing code, add a border to the visible area of the code map on the right"draw_minimap_border": true."font_face": "monaco", // Display font size"font_size": 14, // Highlight the line where the current cursor is located"highlight_line": true."line_padding_bottom": 1, // Set the spacing in pixels from each line to the top. The effect is the same as the line spacing"line_padding_top": 1,
    "tab_size": 4, // Fill the TAB key with Spaces"translate_tabs_to_spaces": true, // The file will be saved to remove extra Spaces at the end of each line"trim_trailing_white_space_on_save": true// Turn off automatic update checking"update_check": false// wrap"word_wrap": "true"
}
Copy the code

shortcuts

The skillful use of shortcut keys can improve your coding efficiency. There are many shortcuts for Sublime, and the following list of commonly used ones is intended to help those who are not familiar with them.

The plug-in

For elegant use of Sublime, the plugin is indispensable. Powerful plug-in functions make it unmatched extensibility.

Before you can install the plug-in, you need to install the Package Control component (which is a plug-in itself).

Sublime’s menu bar view-> Show Console opens the console and then runs the following code:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' '.'% 20')).read())
Copy the code

After a few seconds, if you can see Package Control in the image below, the installation is successful.

Installing plug-ins is also easy, just click on the Package Control shown above and search for the packages you want to install.

Next, I’ll list some very useful plug-ins and briefly describe their use scenarios.

Material-Theme

Personal favorite theme, which is used in the screenshot of this article.

Setting- >Setting (Preferences->Setting) The configuration is as follows:

{// Import the downloaded theme package"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme"// Set the theme"theme": "Material-Theme.sublime-theme", // to highlight the tag of the modified code"highlight_modified_tabs": true."ignored_packages":
    [
        "Vintage"],... }Copy the code

babel

Syntax highlighting for React.

After installation, Open.js,.jsx suffix file, Open menu view, Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel), select Babel to turn on syntax for default JavaScript.

SCSS

Sass syntax hints are supported.

SCSS is more suitable for.scSS syntax support than SASS. Considering that SASS will be influenced by other plug-ins in some cases, it is advisable to introduce another plug-in Syntax Highlighting for SASS to solve this problem.

However, if you use SCSS directly, this problem does not occur.

html5

Support hmTL5 specification plug-in package.

Use method: New HTML document > Enter HTML5 > Hit TAB > Auto complete HTML5 specification document.

Git and git blame

Git installation displays the Git status of the current file in the status bar at the bottom.

Git Blame is used to view git records. The nice thing is that it can see the git record for each line of code, including who committed it, when it was committed, and the identity.

docblockr

Help you document your code quickly. It parses functions, variables, and parameters, automatically generates documentation from them, and you just need to fill in the corresponding instructions.

Usage: the ‘/**’ shortcut can quickly generate function comments.

EditorConfig

A code specification plug-in that controls the indentation of code, etc.

Once installed, create a file in your project. EditorConfig, for example:

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
Copy the code

Bracket Highlighter

Matches [], (), {}, “”, “, and highlight tags to facilitate viewing of start and end tags.

SideBarEnhancements

Enhanced sublime’s right click capabilities, including copy, paste, delete, rename, and more.

AutoFileName

You can automatically complete file names, such as picture selection. For example, type “/” to see other files relative to this project folder.

ConvertToUTF8

Convert the file to UTF-8. For editing and saving files whose encoding is not currently supported by Sublime Text, especially for GB2312, GBK, BIG5, EUC-KR, EUC-JP, ANSI, etc. Automatic conversion to UTF-8 format after plug-in installation.

GBK Support

Can recognize UTF-8 format Chinese, not GBK and ANSI, so open many documents containing Chinese will appear garbled. GBK and ANSI can be identified by installing the plug-in GBK Support.

Usage: Open a GBK file and save as with GBK Encoding mode.

FileDiffs

Powerful tool for comparing different code. Use to compare the current file with the selected code, code in the clipboard, another file, or unsaved file. Can be configured to display differences in the external comparison tool, accurate to the line.

Usage: Right click on the Tab page, FileDiffs Menu or Diff with Tab… Select the corresponding file to compare.

Download plug-ins by “wall”?

Sublime Text 3 works well, but there are a few minor issues. For example, There may be no packages available for installation when local users use the Sublime download plug-in.

This problem occurs simply because the web address for Sublime Text 3 is “blocked”.

For children’s shoes with ladders, it is easy to solve. But for more children’s shoes that can not turn over the wall, in order to give convenience, I found a solution. Simply use an address that others can access, such as Github.

https://raw.githubusercontent.com/SuCicada/channel_v3.json/master/channel_v3.json
Copy the code

How do you use it?

In “Preferences -> Package Settings -> Package Control -> Settings User” add a new option “Channels”.

"channels": ["https://raw.githubusercontent.com/SuCicada/channel_v3.json/master/channel_v3.json"].Copy the code

Then download the plugin and give it a try

conclusion

Sublime has been used for a long time because it feels great and is my style. Share with friends in need

PS: Welcome to follow my public account “Chao Ge Front-end Small stack” to exchange more ideas and technologies.