Recently, I sorted out the vscode plugins that I think are easy to use and are used frequently.
1. Emmet plugin
Example: Quickly generate 5 li tags with class item, and the content text is filled with 3 words
code:ul>li*5.item>lorem3
Code explanation:
- " > ": generate child elements;
- " * ": the quantity to be generated;
- " . ": the class of the element
- " lorem ": random number fake text, which is to generate random words, followed by the number to indicate the corresponding number of words to be generated
Renderings:
2. Image preview plug-in to browse pictures quickly
Download a plugin called "Image preview" in the vscode extension store. This plug-in can easily synchronize and help us preview the pictures we use.
Renderings:
3. Live Server plug-in real-time refresh service
Usually, when we modify the code or write some new things, we need to manually refresh the page to see these changes. Then it will be very troublesome. At this time, Live Server can help me solve this problem very well.
After downloading the plug-in, there will be a "Go Live" below, click to start a real-time refresh service to achieve synchronous refresh of the page.
Renderings:
4. Markdown Preview Enhance plug-in markdown document preview
We have readme documents in many projects, or we need to write documents ourselves. This plug-in can help us improve the efficiency of reading and writing documents.
Renderings:
5. chatgpt plugin
Download the Chinese version of the plug-in chatgpt plug-in, no need to go over the wall, and it can provide quick query when we type the code, which is quite convenient.
tip: currently free
Renderings:
6. TypeScript Vue Plugin (Volar)
By default, vue3➕ts will introduce a warning prompt as follows when importing a vue file
How to solve this problem quickly is to download the TypeScript Vue Plugin (Volar) plug-in, which is also one of the official solutions.
When using vue3➕ts, it is recommended to download and enable this plugin.
7. koroFileHeader is a plug-in for generating file header comments and function comments
I was not very used to using this plug-in at first, and felt a lot of discomfort, but it feels okay after I get used to it later.
Renderings:
8.Code Spell Checker word spelling check
Definitely highly recommend this plugin! ! For me who often write wrong words, it is a lucky star. This plug-in was recommended by a friend before. It is very easy to use. It will prompt us in time that words may be misspelled, and it can be repaired with one click! ! ! !
Renderings:
Is it easy to use, hey, and clicking one-click repair will automatically help us to repair multiple "wrong" words synchronously.
9. Tabnine AI Autocomplete automatically completes the code
The abnine plugin will provide auto-completion suggestions based on your code context, including variables, functions, object properties, etc. It can also recognize common code patterns and syntax to provide more accurate suggestions. It is very useful, but it seems that there is also a colipt, but I haven’t used it yet. I can try it next time.
renderings
10. Prettier - Code formatter Prettier is a popular code formatting tool
It helps you automatically format your code to conform to a consistent style and specification.
renderings
I will add it later, write whatever comes to mind