Vscode MAC utility shortcut key, plug-in



At build 2015, in addition to the release of Microsoft edge browser and new windows 10 system, Microsoft’s biggest surprise was the announcement of free cross platform visual studio code editor! With the arrival of 2019, stack overflow’s it ecology survey in 2018 shows that visual studio code has leapt to the top of the list over visual studio and become the “most popular development environment”. There is no one!

Vscode MAC utility shortcut key, plug-in

Difference between visual studio and visual studio Code: Visual Studio is an integrated development environment, which can only run in Windows + Mac OS; Visual Studio code is an editor, which supports cross platform and runs in all operating systems;

This document is mainly sharedVSCodestaymac os ReactThe practical shortcut key and plug-in of technology stack development;

Utility shortcut

1. Command + K, command + s open the shortcut key editing page;

When it comes to the shortcut key instructions that vscode has to provide, you can view and set the shortcut key;

User defined shortcut key: for example, when we write code, we need to define constants in full uppercase. It is very practical to quickly switch the case of selected variables. Personal settings are as follows:

Command + K, command + U capitalized

Command + K, command + L becomes lowercase

2. Command + P quick open file;

Without clicking the tree menu on the left, keyboard operation can quickly find the file to be edited;

3. Command + = and Command + – are combined to zoom;

Fast key to adjust font size, quickly switch to the most comfortable font size;

4. Command +, open user settings;

Vscode settings include user settings (global) and workspace settings (current project). Because the technology stack corresponding to our development project may be different, workspace settings are recommended. Recommended workspace settings for React development:


  //Set the smart prompt of react tag in react render to quickly complete HTML

  "emmet.includeLanguages": {

    "javascript": "javascriptreact"


  //Set the HTML code in react render to be foldable

  "editor.foldingStrategy": "indentation"


5. Control + ~ open and close the terminal;

React front-end development, Script Compilation, style and other operations are essential. It can quickly open the terminal under the current project path in the current development zone and input instructions to complete the front-end file compilation.

Open terminal compilation in the editor, without switching windows, the development experience can be greatly improved:

Vscode MAC utility shortcut key, plug-in

It supports multiple terminal windows, and the front and rear operation instructions are displayed on the same screen:

Vscode MAC utility shortcut key, plug-in

6. others;

Other common shortcut keys for daily coding:

Command + Shift + n to open a new window;

Command + n create a new file;

Command + cut out new editor (up to three)

Command + W close current file

Command + s save current file

Command + option + s save all files

Command + F find current file

Command + option + F current file replacement

Command + d find the next target of the selected word in the current file

Command + C copy

Command + V paste

Command + X cut

Command + Z fallback

Command + Shift + Z forward

Command + Shift + K delete current line code

Option + ↓ move down the current line code

Option + ↑ move up the current line code

Shift + option + ↓ copy the whole line of current line code to the next line

Shift + option + F format code

The recommended shortcut key is especially suitable for unifying the code style of front-end team members.

Different people write JS indents, spaces and so on. If the team uses vscode uniformly, everyone is used to formatting the code with this shortcut key, it will be more conducive to code maintenance.

The front-end code can support go to definition without plug-ins. Move the mouse to the variable name or file name, and Command + Click to jump to the corresponding file:

Vscode MAC utility shortcut key, plug-in

Utility plug-in

There are many plug-ins for vscode, but I think the real practical plug-ins are:

Auto Close Tag

Auto add HTML / XML off tag (required)

Vscode MAC utility shortcut key, plug-in

Path Intellisense

Automatically prompt the file path. When HTML uses the a-tag’s href or require to import new files, it can prompt intelligently;

Vscode MAC utility shortcut key, plug-in

Reference link:
Vscode: common shortcut key of visual studio code
After reading this article with vscode, the development efficiency doubles!
Vscode front-end plug-in recommendation