How to use sublime text gracefully

Sublimate text 2 and 3

Compared with 2, sublime words start an item in 3 seconds and win an overwhelming victory. Therefore, in the following description, Sublime Text 3 is the protagonist. And 3 has been constantly improving and updating, and the specific differences can be found in Sublime Blog. Simply put:

ST3 supports finding variables in the project directory.

Better support for tabs (more commands and shortcuts)

Speed up the running of the program.

Updated API to use Python3.3.

It is strongly recommended that friends use 3! Don't explain if you don't break it.

Elegant use of lofty words, plug-ins are indispensable; Backup of plug-ins is very important (such as synchronization of all platforms; Replace the system/computer and quickly use the installed plug-ins). It's also very simple, just put the package (preferences >;; Browse the package), just synchronize the cloud; As for where it is stored, both the cloud disk and Github are indispensable; For example, there was a copy stored in sublime_Packages before, so if necessary, just remove the contents below the original package and replace it.

Sublime Text 3 installation plug-in Sublime Text is powerful because it has strong class extensibility. You can install different plug-ins according to your own needs; This makes her extremely powerful and light at the same time.

Plug-in installation method 1: direct installation:

It is convenient to install the Sublime text 3 plug-in. You can download the installation package directly and extract it to the package directory (menu->; Preferences-> Packaging).

Plug-in installation method 2: Use package to control component installation:

