Home>Article> [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!

青灯夜游 forward: 2022-08-31 11:51:14 5106browse

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.

Okay, let’s get started!

touch fish

##Nuggets

The first one is of course it.

As a senior Nugget player, if you don’t even know how to play Nuggets in VSCode, how can you have the nerve to say that you are in the front-end circle?

This is the dark theme:

[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!

This is the light theme:

[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!

This is the article page :

[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!

[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!

Download address:

marketplace.visualstudio.com/items?itemN…

利克

You can log in to your Likou account and read the questions and write solutions directly in VSCode!

[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!

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.

[Organize and share] 50+ practical VSCode plug-ins, come and collect them for use!

Download address:

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! Download address:

marketplace.visualstudio.com/items?itemN…

TabnineThe 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!
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?

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

, it will automatically add the following brackets. Although it is a very simple function, it is a necessity! Download address: marketplace.visualstudio.com/items?itemN… code-spell- checker #Spelling error check. When we write code, occasionally words will be misspelled. This plug-in can check for possible misspelled words and provide a wavy line reminder. It supports camel case nomenclature. Download address: marketplace.visualstudio.com/items?itemN… path-intellisense Intelligent path awareness can help us automatically add file names. Download address: marketplace.visualstudio.com/items?itemN… Toggle Quotes 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 cmd '. 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. Download address:marketplace.visualstudio.com/items?itemN… Tailwind CSS IntelliSense tailwind CSS auto-completion smart hints. If you use tailwind CSS, you can disable IntelliSense for CSS class names in HTML. Download address:marketplace.visualstudio.com/items?itemN… npm Intellisense This plug-in It can help us intelligently sense the modules to be imported. It will be completed automatically when we type import. Download address:marketplace.visualstudio.com/items?itemN… change-case Sometimes we want to modify the naming rules of variables, such as dashes, underlines, all capitals, etc. 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. Download address:marketplace.visualstudio.com/items?itemN… Nested Comments Nested comments have always been a problem. 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. 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. 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… ESLint This plug-in integrates ESLint into VSCode. We can check the code of the workspace through this plug-in. Download address:marketplace.visualstudio.com/items?itemN… 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. We can select a DOM tag and then hold down Options w to create a tag in the outer layer. 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 This plug-in helps us delete multiple empty lines with one click. Hold down Option Delete to delete multiple blank lines. Download address:marketplace.visualstudio.com/items?itemN… Paste JSON as Code When we copy a piece of JSON and want to generate the corresponding JSON structure based on this piece of JSON, we can use this plug-in.It supports many programming languages, such as TypeScript, Python, Go, Java, etc. Download address:marketplace.visualstudio.com/items?itemN… Dot Env Whether it is a front-end project or a back-end project, most of them will use .env files to save environment variables.This plug-in can highlight .env files. Download address:marketplace.visualstudio.com/items?itemN… Theme category ##Dracula Official Dracula's official theme, the most One of the classic themes and my favorite. Download address: marketplace.visualstudio.com/items?itemN… Material ThemeMaterial Theme provides Material style themes to make the code look cooler. Download address: marketplace.visualstudio.com/items?itemN… One Dark ProIf you are an Atom user or a developer who likes Atom themes, you can try this theme plug-in. Download address: marketplace.visualstudio.com/items?itemN… vscode-iconsWhen we browse folders, if there is an icon in front of the files, it will be very convenient to distinguish them. VSCode Icons This plug-in is here to do just that!The default directory structure of VSCode looks like this: After using VSCode Icons, the icon becomes like this: Download address: marketplace.visualstudio.com/items?itemN… ##file-iconsAnother 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 files: Supports so many kinds of folders: Download address:marketplace.visualstudio.com/items?itemN… Tool Category ##todo-tree todo tree can manage projects through TODO and FIXME comments. We can quickly view the annotated files. Download address:marketplace.visualstudio.com/items?itemN… vscode-peacock When we run multiple VSCode windows at the same time, we can set different colors for each window to distinguish different projects.The colors it supports by default are Angular red, Microsoft blue, JS yellow, mandalorian blue, Node green, React blue, etc. ##Download address: marketplace.visualstudio.com/items?itemN… Quokka.jsWhen we want to quickly verify a certain piece of JS or TS code, we can use this plug-in. It provides a playground to better verify the logic of the code. Download link: marketplace.visualstudio.com/items?itemN… 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. REST Client is a good plug-in that can help us easily test APIs in VSCode. Download address: marketplace.visualstudio.com/items?itemN… EditorConfig for VS CodeWhen 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. This tool allows us to apply these rules in all editors by writing just one .editorconfig.Download address: marketplace.visualstudio.com/items?itemN… Git LensAlthough VSCode There is built-in Git functionality, but it's not powerful enough. Git Lens adds the functionality of Git, we can view commit information in each line of code, it can also compare different commit differences, and some other useful Git functions. Download address: marketplace.visualstudio.com/items?itemN… 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. Right-click on the HTML file, there will be two options in the menu, or use the corresponding shortcut keys. 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. 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. Download address:marketplace.visualstudio.com/items?itemN… Live Preview It can preview HTML in VSCode in real time. But it does not support applications developed by frameworks such as React and Angular. 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. You can even collaborate and edit directly in the web! 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. Supports so many export 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… Summary I have introduced so much, go and create the fastest, most stable, and most suitable IDE for you! 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. For more knowledge about VSCode, please visit:vscode tutorial!


    
     Python
     Java
     JavaScript
     typescript
     json
     css
     postman
     html
     npm
     angular
     String
     for
     cURL
     auto
     字符串
     class
     delete
     JS
     console
     dom
     github
     git
     ide
     vim
     vscode
     visualstudio
     重构
     bug
     copilot
     atom
     
    
    
     Statement：
     
      This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete


   
    Previous article：[Summary sharing] 10 commonly used front-end and back-end authentication methods, so you will no longer be confused
    Next article：[Summary sharing] 10 commonly used front-end and back-end authentication methods, so you will no longer be confused
   
   
    
     Related articles
     See more
     
    
    
     29 Vue classic interview questions (with detailed source code-level explanations)
      
     [6 Categories] Practical front-end file processing tool library, come and collect it!
      
     Understand Vue3+Vite3 source code in seconds, as long as you know these 20 libraries!
      
     [Summary sharing] 10 commonly used front-end and back-end authentication methods, so you will no longer be confused


  
   
    
     Home
     Course
     Q&A
     My
     
    
   
  
  
   
    
     
     
     
    
    
     Home
       
     Course
       
     Article
       
     Q&A
       
     Dictionary
       
     Manual
       
     Download
       
     Topic
       
     
    
   
  
  
   
    
   
   
    
     
      
       Home
      
      
       Article
      
      
       Q&A
      
      
       Course
      
      
       Topic
      
      
       Download
      
      
       Game
      
      
       Dictionary
      
      
     
    
    
     
     
      简体中文（ZH-CN）
      English（EN）
      繁体中文（ZH-TW）
      日本語（JA）
      한국어（KO）
      Melayu（MS）
      Français（FR）
      Deutsch（DE）