Visual Studio Code Configuration Guide _visual

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 about the feature introduction and Configuration guide for VS Code, and the related settings are primarily for MAC OS X platforms. In the accelerator section, ⌘ refers to the Command key, ⇧ the Shift key, ⌃ the control key, and ⌥ refers to the Option/alt key. 1. Introduction to Visual Studio Code features 1.1 Git integration

As shown in the figure above, the VS Code defaults to integrated Git versioning.

Switch to Git panel and click on the modified file on the left to make a version comparison. Use the shortcut key ⌘p to open the shortcut window and use the GIT related command directly.

For more git reference, read the Git Advanced Guide and the Version Control section of the VS Code official document.

1.2 Multi-window real-time Edit and preview

The VS Code can open up to three child windows at a time. When the file opened in the Jodo child window is the same file, the contents of any of the windows are modified, and the other windows can synchronize changes in real time.

As shown above, the left child window is a markdown file, the right child window is the file's Markdown Preview mode (shortcut key ⇧⌘v), so you can achieve similar Macdown/mou and other software authoring experience.

1.3 Code hints and citation analysis

Although a lightweight editor, VS code has IDE-level coding highlighting, syntax detection, and reference analysis, ideal for beginners in programming and large project development. The list of languages supported by default is listed on its official website.

With the help of Typings, 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 grammar checker, it is recommended that users use Eslint to customize the personalization code checksum requirements.

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

With the "debugger for chrome" plug-in, you can also interrupt the debugging Web directly in the editor.

1.4 Command Line calls

VS Code provides a code command to invoke the editor in a shell environment. Use the shortcut key ⇧⌘p (or F1) to evoke the command panel, and enter the following command to complete the installation.

You can connect multiple paths or files after the code command:

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:15

For more code command-line usage, see "Additional command line arguments."

1.5 Smarter Emmet

VS Code built-in Emmet, and on the basis of the further enhancements, greatly enhance the CSS, HTML authoring efficiency. For example, when you write the following properties in a CSS selector, pressing the TAB key automatically complements the Overflow:hidden:

Ov:h
ove:h
of:h

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

2. Shortcut key configuration 2.1 All shortcuts list

Note: VS Code shortcut keys are a lot of Fn function keys, not in line with the MAC user habits, we recommend that you through the Preferences-> keyboard shortcuts reset shortcut keys.

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) Abstract syntax tree Select expand Level

⌃⇧⌘←-abstract Syntax tree Select to narrow single-level edit

⇧⌘k-Single-line operation, removing the cursor in the row

⇧⌥↓-copy cursor line to next line multi-line edit

⌥⌘↓-insert a cursor down, or use ⌥+ Click

⇧⌥+ Mouse Drag-Multiple column block selection, and then with ⇧⌘→ can be selected to the end

⇧⌘l-Select the same text

⌘F2-Select the same word, or use ⌘d to add the selected code location

⇧⌘o-Jump to objects, properties, methods

⇧⌥f-code formatting

⇧⌘m-Displays error and warning messages for the current file

F12-Jump To Definition line

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

⌥⌘+ Click-new open side window jump to Definition line

⇧⌘\-Jump to matching brackets code show

⌥z-Toggles the code on/off and configures the maximum number of characters per line by Editor.wrappingcolumn

⇧⌘[-code folding, ⇧⌥⌘[for all folding

⇧⌘]-code expands, ⇧⌥⌘] expands 3 for all. FAQ 3.1 How to support PHP Smarty Template syntax

VS code recognizes most of the mainstream code files, which can be set through the Preferences-> Workspace settings (or User settings) configuration file when associated syntax settings are required.

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

"Files.associations": {
    "*.tpl": "PHP"
}

3.2 How to hide the compiled file in sidebar

Set the Preferences-> Workspace settings (or User settings) profile to configure files that need to be hidden in glob matching mode, such as the following hidden in Angular2 typescript project. js Configuration with. js.map Files:

{
    "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_modules directory, you can turn off or enable these rules by adding the following configuration to the user profile:

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

}

From:http://www.cnblogs.com/kaiye/p/5397345.html