Learn to use Visual Studio code_visual.

Visual Studio Code is a great editor that starts very quickly and can be used instead of other text file editing tools. can also be used to do development, support a variety of languages, compared to other Ides, lightweight fully configurable and integrated Git is very suitable for front-end development, it is Microsoft's own must typescript will support very good. So I took a closer look at the document. The future may be used as a major tool. Main Command Box command Palette

The most important feature is the F1 or ctrl+shift+p Open command panel, in which you can perform any of the Vscode commands, see the shortcut keys for each command, or even close the editor.

Click Backspace will enter the CTRL+P mode ctrl+p mode

Enter > in ctrl+p and return to the main command box ctrl+shift+p mode.

You can also enter the file name directly under the Ctrl+p window, quickly open the file?  list the currently executable actions!  display errors or warnings, or you can ctrl+shift+m jump to the number of rows, or you can:  directly into the @  jumps to symbol (search variables or functions), or you can ctrl+shift+o directly into @: Depending on the category to jump symbol, look for properties or functions, or ctrl+shift+o input: Enter #  search symbol by name, You can also open multiple windows (view multiple items) at the same time ctrl+t a common shortcut editor and window Management open a new window:  ctrl+shift+n Close window:  ctrl+shift+w Open multiple editors (view multiple files) at the same time create a new file  ctrl+n history to switch between files  ctrl+tab,alt+left,alt+right cut out a new editor (up to 3) ctrl+\, or hold down the CTRL mouse click on the file name in the Explorer The shortcut keys for the left 3 editors ctrl+1 ctrl+2 ctrl+3 the 3 editors to cycle through Ctrl + ' editor swap, ctrl+k then adjust the code line indent ctrl+[by pressing left or right code edit format.  ctrl+] Collapse Open code block  ctrl+shift+[, ctrl+shift+] ctrl+c ctrl+v if unchecked, the default copy or cut a whole line of code formatting: Shift+alt+f, or ctrl+shift+p Enter the format code trim space Ctrl+shift+x Move up or down one row: alt+up  or  alt+down up and down one line:  shift+alt+ Up or Shift+alt+down inserts a row below the current line Ctrl+enter inserts a row above the current row ctrl+shift+enter cursor correlation moves to the beginning of the line: Home moves to the end of the file: Move to the beginning of the file: Ctrl+home move to the back half bracket  ctrl+shift+] Select the current row Ctrl+i select from the cursor to the end of the line Shift+end select from the beginning to the cursor shift+home Delete all the words to the right of the cursor Ctrl+delete Shrink/expand Selection: shift+alt+left and shift+alt+right multi-cursor: Multiple places can be selected, then modified together, ALT + Click Add cursor or ctrl+alt+down  or  ctrl+alt+up Select all matching Ctrl+shift+l ctrl+d the next match is also selected (I'll customize to delete the current line, see below Ctrl +SHIFT+K) Rollback previous cursor Operation Ctrl+u Refactoring code jump to Definition: F12 definition thumbnail: Just look at it and not jump past alt+f12 list all references: Shift+f12 modify all matches in this file: Ctrl+f12 Rename: For example, to modify a method name, you can select and press F2, enter a new name, carriage return, will find all the files have been modified. Jump to the next error or warning: when there are multiple errors, you can press F8 to jump to view the diff in the Explorer select the file right click  set file to compare, and then need to compare the file on the right button to select compare with ' File_name_you_chose '. Find replace find  ctrl+f find replace  ctrl+h Find in entire folder  ctrl+shift+f
Matching characters: * to match one or more characters in a path segment? To match on one character in path segment * * to match any number of path segments, including none {} to group conditions (e.g. {**/*.html,**/*.txt} matches all HTML and txt files) [] to declare a range of characters to match (e.g., example.[ 0-9] to match on example.0,example.1, ... Display related full screen: F11 Zoomin/zoomout:ctrl + =/ctrl +-side bar/hidden: Ctrl+b Sidebar 4 features display: Show Explorer ctrl+shift+e shows Searchctrl+shift+f S How to Gitctrl+shift+g show Debugctrl+shift+d show Outputctrl+shift+u preview markdownctrl+shift+v Other auto Save: File-> AutoSave, or Ctrl+shift+p, enter auto Skin preview

After F1 enter theme carriage return, then the up and down key can preview

Custom Settings.json

The User settings are global, and any project with VS code Open will be configured accordingly.

The default is stored in:

Windows:%appdata%\code\user\settings.json
Mac: $HOME/library/application Support/code/user/settings.json
Linux: $HOME/.config/code/user/settings.json Workspace Settings is the setting for this workspace, overwriting the top configuration

stored in the. Vocode folder in the workspace.

Almost all settings are in Settings.json, including Editor Configuration-font, word wrapping, tab size, line numbers, indentation, ... Window configuration-restore folders, zoom level, ... Files configuration-excluded file filters, default encoding, trim trailing whitespace, ... File Explorer configuration-encoding, WORKING FILES behavior, ... HTTP configuration-proxy settings Search configuration-file exclude filters git configuration-disable git integratio N, auto Fetch behavior telemetry configuration-disable telemetry reporting, crash reporting HTML configuration-html fo Rmat configuration CSS configuration-css linting configuration JavaScript configuration-language specific settings jso N Configuration-schemas associated with certain JSON files Markdown Preview configuration-add A custom CSS to the Mark Down preview less Configuration-control linting for less Sass Configuration-control for linting Sass Config Uration-language specific settings PHP configuration-php linter COnfiguration

For example can modify let Vscode know. glsl extension

{

    //Configure file associations to languages (e.g. "*.extension": "HTML"). These have precedence over the default associations of the languages installed.
    Files.associations ': {
        ' *.GLSL ': ' Shaderlab '
    }
}

