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.
##Nuggets
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! Download address: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. Download address:marketplace.visualstudio.com/items?itemN…
##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.
Download address:
marketplace.visualstudio.com/items?itemN…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 Download address: Material ThemeMaterial Theme provides Material style themes to make the code look cooler. Download address: One Dark ProIf you are an Atom user or a developer who likes Atom themes, you can try this theme plug-in. Download address: 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: After using VSCode Icons, the icon becomes like this: Download address: 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. ##Download address: Quokka.jsWhen we want to quickly verify a certain piece of JS or TS code, we can use this plug-in. Download link: 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. Download address: 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. Download address: 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="https://img.php.cn/upload/image/191/846/797/166191622632230%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use!" 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="https://img.php.cn/upload/image/744/455/624/166191670658301%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use!" 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="https://img.php.cn/upload/image/345/662/845/166191673873924%5BOrganize%20and%20share%5D%2050+%20practical%20VSCode%20plug-ins,%20come%20and%20collect%20them%20for%20use!" 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 '
.
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…
We can select a DOM tag and then hold down Options w to create a tag in the outer layer. Theme category
Dracula's official theme, the most One of the classic themes and my favorite.
Supports so many kinds of files: Tool Category
marketplace.visualstudio.com/items?itemN…
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.