Dry Goods My Sublime Text 3 Private Cabbage

Time:2019-8-13

Preface

Today I want to share with you an editor I’ve used for a long time: sublime text 3. It’s lightweight and highly customizable, which I think is the best place. This article will cover all aspects of sublime text 3, which is convenient for you, but also hope to help you.

Installation and initialization

First, you can download the latest version of the installation file on the official website. Choose the appropriate platform, I use the MAC version, the latest installation package is only 15.2M, really lightweight.

The first thing after installation is to customize according to your own habits.~

Open Preferences – > Setting and display the current configuration on a split screen. The default system configuration for Setting-Default on the left side does not need to be moved. Usually we will add customized configuration in Setting-User on the right. My configuration table is as follows:

{
    // Unix newline character is used by default, uniform style
    "default_line_ending": "unix",
    // Whether the visual area of the code map on the right side is bordered when coding
    "draw_minimap_border": true,
    "font_face": "monaco",
    // Display font size
    "font_size": 14,
    // Highlight the row where the current cursor is located
    "highlight_line": true,
    "line_padding_bottom": 1,
    // Set the spacing of each row to the top in pixels, which is equivalent to the spacing of rows.
    "line_padding_top": 1,
    "tab_size": 4,
    // Fill tab keys with spaces
    "translate_tabs_to_spaces": true,
    // When you save a file, you delete the extra space at the end of each line
    "trim_trailing_white_space_on_save": true,
    // Turn off automatic update check
    "update_check": false,
    // Automatic Line Break
    "word_wrap": "true"
}

Shortcut keys

Skillful use of keyboard shortcuts can improve your coding efficiency. There are many shortcuts in sublime. The following shortcuts are listed in common use. I hope to give some help to children’s shoes that are not very familiar with them.

Plug-in unit

To use sublime gracefully, plug-ins are indispensable. Powerful plug-in function, resulting in its unparalleled scalability.

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

Click on the menu bar view – > show console of sublime, open the console, and then run 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())

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

Installation of plug-ins is also very simple, click on the Package Control shown above, and search the package you want to install directly.

Next, we will list some very useful plug-ins and briefly introduce their respective usage scenarios.

Material-Theme

The screenshot of this article uses this topic, which I prefer.

Usage: Once the download is successful, you only need to modify Setting-User of Preferences – > Setting to introduce the theme. The specific configuration is as follows:

{
    // Introducing downloaded theme packages
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
    // Setting Theme
    "theme": "Material-Theme.sublime-theme",
    // Tags used to highlight modified code
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    ...
}

babel

The syntax for react is highlighted.

After installation, open the file with the suffix of.Js,.Jsx, open the menu view, Syntax – > Open all with current extension as -> Babel – > JavaScript (Babel), select Babel as the default JavaScript to open syntax.

SCSS

Support for sass grammar hints.

Compared with SASS, SCSS is more suitable for. SCSS grammar support. Because SASS can be affected by other plug-ins in some cases and cause the grammar prompt to fail, another plug-in Syntax Highlighting for Sass can be introduced to solve this problem.

However, if SCSS is used directly, this problem will not arise.

html5

Plug-in packages that support the hmtl5 specification.

Usage: New HTML document > Enter HTML 5 > Hit tab key > Complete HTML 5 specification document automatically.

GIT and git blame

Installing git can display the GIT status of the current file in the bottom status bar.

andgit blameIt is used to view git records.A very good pointYes, it can view the GIT record of each line of code, including the author, the submission time, and the logo.

docblockr

Document your code quickly. It parses functions, variables, and parameters, and automatically generates documents based on them. You just need to fill in the corresponding instructions.

Usage:’/**’shortcut can quickly generate function annotations.

EditorConfig

Code specification plug-ins that control indentation of code, etc.

After installation, create the file. editorConfig in the project, 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

Bracket Highlighter

It can match [], (), {}, “”, <tag> </tag> and highlight tags for easy viewing of start and end tags.

SideBarEnhancements

Enhance the right-click function of sublime, including copy, paste, delete, rename and so on.

AutoFileName

File names can be automatically completed, such as image selection. For example, enter “/” to see other files relative to the project folder.

ConvertToUTF8

Transcode the file to UTF-8. Used to edit and save files that are not supported by Sublime Text, especially GB2312, GBK, BIG5, EUC-KR, EUC-JP, ANSI and so on. The plug-in is automatically converted to UTF-8 format after installation.

GBK Support

Chinese in UTF-8 format can be recognized, and GBK and ANSI can not be recognized. Therefore, many documents containing Chinese will be scrambled when they are opened. GBK and ANSI can be identified by installing the plug-in GBK Support.

Usage: Open a GBK file and save it directly in GBK encoding mode.

FileDiffs

Powerful tools for comparing code. Used to compare the difference between the current file and the selected code, the code in the clipboard, another file, and the unsaved file. Can be configured to display differences in the external comparison tool, accurate to the line.

Usage: Right-click the tab, FileDiffs Menu or Diff with Tab appears. Select the corresponding file to compare.

Is the download Plug-in “wall”?

Sublime text 3 works well, but there are also minor problems. For example, when domestic users download plug-ins using sublime, they may appearThere are no packages available for installationQuestions.

The reason for this problem is very simple. Getting the network address of Sublime Text 3 is “wall”.

For children’s shoes with ladders, it is easy to solve. But for more children’s shoes that can’t turn over the wall, in order to give convenience, I found a solution. To put it bluntly, it’s easy to use addresses that other people can access, such as github.

https://raw.githubusercontent.com/SuCicada/channel_v3.json/master/channel_v3.json

How to use it?

Add a new item “channels” in “Preferences – > Package Settings – > Package Control – > Settings User”.

"channels":[
    "https://raw.githubusercontent.com/SuCicada/channel_v3.json/master/channel_v3.json"
    ],

Then, go download the plug-in and try it.~

summary

Sublime has been used for a long time because it feels great and it’s the style I like. Share with friends in need~

PS: Welcome to pay attention to my public number “Super Brother Front End Stack” and exchange more ideas and technologies.

Dry Goods My Sublime Text 3 Private Cabbage

Recommended Today

Implementation of PHP Facades

Example <?php class RealRoute{ public function get(){ Echo’Get me’; } } class Facade{ public static $resolvedInstance; public static $app; public static function __callStatic($method,$args){ $instance = static::getFacadeRoot(); if(!$instance){ throw new RuntimeException(‘A facade root has not been set.’); } return $instance->$method(…$args); } // Get the Facade root object public static function getFacadeRoot() { return static::resolveFacadeInstance(static::getFacadeAccessor()); } protected […]