[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!
Although there are many front-end IDEs, such as vim, notepad, sublime text3, atom..., everyone knows who is the strongest IDE on the earth, so I naturally don't need to say more.
I am a user who has been using VSCode for more than 7 years. I have been using VSCode since the first year it was officially released. Until now, I am an out-and-out senior user and productivity maniac.
This article mainly introduces some good plug-ins that I have used in the process of using VSCode over the years. [Recommended study: "vscode introductory tutorial"]
Many people complain that naked VSCode is not easy to use, just like naked Obsidian. Their essence lies in expansion (Chinese people like to call it Plug-ins, all of them will be called plug-ins below). A well-set up VSCode is nothing short of a Swiss Army Knife, a productivity artifact.
touch fish
##Nuggets
![[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/463/514/225/1661914659981149.gif "166191461384516[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
There are also chat mode, Zen mode and other functions, come and experience it!
marketplace.visualstudio.com/items?itemN…
利克
You can log in to your Likou account and read the questions and write solutions directly in VSCode!
marketplace.visualstudio.com/items?itemN…
小八王
Want to play games in VSCode? It can be done! But I don’t play games, and I don’t recommend playing games during working hours. It's okay to brush the Nuggets or dunk hard.![[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/202/166/267/1661914672794651.gif "1661914672794651.gif")
marketplace.visualstudio.com/items?itemN…
Code Experience Class
##copilot
Code prompt artifact, I have been using it since , I basically don’t use my hands when writing code.
Look, I input an f, and it has thought out everything I want to do, including the function name, parameters, and parameter types.
The disadvantage is that it is sometimes clumsy and charges a fee.
![[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/998/390/926/1661915909982580.png "166191550165271[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
Download address:
Tabnine The functions of tabnine and copilot are very similar. They are also based on AI to help us automatically complete the code.
However, tabnine is a little more expensive than copilot, but it also has relatively more functions. You can choose between
and copilot, but I bought both.
Download address:
marketplace.visualstudio.com/items?itemN…##turbo-console-log I want to ask students who write JS, what is the code we have written the most? Then console.log is definitely on the list! Download address: marketplace.visualstudio.com/items?itemN… indent-rainbow Rainbow indentation, when our code nesting structure is more complex, it can help us check the locking. Each indent has a different alternating rainbow color. Download address: marketplace.visualstudio.com/items?itemN… indent-rainbow- palettes Rainbow indented gradient color palette. If you use rainbow indents but want to use other gradient colors, then you need this plugin! It currently supports 16 gradient colors. Download address: marketplace.visualstudio.com/items?itemN… highlight-matching- tag The tag is highlighted. When we have a complex DOM structure, we can use this plug-in to highlight the closing tag, thus preventing us from making some low-level mistakes. Download address: marketplace.visualstudio.com/items?itemN… vscode-colorize Color highlight. Highlight color variables by filling them with background color. Supports CSS: Also supports JavaScript: It also supports all file types , you just need to configure it. Download address: marketplace.visualstudio.com/items?itemN… vscode-todo-highlight To-do items highlighted. In the process of writing code, we often find some things that need to be done and bugs that need to be fixed, but we don’t have time to complete them now, so we will write comments. To make these comments hard to ignore, we can use this plugin. It will highlight the TODO and FIXME keywords by default. We can also configure other keywords and set highlight colors. Download address: marketplace.visualstudio.com/items?itemN… better-comments Comment highlighting. This plug-in helps us insert more humane comments in the code. In addition to TODO and FIXME, it can also define some types for comments. We can also customize other types of comments. Download address: marketplace.visualstudio.com/items?itemN… vscode-import-cost Display the size of the imported package. When we write JavaScript projects, we will import many libraries. This plug-in can help us check the volume of imported packages. Download address: marketplace.visualstudio.com/items?itemN… auto-close- tag Automatically close the tag. When we enter Download address: marketplace.visualstudio.com/items?itemN… Template String Converter It can automatically convert JavaScript template strings. The difference from ToggleQuotes is that it is completed automatically. Download address: marketplace.visualstudio.com/items?itemN… IntelliSense for CSS class Autocomplete smart tip for names in HTML #class. Tailwind CSS IntelliSense tailwind CSS auto-completion smart hints. npm Intellisense This plug-in It can help us intelligently sense the modules to be imported. change-case Sometimes we want to modify the naming rules of variables, such as dashes, underlines, all capitals, etc. Download address: marketplace.visualstudio.com/items?itemN… Nested Comments Nested comments have always been a problem. This plug-in can help us convert the characters of nested comments, and then restore the nested comments when we remove the outer comments. Download address: marketplace.visualstudio.com/items?itemN… Auto Rename Tag Automatically rename tags. You can modify them before or after. It will be modified simultaneously. Download address: marketplace.visualstudio.com/items?itemN… ES7 React/Redux /React-Native snippets This plug-in provides ES7/React/Redux/React-Native and other code snippets. Download address: marketplace.visualstudio.com/items?itemN… ESLint This plug-in integrates ESLint into VSCode. We can check the code of the workspace through this plug-in. Prettier Very classic Plug-in, this plug-in can format a variety of file contents. Download address: marketplace.visualstudio.com/items?itemN… Glean It can extract complex JSX into separate components or files, which is very useful when refactoring. Download address: marketplace.visualstudio.com/items?itemN… htmltagwrap This plug-in is very useful when we need to wrap a certain DOM tag. Download address: marketplace.visualstudio.com/items?itemN… Version Lens You can view the latest version of the npm package that the project depends on, and upgrade to the latest version. Download address: marketplace.visualstudio.com/items?itemN… ##Hungry Delete marketplace.visualstudio.com/items?itemN… Paste JSON as Code It supports many programming languages, such as TypeScript, Python, Go, Java, etc. marketplace.visualstudio.com/items?itemN… Dot Env This plug-in can highlight .env files. marketplace.visualstudio.com/items?itemN… ##Dracula Official Material ThemeMaterial Theme provides Material style themes to make the code look cooler. One Dark ProIf you are an Atom user or a developer who likes Atom themes, you can try this theme plug-in. vscode-iconsWhen we browse folders, if there is an icon in front of the files, it will be very convenient to distinguish them. The default directory structure of VSCode looks like this: Another one icons theme plugin. Download address: marketplace.visualstudio.com/items?itemN… Material Icon Theme Almost It is the most comprehensive icon theme plug-in. Supports so many kinds of folders: Download address: marketplace.visualstudio.com/items?itemN… ##todo-tree marketplace.visualstudio.com/items?itemN… vscode-peacock The colors it supports by default are Angular red, Microsoft blue, JS yellow, mandalorian blue, Node green, React blue, etc. Quokka.jsWhen we want to quickly verify a certain piece of JS or TS code, we can use this plug-in. rest-clientThere are many ways to test API, such as heavyweight PostMan and lightweight curl. But none of them are so convenient to use in VSCode. EditorConfig for VS Code When our project is developed using multiple editor tools, if we want to unify the code style, we need to configure the configuration files of different tools. Download address: Git LensAlthough VSCode There is built-in Git functionality, but it's not powerful enough. Open in GitHub You can quickly open projects, files, Actions, PR, etc. in Github. Download address: marketplace.visualstudio.com/items?itemN… open in browser Supports quickly opening HTML files in the browser. Download address: marketplace.visualstudio.com/items?itemN… Live Server When we modify the content of html and want the browser to be consistent with the code, we need this plug-in. Download address: marketplace.visualstudio.com/items?itemN… Live Preview It can preview HTML in VSCode in real time. Download address: marketplace.visualstudio.com/items?itemN… Project Manager When we have multiple projects, we can manage the projects through this plug-in and quickly switch between projects, tags and other functions. Download address: marketplace.visualstudio.com/items?itemN… Live Share Do you want to share your code with others for real-time collaborative editing and debugging? This plugin can share projects developed in any programming language or any type of project with others. The other party can write code directly in your environment without installing any additional environment or SDK. Download address: marketplace.visualstudio.com/items?itemN… Markdown PDF Although the name is markdown PDF, markdown can actually be exported to files in various formats. Download address: marketplace.visualstudio.com/items?itemN… Markdown Preview Github Styling Preview Markdown files in Github style. Download address: marketplace.visualstudio.com/items?itemN… I have introduced so much, go and create the fastest, most stable, and most suitable IDE for you! For more knowledge about VSCode, please visit: vscode tutorial!
With this plug-in, you only need to move the cursor to the variable to be printed, press ctrl option l, console.log will be automatically entered on the next line, and the file name, line number, variable name, etc. I’ve brought all the information with me, isn’t it convenient? <div>, it will automatically add the following brackets. <p>Although it is a very simple function, it is a necessity! </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/195/689/298/1661916745527778.gif" class="lazy" title="166191622632230[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!" alt="[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!"></p>
<p>Download address: <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">code-spell- checker</span></strong></p>
<p>#Spelling error check. </p>
<p>When we write code, occasionally words will be misspelled. This plug-in can check for possible misspelled words and provide a wavy line reminder. </p>
<p>It supports camel case nomenclature. </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/195/689/298/1661916745527778.gif" class="lazy" title="166191670658301[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!" alt="1[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!"></p>
<p>Download address: <a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">path-intellisense</span></strong></p>
<p>Intelligent path awareness can help us automatically add file names. </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/195/689/298/1661916745527778.gif" class="lazy" title="166191673873924[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!" alt="1[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!"></p>
<p>Download address: <a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">Toggle Quotes</span></strong></p>
<p>JavaScript strings can support three forms, single quotes, double quotes, and angles. Sometimes when we want to splice strings, we need to change the original single quotes or double quotes. For the horn. To use this plug-in, just press the shortcut key <code>cmd '. ![[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/195/689/298/1661916745527778.gif "1661916745527778.gif")
Download address: marketplace.visualstudio.com/items?itemN…
If you use tailwind CSS, you can disable IntelliSense for CSS class names in HTML.
Download address: marketplace.visualstudio.com/items?itemN…
It will be completed automatically when we type import.
Download address: marketplace.visualstudio.com/items?itemN…
This plug-in can help us modify variable names.
It seems useless if you just modify a variable name. But its advantage is that it can modify many variable names at the same time.
Because the nested comments will be combined with the beginning of the first comment to form a valid comment, and the following parts will be ignored.
You can quickly create template code and improve our development efficiency.
For example, use React's useState Hook, which can automatically convert the camel case naming method of setXXX and automatically jump to the cursor position. 
Download address: marketplace.visualstudio.com/items?itemN…![[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/875/560/356/1661917044791891.gif "1661917044791891.gif")
We can select a DOM tag and then hold down Options w to create a tag in the outer layer. ![[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/189/102/589/1661917331718903.gif "166191705574005[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
Theme category
Dracula's official theme, the most One of the classic themes and my favorite. Download address: Download address: Download address: After using VSCode Icons, the icon becomes like this: Download address:
Supports so many kinds of files: Tool Category
![3[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/317/971/640/166191746766064%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191746766064[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![3[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/285/618/546/166191748395604%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191748395604[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![3[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/713/818/502/166191749182181%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191749182181[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
marketplace.visualstudio.com/items?itemN…![3[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/688/689/922/166191749821408%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191749821408[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
Right-click on the HTML file, there will be two options in the menu, or use the corresponding shortcut keys.
It will start a server locally, monitor file changes, and refresh the browser.
Right-click on the HTML file, there will be two options in the menu, or use the corresponding shortcut keys.
But it does not support applications developed by frameworks such as React and Angular.
You can even collaborate and edit directly in the web!
Supports so many export formats. Summary
If this article is helpful to you, please like it.
If you have more practical and valuable VSCode plug-ins, please leave a message in the comment area.
![3[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/231/502/560/166191734638345%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191734638345[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![3[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/173/589/365/166191735599786%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191735599786[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![3[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/305/551/288/166191736298137%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191736298137[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![3[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/834/669/380/166191746092826%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191746092826[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/553/306/282/166191750572398%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191750572398[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![4[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/730/311/614/166191751310985%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191751310985[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![4[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/609/708/338/166191752050181%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191752050181[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![4[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/572/772/120/166191753225798%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191753225798[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![4[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/579/109/358/166191754023255%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191754023255[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![4[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/311/148/955/166191754779493%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191754779493[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![4[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/561/305/504/166191755549105%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191755549105[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
![4[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!](https://img.php.cn/upload/image/530/540/707/166191756421376%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use! "166191756421376[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!")
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
How to define header files for vscode
Apr 15, 2025 pm 09:09 PM
How to define header files using Visual Studio Code? Create a header file and declare symbols in the header file using the .h or .hpp suffix name (such as classes, functions, variables) Compile the program using the #include directive to include the header file in the source file. The header file will be included and the declared symbols are available.
What computer configuration is required for vscode
Apr 15, 2025 pm 09:48 PM
VS Code system requirements: Operating system: Windows 10 and above, macOS 10.12 and above, Linux distribution processor: minimum 1.6 GHz, recommended 2.0 GHz and above memory: minimum 512 MB, recommended 4 GB and above storage space: minimum 250 MB, recommended 1 GB and above other requirements: stable network connection, Xorg/Wayland (Linux)
How to solve the problem of vscode Chinese annotations becoming question marks
Apr 15, 2025 pm 11:36 PM
How to solve the problem that Chinese comments in Visual Studio Code become question marks: Check the file encoding and make sure it is "UTF-8 without BOM". Change the font to a font that supports Chinese characters, such as "Song Style" or "Microsoft Yahei". Reinstall the font. Enable Unicode support. Upgrade VSCode, restart the computer, and recreate the source file.
How to switch Chinese mode with vscode
Apr 15, 2025 pm 11:39 PM
VS Code To switch Chinese mode: Open the settings interface (Windows/Linux: Ctrl, macOS: Cmd,) Search for "Editor: Language" settings Select "Chinese" in the drop-down menu Save settings and restart VS Code
Common commands for vscode terminal
Apr 15, 2025 pm 10:06 PM
Common commands for VS Code terminals include: Clear the terminal screen (clear), list the current directory file (ls), change the current working directory (cd), print the current working directory path (pwd), create a new directory (mkdir), delete empty directory (rmdir), create a new file (touch) delete a file or directory (rm), copy a file or directory (cp), move or rename a file or directory (mv) display file content (cat) view file content and scroll (less) view file content only scroll down (more) display the first few lines of the file (head)
How to set vscode in Chinese
Apr 15, 2025 pm 09:27 PM
There are two ways to set up a Chinese language in Visual Studio Code: 1. Install the Chinese language package; 2. Modify the "locale" settings in the configuration file. Make sure Visual Studio Code version is 1.17 or higher.
How to set vscode
Apr 15, 2025 pm 10:45 PM
To enable and set VSCode, follow these steps: Install and start VSCode. Custom preferences including themes, fonts, spaces, and code formatting. Install extensions to enhance features such as plugins, themes, and tools. Create a project or open an existing project. Use IntelliSense to get code prompts and completions. Debug the code to step through the code, set breakpoints, and check variables. Connect the version control system to manage changes and commit code.
How to use VSCode
Apr 15, 2025 pm 11:21 PM
Visual Studio Code (VSCode) is a cross-platform, open source and free code editor developed by Microsoft. It is known for its lightweight, scalability and support for a wide range of programming languages. To install VSCode, please visit the official website to download and run the installer. When using VSCode, you can create new projects, edit code, debug code, navigate projects, expand VSCode, and manage settings. VSCode is available for Windows, macOS, and Linux, supports multiple programming languages and provides various extensions through Marketplace. Its advantages include lightweight, scalability, extensive language support, rich features and version