Visual Studio Code Configuration Guide

Visual Studio Code (VS code) is a free, open source, cross-platform text (code) editor developed by Microsoft. It seems to me to be " a perfect editor ".

This article is an introduction and configuration Guide to the features of VS Code, and the settings are primarily for the Mac OS X platform. In the shortcut key section,? Command key,? The Shift key? The Control key,? Refers to the Option/alt key.

1. Introduction to Visual Studio Code features1.1 Git Integration

As shown, the VS Code is integrated with Git version management by default.

Switch to the Git panel and click on the modified file on the left to make the version comparison. Use shortcut keys to ?POpen a shortcut window and use git-related commands directly.

For more git references, read thegit Advanced guide and the "Version Control" section of the VS Code official document.

1.2 Multi-window real-time editing and previewing

VS Code can open up to three sub-windows at a time. When you open a file in the Geodeaux sub-window as the same file, you modify any of the contents of the window, and other windows can synchronize the changes in real time.

For example, the left child window is a Markdown file, the right child window is the Markdown preview mode of the file (shortcut key??). V), so you can experience writing software like Macdown/mou.

1.3 Code hints and reference analysis

Although a lightweight editor, the VS code has IDE-level code highlighting, syntax detection, and reference analysis, which is ideal for beginners and large project development. Lists the languages it supports by default on its official website.

With typings , the VS Code also supports node. js, ES6, AngularJS, Reactjs, and is ideal for front-end developers. In order to better integrate with other open source frameworks, VS Code intentionally weakens the original JavaScript syntax validation feature, and recommends that users use ESLint to customize the custom code validation requirements.

In addition,the Debug function of VS Code is also very powerful. The following is a demo of its node. js Debug:

With theDebugger for Chromeplugin, you can also break point debugging Web directly in the editor.

1.4 command line invocation

VS Code provides a codecommand to invoke the editor in a shell environment. Use the shortcut key ??P(or F1) to invoke the command panel and enter the following command to complete the installation.

The code command can be followed by multiple paths or files:

Code Pro6.js PRO6.SCSS. /

File comparison:

code-d new-file. js old-file. js

Open the file and jump to the specified line:

Code-g source/cn/static/global/tracker.js:

For more code command-line use, see "Additional command linesarguments".

1.5 Smarter Emmet

VS Code has built-in Emmet, and has been further enhanced on its basis, greatly improving the efficiency of CSS and HTML authoring. For example, after writing the following properties in a CSS selector, pressing the tabkey will automatically fill in overflow:hidden:

Ov:hove:hof:h

For more Emmet abbreviations, please refer to "Emmet Cheat Sheet".

2. Shortcut key configuration2.1 List of all shortcut keys

Note: The shortcut keys for VS Code are many Fn function keys, which are not in accordance with the MAC user's habits, we recommend that you reset the shortcut keys by Preferences-Keyboard shortcuts.

For a list of all shortcut keys, see key Bindings for Visual Studio Code, where the more commonly used shortcuts have the following:

Text Selection

• ??? →-AST (abstract Syntax tree) Abstract syntax Tree Select expand Level

• ??? ←-abstract Syntax tree selection reduction level

single-line editing

• ?? K-Single-line operation, deleting the cursor in the row

• ?? ↓-copy cursor row to next line

multi-line editing

• ?? ↓-insert a cursor downward, or use the? + Click

• ?? + Mouse Drag-multi-column block selection, and then cooperate with?? → Can be selected at the end

• ?? L-Select the same text

• ? F2-Select the same word, or use? D in turn, add the selected

Code Positioning

• ?? O-Jump to objects, properties, methods

• ?? F-code formatting

• ?? M-Displays error and warning messages for the current file

• F12-Jump to Definition row

• ? F12-floating window open definition row (can be modified directly)

• ?? + Click-new open side window jumps to definition row

• ?? \-jumps to corresponding matching brackets

Code Show

• ? Z-Turn code wrap on/off, and configure single-line maximum number of characters via Editor.wrappingcolumn

• ?? [-Code folding,??? [Collapse for all

• ??] -code expansion,???] Expand for all

3. Frequently Asked Questions3.1 How to support PHP Smarty Template syntax

VS code identifies most of the main code files, and when you need to associate the syntax settings, you can use Preferences ---Workspace Settings (or User Settings) configuration file for Setup.

For example, the following code can associate a Smarty template file with the suffix. TPL into PHP syntax:

"files.associations":{
    "*.tpl": "php"
}

3.2 How to Hide post-compilation files in sidebar

Set Preferences-Workspace Settings (or User Settings) profile to configure files that need to be hidden in glob match mode, such as the following ANGULAR2 TYP The configuration of the. js and. js.map files is hidden in the Escript project:

 
{
    "files.exclude": {
        "**/._*": true,
        "node_modules/": true,
        "app/*.js.map": true,
        "app/*.js": true
    }
}

3.3 How to search for files in the Node_modules folder

The default search rule for VS Code excludes **/.git, **/.DS_Store, **/bower_components, **/node_modulesdirectories, and you can turn these rules off or on by adding the following configuration to user Settings:

 
{
    "search.exclude": {
        "**/node_modules": false,
        "**/bower_components": true
    }
}

Visual Studio Code Configuration Guide