The installation

  • websiteDownload the latest version and install itclick next step
  • It is recommended to check all the following options for more convenient development (right-click, code)

Interface layout

  • Activity area (A) : provides shortcuts to vscode’s core functions and some plug-ins
  • Sidebar (B) : shows the current operation of the file directory, etc
  • Edit area (C) : Edit area of code
  • Panel (D) : Terminal operations and output operation logs
  • Status bar (E) : Some states of the current file operation

Common Shortcut keys

Mac shortcuts Windows shortcuts role
cmd + , ctrl + , Open the Settings
cmd + b ctrl + b Quickly show the hidden sidebar
cmd + j ctrl + j Fast display hidden panel
cmd + p ctrl + p Displays files for recent actions
cmd + shift + p ctrl + shift + p Display command panel
cmd + Shift + n ctrl + Shift + n Open a new software window
cmd + Shift + w ctrl + Shift + w Close the current window of the software
cmd + n ctrl + n The new file
cmd + w ctrl + w Close the current file
cmd + enter ctrl + enter Insert a line underneath
cmd + shift + enter ctrl + Shift + enter Insert a line above
Option + write Alt + write Move the code up
Option + left Alt + left Move the code down
Option + shift + ↑ Alt + shift + ↑ Copy the code up
Option + shift + ↓ Alt + Shift + ↓ Copy the code down
Option + Mouse click Alt + mouse click Simultaneous insertion of cursor
cmd + shift + L ctrl + shift + L The cursor appears at all the same content of the selected text
cmd + d ctrl + d You can operate continuously. If you select the latest same content, the cursor appears
cmd + g ctrl + g Skip to specifying the number of rows
cmd + shift + k ctrl + shift + k Delete the entire line
cmd + u ctrl + u Moves the cursor back to the previous position
cmd + / ctrl + / Single-line comments
shift + option + a shift + alt + a Block comments

Common plug-in

The name of the The paper
Auto Import The import tips
Auto Rename Tag When an HTML tag is modified, the matching tag is automatically modified
Better Align Align assignment symbols and comments
Better Comments Write more personalized comments
Bracket Pair Colorizer Highlight matching parentheses in different colors
Code Runner Run selected code snippets (support for most languages)
Color Picker Pick color
DotENV Env file highlighted
EditorConfig for VS Code EditorConfig plug-in
ESLint ESLint plugin for highlighting prompts
Git Blame Displays Git information about the current line in the status bar
Git History Look at the git log
GitLens Displays the latest commit and author of the file, and displays the current commit information
RemoteHub View the code on GitHub locally, without downloading it locally
gitignore .gitignore file syntax
Polacode Generate images from the code
vscode-icons Better looking file icon
vetur Vue development essentials, syntax highlighting, intelligent tips, etc
vue VSCode Snippets Vue syntax hints, more useful than Vetur
image preview Quick preview images in the project
Path Intellisense Automatic path completion
CSS Peek Enhance the association between HTML and CSS to quickly see CSS styles on that element
Vue CSS Peek CSS Peek does not support Vue. The plug-in provides support for Vue files
Prettier Formatting code

Git operation

Vscode integrates with Git by default, but requires a local git client installation.

Use Git in vscode

Configuration synchronization

The new version of vscode already has built-in online synchronization, without the need to install third-party plug-ins. Use the Github account to log in

Restore default Settings

MAC system

// Delete the following two folders:/Users/ username /.vscode /Users/ username /Library/Application Support/CodeCopy the code

Windows system

// Delete all contents in the following folder:
C:>User> User Name >AppData>Roaming>CodeCopy the code

Configuring Automatic Formatting

The VSCode edit area is automatically formatted and saved without focus, using the formatter ESLint

Install the necessary plug-ins for vscode: eslint, vetur

  "files.autoSave": "onFocusChange"."editor.tabSize": 2.// Will conflict with esLint fixes
  "editor.formatOnSave": false."editor.minimap.enabled": true."editor.renderControlCharacters": false."breadcrumbs.enabled": false."git.autofetch": true."git.enableSmartCommit": true."javascript.updateImportsOnFileMove.enabled": "always"."[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.validation.template": false.// vetur does not verify template
  "vetur.format.defaultFormatter.html": "js-beautify-html"."vetur.format.defaultFormatter.js": "none"."vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"."end_with_newline": false}},"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true.// "source.fixAll.stylelint": true
  },
  "explorer.compactFolders": false.Copy the code

The resources

Vscode website