Plug-in article

Element

In addition to making it easy to spell HTML, you also have options to expand out, expand in, jump to matching tags, wrap selected HTML code, and override your own shortcut keys

All Autocomplete

This is a code prompt tool that automatically parses keywords, such as HTML, JS, JSON, etc., saving a lot of manual spelling pain

Auto Rename Tag

Easy to change the label name

Bracket Pair Colorizer

Highlight matching labels

Bracket Select

Alt + a quickly select the contents of (),{},[],””,”

For JS, Alt + Shift + → Expand Alt + Shift + ← to reduce the selection

Chinese (Simplified) Language Pack for Visual Studio Code

Chinese VSCode, very practical

Live Server

Individual HTML files can also be refreshed automatically in the browser as code changes

Moonlight

This is one of the most frequently asked questions about the high appearance level VSCode theme plugin on nuggets

Workspace Sidebar

You can switch the working range. You can open multiple associated projects at the same time in the same working range, so that you don’t have to open multiple VSCode Windows. After the plug-in is installed, the sidebar will have an extra logo

The first step is to configure the plug-in to read the address of the code-workspace file

Add the required files to the current workspace, and then store the current workspace in the file you just set up

Click on the plug-in icon to see the workspace you just saved

When adding a new workspace, be sure to close the current one, otherwise it will affect each other

Vetur, Prettier

Vetur for Vue, Prettier for other files

Select the format file and right click on the editor

For collaborative development, the default formatting configuration is fine

Vetur

Automatic import

“Vetur.com pletion. TagCasing” : “initial”, after setting this can import similar inside the tempalte “CountDown”, at the same time can also automatically add related statements in the script

Script can also be imported automatically, such as mapState

warning

“Vetur. IgnoreProjectWarning” : true, banned vetur pop-up warning

Vue Jump to Tag

Bind shortcut keys for the following commands

extension.jumptotemplate => Ctrl+1

extension.jumptoscript => Ctrl+2

extension.jumptostyle => Ctrl+3

Ctrl+1, Ctrl+2, Ctrl+3 the original bound commands have little effect

vue-helper

Press F12 to jump from

Import “folder name” can be automatically imported

Alt + x select shortcut key, can be used for template, script, style, select method is very useful

Vue CSS Peek

Press F12 to jump from

Styles cannot be a single file and should be placed last

Open the Settings. The json

Ctrl + P, type “>”, select “Preferences: Open Settings”

There are three ICONS in the upper right corner, and the leftmost icon can be converted to the UI

shortcuts

File => Preferences => keyboard shortcuts

unbundling

Right mouse button, delete key Binding

The keys

Copy a line: Just CTRL + C, the cursor can be anywhere, there is no need to select a line with the mouse

Select the same: Ctrl+ D

Select all the same: Ctrl+Shift+ L

To rollback the cursor: Ctrl+ U

Find folders: Ctrl+ Shift + F

Multi-line comments: Alt + Shift +A

File Explorer: Ctrl+ Shift + E

Move to the beginning and End of the document: Ctrl+Home/End

Skip to the function definition: f12

Skip to the implementation of the function: Ctrl+f12

View the reference: Shift + F12

The function or variable is modified wherever it appears: F2

Multi-line selection: Shift + Alt + left mouse button

Expand/zoom out options: Shift+Alt+Left and Shift+Alt+Right

Definition thumbnail: just look at it without jumping past Alt+F12

Emment User-defined shortcut keys

Select CTRL + Alt + U to expand outward

To expand inward, select CTRL + Alt + I

Jump to the matching label: CTRL + Alt + P

Wrap the selected HTML code: CTRL + Alt + W

Markdown

Real-time preview

Ctrl + P, type ‘>’, select ‘Open side Preview’

Insert local image

Relative paths

! PNG (./image/choose-formatter-plugin.png)Copy the code

An absolute path

! [cat] (file:///H:/mao/va.mp4)Copy the code

Double screen using the

No more three columns on one screen

ctrl + shift + P

Workspace: Duplicate As Workspace in New Window

jsconfig.json

Address: document code.visualstudio.com/docs/langua…

Add this file to the vue project, press F12 to jump directly to the import code statement, note that vue files need some suffixes

The basic template

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}


Copy the code