How to make VSCode as good as Webstorm (especially Vue project)

When you are very comfortable with webstorm and have to switch to vscode, it feels like the world is doomsday. Don’t worry you are not the only one to felt this way :(.

In webstorm everything is available from the start, whereas in vscode you will spend time customizing extensions to suit your needs.

I’ll list the extensions I use (especially for vue project) to make VSCode feel like a webstorm (hopefully).

1.Webstorm IntelliJ Darcula Theme
For theme i use this extention, because my eyes already familiar with the color.

2. Webstorm Icon Theme
This icon maybe not to similar with webstorm, but better have this than nothing.

3. Vetur for Vue 2 / Volar for Vue 3
This is the must have extention, it will handle many things like Semantic-highlighting

• Snippet
• Emmet
• Linting / Error Checking
• Formatting
• IntelliSense
• Debugging
• Component Data
• Syntax-highlighting
• and many more

4. Auto Rename Tag
Feature that i miss a lot form Webstorm is when you change the name of Component or tag, it will automatically change the closing tag too.

5. Git Lens
It will help you to add many functionality for git in VSCode.

6. Highlight Matching Tag
It just help you to recognize for matching tag, there are so many option for this mathing tag like Bracket Pair Colorizer.

7. ESlint
For project that already integrate with ESlint, this extention is a must.

8. Jest Runner
It help to run unit test per unit (Like in Webstorm of course), ̶b̶u̶t̶ ̶f̶o̶r̶ ̶c̶o̶v̶e̶r̶a̶g̶e̶ ̶i̶n̶ ̶c̶u̶r̶r̶e̶n̶t̶ ̶f̶i̶l̶e̶ ̶y̶o̶u̶ ̶m̶u̶s̶t̶ ̶r̶u̶n̶ ̶i̶t̶ ̶m̶a̶n̶u̶a̶l̶l̶y̶ ̶:̶(̶ (If you have trick for this let me know).

9. Coverage Gutters
I already know this extention exist, so we can check coverage test by color. This is the feature that Webstorm already have.

10. Hungry Delete
This is will improve productivity in vscode, so when we backspace or delete we not backspace the whitespace one.

Optional Extention

• IntelliJ IDEA Keybindings
  If you already master the shortcut in Intellij Idea/Webstorm and don’t want to memorize new things again in VSCode try this one.
• Vue VSCode Snippets
  If you want snippet for vue try this one.

Conclusion

If you have enough money to subscribe to Webstorm, i super recommend this, especially if you care about your mental health because of using VSCode.

Thank you.