VSCode is very powerful, here are only some commonly used techniques, for more black technology, please move to the official document
Article directory
1. Shortcut keys
1. View shortcut keys
Menu path: Code / Preferences / KeyboardShortCuts
shortcut key: [⌘ K] [⌘ S]
2. Common shortcut keys for macOS
Special symbol mapping
⌘ - Command
⇧ - Shift
⌃ - Control
⌥ - Option
========= Official recommendation =========
All commands: [⇧ ⌘ P]
Open file: [⌘ P]
Search in file: [⇧ ⌘ F]
Start Debug: [F5]
Open/Hide Command Line: [⌃ `]
========= Edit Operation =========
Copy Line Up: [⇧ ⌥ ↑]
Copy Line Down: [⇧ ⌥ ↓]
Delete Selected line: [⇧ ⌘ K]
Move line up: [⌥ ↑]
Move line down: [⌥ ↓]
Select a word: [⌘ D]
Multi-line comment: [⇧ ⌥ A]
Single-line comment: [⌘ /]
========= Other operations =========
Jump to a certain line: [⌃ G]
Collapse code block: ⌥ + ⌘ + [
Expand code block: ⌥ + ⌘ + ]
Expand / Collapse code block: [⌘ K] [⌘ L]
Open Settings: [⌘ ,]
Open multi-line editing: [⇧ ⌥]
Open/hide sidebar: [⌘ B]
Open Explorer panel: [⇧ ⌘ E]
Open plugins panel: [⇧ ⌘ X]
Delete file: [⌘ Delete]
=============================
3. Multi-line operation
When the top and bottom are arranged neatly, press and hold [⇧ ⌥] directly, and at the same time slide the mouse vertically downward to draw a flashing vertical line. At this time, you can directly edit. During the editing process, press the arrow keys ← or → to move to the target Position
For lines with regular beginnings but irregular endings, during editing, you can hold down [⇧ ⌥] again, and at the same time use the arrow keys ← or → to select words of unequal length. For example, here you can change clickBaidu, clickGoogle, clickBing into the function handleClick of the same name
. For lines that are not very regular, first press and hold ⌥, and then click the positions that need to be edited in different lines, then release ⌥ and start editing
Two, formatting
Before formatting the code, you need to configure the Formatter first. But for JavaScript, TypeScript, JSON, and HTML, VSCode has default formatters that do not require additional configuration
global formatting
Format the code in the entire file, the shortcut key is [⇧ ⌥ F]
partial formatting
If you want to use partial formatting, it is recommended to cancel saving the automatic formatting
first . Only format the selected code, the shortcut key is [⌘ K] [⌘ F]
3. Code snippet
Code snippets can greatly simplify the writing of repetitive codes. In VSCode, you can easily maintain custom code snippets. These code snippets are templates in JSON format, defined in the ~/Library/Application Support/Code/User/snippets directory
For example, the following code snippet is defined in the javascript.json file
{
"Axios Get Request": {
"prefix": "axios-get",
"body": [
"axios.get(${1:url})",
"\t.then(function (res) {",
"\t\t$2// 按Tab键会跳转到这一行",
"\t})",
"\t.catch(function (err) {",
"\t\t$3// 再次按Tab键会跳转到这一行",
"\t})"
],
"description": "Generate axios GET request"
}
}
When using, just enter axios-get / ag and press the Tab / Enter key to automatically generate the code.
After the code is generated, the cursor will stop at the position of the url ($1), and press the Tab key to switch to res and err in turn The code block where it is located, which is bound by the $2, $3 placeholders in the code snippet
Four, commonly used plug-ins
VSCode has a very rich plug-in library, which can be viewed on the official website. Here are some commonly used plug-ins
indent-rainbow
Increase the layering of code indentation
Old / Flying
Vue Development Assistant
Live Server
Quickly start the local server and support dynamic update of static resources
open in browser
Quickly select the browser and open the HTML file. There are several plug-ins, just choose the one with the largest download volume.
Auto Rename Tag
a case
<div>test line</div>
<!-- 修改为如下代码 -->
<p>test line</p>
If there is no such plug-in, you need to modify the div start tag first, and then modify the div end tag
Local History
Example of use
reference documents
VSCode official documentation: link
VSCode plug-in library: link