Sublime Text Usage Guide-front-end development artifact

Sublime Text Front-end development artifact

Sublime text is a front-end developer necessary editor, a lot of plug-ins, perfect features, superior performance, has a lot of features, to the front-end development provides a perfect development conditions.

This article is mainly about how to use the sublime text hidden in the menu of some functions, these features are very powerful, but because the hidden darker is not too much attention, the Internet related to the introduction of the article is not too many, here to tidy up a bit.

Sublime Text Function Usage Introduction, directory:

• Nodejs Build System
• Multiple selections
• Project & Workspace
• Sublime Text Portability (green)
• Goto anything ...
• Snippets
• Macros
• Split Editing

Nodejs Build System

The Nodejs compiler system can be used to quickly test function functions.

Sublime Text-Tools, build system, new build system.

Paste the following code:

{
"cmd": ["Node", "$file"],
"File_regex": "^[]*file \" (...) \ ", line ([0-9]*)",
"Selector": "Source.js",
"Shell": true,
"Encoding": "Utf-8",//code
"Windows": {
"cmd": ["taskkill/f/im Node.exe & Node", "$file"]//x86
"cmd": ["Node", "$file"]//x64
},
"Linux": {
"cmd": ["Killall node; Node "," $file "]
},
"OSX": {
"cmd": ["Killall node; Node $file "]
}
}

Sublime Text, Tools, Build (Ctrl + B), with the following effect:

Multiple selections

Sublime text Multi-point editing, the biggest feature of Sublime, Sublime the big picture of the official website is to introduce this function. Use the following methods:

• Consecutive click Ctrl+d to select the same name character
• CTRL + left mouse button click to select multiple lines
• Press and hold drag to select multiple lines in the middle mouse

Project & Workspace

Sublime text comes with work space. Use the following methods:

Sublime Text---project--Save project as ... Save Workspace

Open Project--Sublime Text--Project opens workspace

Workspace has the difference between project and Workspace, and there is no difference in usage.

When you open a workspace, the current workspace is displayed in the title bar of the sublime.

Sublime Text Portability (green)

Sublime text for greening, to achieve a folder for the purpose of packaging migration.

When installing Sublime, the default User configuration and plug-in path will be installed in the user temp directory, through Sublime Text, Preference, Browse Packages ... Quick access to the directory.

To prevent errors in the greening process, exit sublime first.

Open the sublime temp directory, return to the top level directory, have install Packages, Local, Packages three directories, cut them.

Open the sublime text installation directory, create a new Data folder, paste the cut three directories under data to complete the greening.

Goto anything ...

Ctrol + P Quick Find files, you can search through a few keywords fuzzy query the entire workspace file. As follows:

Input: 50 Find line number

Input @check Lookup function

Goto Definition ... Shortcut key F12, quickly jump to the location of the function definition.

Snippets

Sublime Text Snippet is useful for adding code snippets to frequently used syntax sugars or code.

Sublime Text--Tools--New Snippet ... Add the following code:

${1} represents a placeholder, and a number indicates that tab INDEX,${0} is the last. Or you can have this syntax with the description: ${1:description}

There are more advanced uses, such as:

${1:t} is the first placeholder

${1/(T) |. */(? 1:s)/} is a match for the first placeholder.

The format is this:

${1/a|b|c|d|. */(? 1:a) (? 2:b) (? 3:c) (? 4:d)/} (the example is to judge the input characters, ABCD to uppercase, the rest does not do the processing)

It is understood that this is to be disassembled:

Macros

Sublime the Text macro.

Tools--Record macro recording macros

Tools--Save Macro ... Play macro

At work, there is no need to record some special macros yourself.

To bind a macro shortcut key, Preferences key Bindings-user, configure shortcut keys and macro file paths as follows:

{"Keys": ["Ctrl+enter"], "command": "Run_macro_file", "args": {"file": "Res://packages/default/add Line.sublime-macro "} },

Split Editing

Sublime Text split screen

Sublime Text Usage Guide-front-end development artifact