I like to use Webstrom for personal development. Webstrom is very good for details, definition of jump and style, but the company’s internal network development forced me to use VScode. Today (Saturday), THREE weeks after the new company uses VScode for development, I exploded.

Here are a few plug-ins I have to recommend

First, plug-in recommendation

1, Auto Rename Tag

Modify HTML tag automatic completion, changed the first tag, the end of the automatic change. Webstrom bring

2, Code Runner

Automatically detect packjson files by running the NPM command. Webstrom bring

3, Style Theme

Webstrom also has this plugin, but vscode is much uglier

4, eslint

Must be the

5. GitLens — Git supercharged

You can view all git commit records, and the code is automatically prompted

6, Prettier

Yes, note that there is a configuration that you can’t automatically format without enabling it, and you have to press Save to automatically format it. This is better than Webstrom

Pay attention to the “editor. FormatOnSave” : true,

This configuration is the key to automatic saving, because the plug-in installation is not automatically enabled, and we do not know which configuration, this is placed in S

7, Settings Sync

Synchronize your configuration information to Git so you don’t lose it, even if you change your computer. Remember to save the key and GIStid

To provide an additional way for you to save your.vscode files and port them to a new computer, you can also transfer all your configuration

8 vetur.

Write vUE must have

Visual Studio IntelliCode

This is not used yet, but seems to be a way to keep track of your code habits

10, vscode – elm – jump

Normal code jump definition, CTRL, same as Webstrom

Vue CSS Peek

Just like Webstrom, CTRL can jump to CSS definitions, CTRL, just like Webstrom

12, the vue – helper

Lets you jump to a variable function definition in a vue single file, press CTRL, same as Webstrom

13, Bracket Pair Colorizer 2

Mark various different parentheses, good to use

14 and the Image preview

Preview images directly in absolute path, vue file @ is useless

Alias path jump,

That’s the name, just search for it, and provide a jump to the import definition

Two, shortcut keys

I don’t have much to say about general shortcuts, but we want to jump back after the quick jump definition. CTRL + Z will go back to Webstrom.

Vscode: Alt + left or right click (up, down, left, right) to move forward or backward.

Evaluation:

Vscode is light, but it’s not as good as webstrom. Details, all of them, make developers more efficient

Almost all of the above, 10,11 and 12, using vscode must be installed, so that you can provide basically the same code definition jump function as webstrom. I’ve been working on it all morning. On this.