Modify the default shortcut keys

File-> Preferences-> keyboard shortcuts

Modify Keybindings.json, my display is here C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json

1
2
3
4
5
6 7 8 9 (16)
26 (
est
)

Place your key bindings in this file to overwrite the defaults
[
    //ctrl+space be switched input shortcut keys occupy
    {
        "key": "Ctrl +alt+space ",
        Command": "Editor.action.triggerSuggest",
        "when": "Editortextfocus"
    },
    //Ctrl + D Delete a row
    {
        "key": "Ctrl+d",
        "command": "Editor.action.deleteLines", "When
        ": "Editortextfocus"
    },
    {
        "key": "Ctrl+shift+k",///is swapped with the shortcut key to delete a row:)
        "command": " Editor.action.addSelectionToNextFindMatch ",
        " when ":" Editorfocus "
    },
    //ctrl+shift+/multiline comment
    {
        "key": "ctrl+shift+/", "
        Command": "Editor.action.blockComment",
        "when": "Editortextfocus"
    }
]

Custom code Snippets

Then enter the language, for example I enter typescript here

Because each input arrow function () => {} is too annoying, I'm here to add a paragraph

1
2
3
4
5
6 7

"Arrow function": {
	"prefix": "func",
	"body": [
		"(${e}) => {}"
	],
	"description": "Arrow function "
}

Save, the next time you enter the Func will automatically come out arrow function

Configuring the TYPESCRIPT Environment

First override the default Ctrl + Space shortcuts, because this shortcut is switched by the input method to occupy the
C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json
Join

1
2
3
4
5

Place your key bindings in this file to overwrite the defaults
[
{"Key": "Ctrl+alt+space",            "command": " Editor.action.triggerSuggest ",
                                     " when ":" Editortextfocus "}
]

File-open folder opens the directory of the project to create Tsconfig.json input {}, CTRL + ALT + SPACE (above custom keyboard) in curly braces

Input

1
2
3
4
5
6 7

{
    "compileroptions": {"
        target": "ES5",
        "module": "AMD",
        "Sourcemap": True
    }
}

You can create a. ts file Configure Taskrunner ctrl+shift+p enter Configure task Runner Run task Ctrl+shift+b Install Typings

Install typings to bring on the. d.ts files which power JavaScript IntelliSense.

NPM Install typings--global

# Search for definitions.
Typings Search Tape

# Find a available definition (by name).
Typings Search--name react

# Install typings (DT is ' ambient ', make sure to enable the flag and persist the selection In ' Typings.json ').
Typings Install react--ambient--save

Install'll create a typings folder. VS Code would reference the. d.ts files for IntelliSense. Plug - ins

New version Support plugin installed

Plug-in market https://marketplace.visualstudio.com/#VSCode installing Plug-ins

F1 Input Extensions

Click First to start installation or upgrade, or you can ctrl+p enter ext install into
Click on the second one to list the extensions that you have installed, which you can uninstall

Ext Install the plugin I'm using (looking for updates ...) docthis Plug-ins can automatically add jsdoc annotations.

CTRL + p after entering ext install docthis can be directly installed.

You can insert a comment at the cursor two consecutive ctrl+alt+d after installation.

Detailed: https://marketplace.visualstudio.com/items?itemName=joelday.docthis Vscode-todo display todo list

CTRL + p after entering ext install Vscode-todo can be directly installed.

Detail: Https://marketplace.visualstudio.com/items?itemName=MattiasPernhult.vscode-todo

Reference: Learning Visual Studio Code Key bindings for Visual Studio Code VS code Tips and Tricks from:https://nshen.net/articl e/2015-11-20/vscode/