Press Ctrl+ ` to bring up the console (note: this shortcut key will conflict with QQ input method, input method property setting-input method management-cancel hotkey to switch to QQ Pinyin), paste the following code into the bottom command line, and press enter:

Import urllib.request, OS; pf = ' Package control . sublime-Package '; IPP = sublime . installed _ packages _ path(); URL lib . request . install _ opener(URL lib . request . build _ opener(URL lib . request . proxy handler())); open(os.path.join(ipp,pf),' wb ')。 write(URL lib . request . urlopen(' mand ":" copy _ path " },

//Chromium alloy

{ "keys": ["f2"]," command ":" side _ bar _ files _ open _ with ",

" args": {

"path": [],

"application": "c: \ \ users \ \ Jeff j \ \ appdata \ \ local \ \ Google \ \ chrome \ \ application \ \ chrome.exe",

"Extension": * "

}

}

]

Here, press Ctrl+Shift+C to copy the file path, and press F2 to preview the effect in the Chrome browser (if necessary, you can also add it for Firefox, Safari, IE, Opera, etc. According to your own needs). Of course, you can also define your favorite shortcut keys. Finally, according to the file path in your computer, pay attention to the browser path in the code.

beautify

A formatting (beautification) plug-in that integrates html, css and js, even though HTML and JS are written in PHP files. Plug-ins depend on nodejs, and nodejs needs to be installed in advance to run normally. After the plug-in is installed, the shortcut key ctrl+shift+H completes the beautification operation of the current file. Plug-ins are not satisfied with the beautification of html and css files, but they are OK. Later, we will explain how to modify css beautification scripts. It's super cool for me to use, so I won't go into details for reasons of space. Please refer to this introduction.

CSScomb CSS property sort:

Sometimes when you look at your own CSS file, do you feel that the attributes are chaotic, difficult to find and difficult to maintain? CSScomb can reorder chaotic CSS attributes according to certain CSS attribute sorting rules. Select the CSS code to sort, and press Ctrl+Shift+C to reorder the CSS properties. The code will be simple, orderly and easy to maintain. If no code is selected, the plug-in will sort all CSS properties in the file. Of course, you can customize the sorting rules of CSS attributes by yourself, open the CSScomb.sublime-settings file in the plug-in directory, and change the order of CSS attributes inside. Because this plug-in is written in PHP, you need to add the PHP path to the environment variable to make it work. For details, please see the instructions on github.

SublimeTmpl quickly generates file templates.

I've always wondered why sublime text 3 doesn't have the function of creating new file templates, such as copying and pasting DTD declarations in html headers every time. SublimeTmpl can finally be released with this plug-in. SublimeTmpl can create six types of file templates: html, css, javascript, php, python and ruby. All the file templates are in the templates folder in the plug-in directory, and you can customize and edit the file templates.

SublimeTmpl default shortcut key:

ctrl+alt+h html

ctrl+alt+j javascript

ctrl+alt+c css

ctrl+alt+p php

Shortcut keys are

ctrl+alt+shift+p python

If you want to create other types of file templates, first customize the file templates in the templates folder, and then open four files: default (Windows), sublime-keymap, Default.sublime-commands, Main.sublime-menu, SublimeTmpl.sublime-settings, and customize the type you want to create according to the format inside, which is described in detail here. Please do it yourself.

JavaScript-API- Done:

Plug-ins that support Javascript, JQuery, Twitter Bootstrap framework and HTML5 tag attribute prompts are one of the few plug-ins that support sublime text 3 suffix prompts. HTML5 tag prompts that sublime text3 comes with it, but JQuery prompts are still very useful, and you can also set the language to prompt.

Sublime -jq- plugin

SFTP: Quickly Edit Remote Server Files

Using Xftp and WinScp in Win, I am speechless for this manual operation that needs to switch clicks or F5 refresh. So, when I met this SFTP, I suddenly felt that the world was much better. Of course, there are some other synchronization plug-ins under Sublime, such as FtpSnyc, but the configuration error prompt is not humanized at all, so it is ruthlessly abandoned. There is SFTP under Sublime, so as long as Ctrl+S can synchronize the local to the server. Is it proper and cool? How to configure, please refer to using SFTP plug-in to quickly edit remote server files in Sublime Text; If you want to use FtpSync, please refer to Sublime usage and FtpSync remote synchronization; Avenue to Jane, because of simplicity and joy; Happy base code, worth tossing.

WakaTime-record your code time;

WakaTime can accurately count the time you spend on a project; WakaTime has different plug-ins for different IDE. When the plug-ins are installed on Sublime, I can count the behaviors of all my projects that use Sublime. Be able to manage and understand your own code time efficiently; And the statistics are perfect, suitable for sending friends to force (if you like) ~

The basic design of Waka is similar to rescuetime. Everyone will get a key after registering, install a client, enter the key (the same is true for logging in), and then it will throw all the local keyed behaviors to the server for statistics, and give you a report later. But Waka is really accurate, accurate to how many seconds each file takes and how much time each language takes.

Installation and use are very simple, please see here. Another more detailed article, where has all the time gone? Use RescueTime and WakaTime to record your time. RescueTime and WakaTime are described in more detail and can be read.

DocBlockr: code block comments

You can quickly annotate this function. Keep the code specification. Support multiple languages, including JavaScript (including ES6), PHP, ActionScript, Haxe, Coffee Script, Typescript, Java, Apex, Groovy, Objective C, c++ and Rust.

/*: Enter to create a code block comment.

/* *: Enter formal parameters in the automatic search function, and so on.

It generates comments in JSDoc format. If you have never used a similar tool, DocBlockr will make you feel how to write code without it before. Automatically add basic items by parsing functions, parameters and variables to help you create your code comments; If you want to make it more convenient, you might as well open it by combining AutoHotKey with efficient annotations.

Sublime-text-git: Git version control

Visual operation: helps you interact with your Git repo protocol. It supports many commands, such as init, push, pull, branch, stash and so on. Of course, you need to install Git in advance and configure the response; For this plug-in, please take a look at this article about using Git to improve workflow in Sublime Text. I believe her company won't let you down.

AdvancedNewFile: create a file quickly.

When we are in the Sublime text editor, we can use the shortcut key command+n(win: ctrl+n) to create a new file, and then command+s(Win:ctrl+s) will pop up a save box and fill in the file name to save it. Old trouble, trouble! ! Next, we will install the advancedNewFile plug-in to improve the speed of creating files in Sublime text editor.

For its use, use the shortcut key command+alt+n(win: ctrl+alt+n) after installation.

An input box will pop up at the bottom of sublime text; We just need to enter the file name to be created in this input box (we can even bring the path, such as src/components/perfect.vue; This will create a file in the current project directory; It should be noted that this path cannot be preceded by'/',which will make the created path a user directory instead of a project directory). By default, files will be stored in the current directory. If there is no current directory, it will be stored in the user's home directory.

There are other plug-ins that can be installed on demand, such as:

ConvertToUTF8? Support plug-ins such as gbk, big5, euc-kr, euc-jp, shift _ jis, etc.

Bracketthighlighter is used to match parentheses, quotation marks and html tags. Useful for very long codes. After installation, plug-ins that do not need to be set will automatically take effect.

DocBlockr can automatically generate PHPDoc style comments. The languages it supports are JavaScript, PHP, ActionScript, Coffee Script, Java, Objective C, C, C++.

& ltfont color = "purple" & gtEmmet (Zen code) & lt/font & gt;; The plug-in for quickly generating HTML code snippets is unparalleled: it can write HTML/CSS/JS very quickly. Of course, this plug-in also supports a variety of compilation environments, such as Eclipse/Aptana, Coda, Notepad++, Adobe Dreamweaver, TextMate and so on. , which is necessary for web development! ! ! .

JsFormat formats js code, and people who understand it understand it; Obsessive-compulsive disorder coder must! The default shortcut key ctrl+alt+f.

PhpFormat formats php code, and people who understand it understand it; Obsessive-compulsive disorder coder must!

CSS Compact Expand CSS property expansion: Do pen pals who write CSS prefer multi-line writing or single-line writing (personally prefer multi-line formatting)? If you see other people's code is not in line with your own habits, you can use the plug-in CSS Compact Expand to format CSS, and press Ctrl+Alt+[ to shrink one line of CSS code, and Ctrl+Alt+] to expand multiple lines of CSS code; Obsessive-compulsive disorder coder must! .

Autoprefixer plug-in: This is a CSS3 private prefix auto-completion plug-in; Plug-ins use CanIUse database (of course, SublimeText naturally has it.

YUI compressor: compress JS and CSS files. After pressing F7, if the current file (demo.js) is compressed, the compressed file (demo.min.js) will be saved in the same directory of this file, and java JDK needs to be installed. How to use: YUI compressor

Clickable URL: clickable URL

ClickableURLs can be used to make URLs in files clickable.

Vue syntax highlights: Vue(*. Vue) highlight plug-in; As far as the front end is concerned, it is a cool existence to develop using Vue framework, so this plug-in is needed; At the same time, Jade, SASS and other plug-ins are also necessary. Whoever uses them knows (when it comes to using vue, this vue-cli is quite necessary (Webpack, Eslint, Test, etc.). They are all well configured and very intimate); For the slightly larger project Eslint, it is very necessary to write Js code, and sublime has not well formatted the * plug-in. Use Eslint's vue file and wait for its birth? )。

Ultimate King: Write your own Sublime Text plug-in. Although the convenience required by the mobile terminal, Web front-end, server terminal, non-encoder writer and other aspects has been integrated into different plug-ins. However, for example, you need to quickly open an emulator on the PC side to perform some verification conveniently. As long as you can think of it, you can basically put it in the plug-in and handle it with shortcut keys. As for how to write SublimeText plug-in, please see here to write your own Sublime Text2 plug-in.

Customize your own shortcut keys.

First of all, you should be able to use the shortcut keys built in SublimeText:

For example, Commond Shift P opens the command panel: for example, opening the package to control the installation of various plug-ins; You can enter Set(Snytax) to change the language environment, switch instantly, and so on.

Set shortcut keys. In SublimeText, open preferences-> Key binding-user, shortcut key I set:

[

{ "keys": ["ctrl+f9"]," command": "build" },

{ "keys": ["f 10"]," command": "build "," args": {"variant": "Run"} },

{ "keys": ["ctrl+shift+x"]," command": "toggle_comment "," args": { "block": true } },

]