Experience:

The serial numbers for Sublime and WebStorm have been falling off a lot lately, and I’ve seen this happen. I happen to have friends who use VS Code, and I think VS Code is a good editor compared to Atom, Sublime and WebStorm. More than Sublime plug-ins, better looking interface than Atom, lighter weight than WebStorm. Is collecting various advantages in one, the key is free, free, don’t have to pay for the editor and distress, and greatly look to the right

Settings Sync

Synchronize the configuration, on different hosts, once and for all

  1. Create Gist on GitHub
  2. Gist life cards can be configured inside the Settings

Good news, how many plugins can you download with one click?

Download Settings Sync plugin, restart CTRL + Shift + P, enter Sync, and select Advanced → Download Gist from public Settings, then press CTRL + Shift + P, enter Sync, select Download configuration, and copy this code into it D3bc45d8096f6bc3d9d46c69ed7052cd OK, finished (there may be some people don’t understand, then GIF operation chart, first I slipped)

HTML Snippets

Super useful and elementary H5 code snippets and tips

Atom Keymap

Sublime Text Keymap and Settings Importer

IntelliJ IDEA Keybindings

Shortcut keys used to replace (choose one, multiple will conflict)

Color-Highlight

Highlight colors in the editor.

Guides

Code label alignment line.

HTML CSS support

The CSS automatically completes

Npm Intellisense

Auto-complete the code plug-in introduced by the NPM module in the import statement

Debugger for Chrome

Let vscode map chrome’s debug function, static pages can use vscode to break point debugging

background

Set the background

beautify

Beautify JavaScript, JSON, CSS, Sass, and HTML in Visual Studio code.

Auto Close Tag

Automatically closes HTML tags

###Auto Rename Tag Automatically Rename the matching Tag when you modify an HTML Tag

Bracket Pair Colorizer

Let the parentheses have their own color so they can be easily distinguished

Open-In-Browser

Since VSCode does not provide a built-in interface for opening files directly in the browser, this plug-in can open command panel options.

Live Server

A Live Server for server-side pages, such as PHP

Indenticator

The indentation highlight

IntelliSense for CSS class names

Intelligent naming hints for CSS class names

JavaScript (ES6) code snippets

ES6 Syntax tips

Path Intellisense

The path is automatically completed when you enter it in the editor

Git History

View and search git logs along with charts and details. View the previous copy of the file. View and search history

CSS Peek

The corresponding CSS (class and ID) can be found in the string in the source code. It’s in that CSS file, and what line it’s on.

Easy WXLESS

Wechat small program WXSS file dedicated, save can be automatically generated and synchronized compilation into the same name CSS file

px2rem

Rem px value

Vue plug-in

vetur

Syntax highlighting, intelligent awareness, Emmet Note vUE file code formatting, need to add this line of code in Preferences – Settings – User Settings

    "vetur.format.defaultFormatter.html": "js-beautify-html", // format the HTML part of vueCopy the code

Vue 2 Snippets

Added syntax highlighting based on the latest Vue official syntax highlighting file, and added code completion based on the Vue 2 API

vscode-element-helper

Element-UI library code reminder theme recommendation: light tones

Brackets Light Pro

Quiet Light

Open a new window: Ctrl+Shift+N Close a window: Ctrl+Shift+W Open multiple editors simultaneously (view multiple files)

New file Ctrl+N history Open file switch between Ctrl+Tab, Alt+Left, Alt+Right cut out a new editor (up to 3) Ctrl+\, You can also hold down the Ctrl mouse and click on the file name in The Explorer, Ctrl+1, Ctrl+2, Ctrl+3, rotate between the three editors, Ctrl+ ‘, Ctrl+ K and then press Left or Right format

Line of code indent Ctrl+[, Ctrl+] Fold open block of code Ctrl+Shift+[, Ctrl+Shift+] Ctrl+C Ctrl+V If unchecked, default copy or cut a whole line of code to format: Shift+Alt+F, or Ctrl+Shift+P and enter Format code to trim Spaces. Ctrl+Shift+X to move a line Up and Down: Alt+Up or Alt+Down to copy a line Up and Down: Shift+Alt+Up or Shift+Alt+Down Inserts a line below the current line Ctrl+Enter inserts a line above the current line Ctrl+Shift+Enter cursor related

Move to the End of the line: Ctrl+End Move to the beginning of the file: Ctrl+Home move to the last half bracket Ctrl+Shift+] Select the current line Ctrl+ I (double click) select from the cursor to the End of the line Shift+End Select from the beginning of the line to the cursor Shift+Home Delete all words to the right of the cursor Ctrl+Delete Shrink/expand selection: Shift+Alt+Left and Shift+Alt+Right multi-cursor Alt+Click add CURSOR or Ctrl+Alt+Down or Ctrl+Alt+Up and select all matching cursor Ctrl+Shift+L Ctrl+D See below Ctrl+Shift+K) Roll back the previous cursor operation Ctrl+U to refactor the code

Alt+F12 lists all references: Shift+F12 and modifies all matches in this file: Ctrl+F12 Rename: For example, to change a method name, select it, press F2, type the new name, and press Enter. All files are changed. Jump to the next Error or Warning: When there are multiple errors, press F8 to jump to view diff one by one. In Explorer, right-click Set file to compare, and right-click compare with ‘file_name_you_chose’. To find the replacement

Find Ctrl+F find Replace Ctrl+H find Ctrl+Shift+F throughout the folder

Reference: VS Code use tips