From public number: front-end plus plus
I recommend several very useful VS Code plug-ins. GIF attached figure.
Reference Article: Translated Article [1]
Plug-ins to improve development efficiency
1. Better Comments
Better Comments You can use different prefixes to make Comments appear in different colors. Great for quickly scanning and finding important code snippets. If used, recommend the team to standardize.
2. Bracket Pair Colorizer
Do you often appear in projects looking for missing parentheses? It’s a huge waste of time. Using the plugin above, it will help you to mark the parentheses in different colors, isn’t it great?
3. change-case
Change-case provides an easy way to change a word or variable name to a variety of cases, including camelCase, snake_case, TitleCase… This kind of multi-person collaboration can greatly improve efficiency when inconsistent code is encountered.
4. ES7 React/Redux/GraphQL/React-Native snippets
It’s a real waste of time to write boilerplate code every time you create a component. This plugin has a lot of useful snippets, and you can quickly initialize a boilerplate of code, saving a lot of time.
5. ESLint
6. GitLens
GitLens is a very, very useful plug-in that gives you an insight into Git commit history. It’s as accurate as it gets. It’s how you swing a pan fast.
Swipe to the row to see the commit author, the commit date, and the content of the commit.
7. Import Cost
Import Cost helps you to be aware of the file size you are importing. It displays the size of each import inline, with red and yellow warning colors if the import is larger than normal.
8. indent-rainbow
Through color differentiation, so that you can see the indentation at a glance.
9. javascript console utils
Just find the variable you want to console.log and hold down the shortcut key to bring up console with the variable name
10. Prettier
This is very important. Format your code automatically with Alt + Shift + F, or you can have it format automatically every time you save. Saves you a lot of time on indentation, space, and other code styles. Keeping the same prettier configuration is also important in teamwork.
11. Version Lens
Keeping track of all the latest versions of NPM packages can be cumbersome. The version lens shows you how to inline the version packs you installed. Compare JSON to the current version.
Enhance beautiful plug-ins
file-icons
Fira Code
I’m going to change === = to 3 equals, so it’s up to you.
Plug-ins that are no longer used
When too many plug-ins are added to VScode, the computer’s small fan goes whooshing. So I will uninstall some unnecessary plug-ins.
Auto-close tag & Auto Rename Tag
Now, most of this functionality is contained in VS code. You are ready to remove the plug-in
Color Highlight
Highlight any CSS color value and the color it represents. Also, VS now displays a colored box next to the value, which is enough.
If you have enough memory, just install it.
The last
Hope you found this article helpful
Translation article: https://dev.to/zaklaughton/every-vs-code-extension-a-javascript-web-developer-should-have-in-2020-with-gifs-2b6n
● No. 1164, input no. Direct to this article
● Enter m to get the article catalog
Recommend left left left
Web development