This is the third day of my participation in the August More text Challenge. For details, see: August More Text Challenge

This article does not do any editor comparison, just my daily use of VSCode development, and like to mess with VScode, will look for some interesting plug-ins, so more and more, today I recommend you my collection of more than 60 VScode plug-ins, it is said that too many plug-ins, the editor will change card, Maybe my computer configuration is still up to the top, I do not feel kaka’s.

Next, I will introduce several categories, such as optimizing appearance, extending functions, improving coding efficiency, code formatting, and other plug-ins.

One is to share them with those who need them, and the other is to ask your friends for other interesting plug-ins through this post, which can be any type. If you want to suggest another plugin, please add it in the comments section and I’ll add it to the post with your ID.

Note: This article only covers the basic use of the plug-in, which is to let you know that such a plug-in exists, as well as a general understanding of what the plug-in can do, some of the detailed configuration of the plug-in is too complex, there is a need for friends to surf by themselves. Depending on your PC, vscode configuration, and plug-in, some plug-ins may not work on your PC. All the shortcut keys mentioned in this article are for Windows. Please learn about the shortcut keys for other operating systems.

To optimize the appearance

Good horse with good saddle, beautiful editor appearance, can improve the coding experience of programmers, developers can be in a good mood, let write bugs more motivated.

Better Comments

A beautified annotation plug-in, according to different types of annotations, different colors, at a glance.

After installation, the plug-in will come with several colors of comments by default, and you can customize any color and type of comments from vscode’s configuration file. I have found the specific configuration method for you.

👉👉 vscode plugin – Better Comments – Code comments highlighted

Bracket Pair Colorizer / Bracket Pair Colorizer 2

This is a plugin to find objects, not to help you find objects ah, is to help you find the other half of the bracket. Currently, there are two versions, of which Bracket Pair Colorizer 2 is the enhanced version. I haven’t studied in detail what is enhanced. And it has a lot of Settings, anyway, after the installation of the default configuration is enough, interested students to find more interesting gameplay.

You can see that the matching brackets are the same color, and when I select one bracket, there’s a line that helps you find the other half.

Highlight Matching Tag

This is also a plugin that looks for objects, and it looks for the object of the tag. Look at the demo of my last plugin. When I click on an HTML tag, the paired tags appear underlined to indicate who is paired with whom.

Chinese

Let your VScode become Chinese, like me this English weak chicken will use, big guys skip. Why put it in the category of optimized appearance, because I think Chinese is better than English 🧐🧐, install and restart it.

Color Highlight

Just look at the name, the plug-in used to highlight the colors in our code. You can see the CSS color properties that I set in the following image.

Community Material Theme / Material Theme

To modify the Theme of the editor, there are many built-in, I use the Material Theme Palenight High Contrast this one. After the installation, click set color theme.

Material Theme Icons

There are many other plugins that modify file ICONS. If you don’t like this one, you can find it by yourself.

Error Gutters

Where the error is reported, there are red wavy lines, which can be said to be very intuitive.

Image preview

Preview a reference to an image in the code. When you move the mouse over it, a small window displays the image.

indent-rainbow

Just look at the name, the rainbow indent, which is the different indented code to show different colors.

Indenticator

When you click on an indent, a white line appears to show you the current indent level, making it easier to see the structure of the code.

Trailing Spaces

Display trailing Spaces.

VSCode Great Icons

Another plugin to modify file Icons, I use this one, compared to Material Theme Icons I like this style more, radish green vegetables can have a love, everyone to take what they want.

Function extension

Editor itself function is still limited, in order to cope with daily development, had to install a lot of other software to assist, but also can introduce some commonly used auxiliary software through the plug-in way, their function may not have the native powerful, but basically enough, and is really very convenient.

AZ AL Dev Tools/AL Code Outline

The plugin for sorting out the structure of the code will add an AL OUTLINE option to the file icon when installed.

To demonstrate, I found a long, typical VUE file. Please ignore my code content and focus on the functions of the plug-in 🤣🤣. You can see that the first layer of expansion is template, Script and style, which are very typical vUE single file components. Layer by layer, you can see dom nodes, functions defined in methods, etc., and then click to quickly locate the target location, mom no longer need to worry about my global search!

Note: it seems to be expanded by default in this, it should be possible to set whether to expand by default, but I have not studied, interested in the big guy can further investigate.

Code Runner

You can run the code, view the results in the editor, view the console.log in the console, and many other ways to play. See this article for details

👉 👉 VSCode plug-in recommendation | Code Runner: a key Code to run, support more than 40 languages

CodeIf

I read a sentence on the Internet that there are only two difficult things in computer science: cache invalidation and naming. Hahaha indeed, naming is always a pain when developing projects.

But naming is also a very important thing in the development process, a good function naming, can let you instantly understand the function it implements, so, whenever the development process encountered to name variables, functions, classes will think hard, all kinds of translation.

However, CodeIf solves this problem by searching GitHub, Bitbucket, and GitLab for real use variable names, and provides you with some of the most frequently used terms.

To use it, simply select the variable name and right-click on CodeIf to jump to a web page displaying candidate names.

Color Info

View color details plugin, can display color values in small window, RGB, HSL, CMYK, HEX, etc., can add the type of information to display in the configuration item.

Code Spell Checker

Check the correct spelling of words in the code. When a word is not normal, a wavy line will appear below to indicate. You can also customize the dictionary and ignore the check of a word.

👉👉 Plug-in Code Spell Checker in VSCode

Debugger for Chrome

This plug-in was developed specifically for front-end debugging and is very easy to debug. It does exactly the same thing as Google’s Console. Once installed, you can debug breakpoints without having to open the browser’s console. Corresponding to the Debugger for Firefox, Debugger for Microsoft Edge, etc., I have not used the other, you can install on demand, the use of methods should be much the same.

After the installation, a small debugging icon will appear on the left. After opening, click the upper pinion to configure. The.vscode folder and the launch.json file are automatically created in the root directory.

The specific content and use of the configuration file can see this article, very detailed.

👉👉 VSCode Configures the Debugger for Chrome plug-in

Git History

Right-click on the File and select Git: View File History to View all commit records as a list.

GitLens — Git supercharged

This is a git-related plugin that is a little more powerful than the previous one. In the demo of the last plugin, you can see that every line of my code has a previous Git commit, and that’s because of this plugin.

There are many other operations, see the link below for details.

👉👉 good git source control plug-in GitLens in VsCode

LeetCode

You can brush algorithms in vscode. I myself have not used 😣😣

Local History

This is a very strong record of native code changes. Usually, if you write something wrong, you can undo it, but if you change it later, it’s hard to undo it. With this plugin, you can see the code changes directly. You can also compare it to the current version, Artifact.

After the installation, a.history folder is automatically generated in the project root directory. This is where the code changes will be recorded. Be sure to add.gitignore, otherwise you’ll get retracted every time you commit your code.

open in browser

Open the HTML file in your browser.

After installation, right-click on the target HTML file and select Open in Default Browser to open the file using the browser.

Partial Diff

The best comparison file is Beyond Compare, but it costs money! Select Partial Diff, right-click Select Text for Compare, and right-click Compare Text with Previous Selection. Mine is in Chinese, which is even more obvious 🤣🤣

Postcode

If you’ve heard of Postman, this plugin basically means using Postman in vscode.

After the installation, a small box icon will appear in the left menu. Click on it and click Create Request to use it normally.

Project Manager

Project manager, suitable for the big guy who often switch projects, although I usually contact with the project is not much, but my own play of the project is not a lot. With this plugin, you don’t need to open your project in a new window.

After the installation, there will be a small icon of the folder in the left list. After clicking on it, you can manage the project. Usually, you can operate the projects.json file.

Quokka.js

Displays the running result of the code in real time. For details about how to use it, skip to the link

👉👉 VS Code plugin for Quokka.js

Improve coding efficiency

How to achieve the ultimate coding efficiency, of course, is not handwritten. Here are some plugins to help you automate, so you can save a lot of time to fish.

Auto Import

Automatic Typescript imports are built into many plugins these days. They’re not a requirement. Maybe it’s because I have all kinds of weird plugins installed, and now when I want to import something, I have a bunch of hints, and I can just pick one and go to 😂

Auto Rename Tag

Automatically change the tag name. When you rename a start tag, the pair’s end tag is automatically renamed.

All of the corresponding changes suddenly, is not very nice.

change-case

Quickly switching variable formats, big lump, little hump, underline, etc., there are many types in it. Usage Press F1 (Windows) and enter the corresponding command.

CSS Peek

You can quickly navigate to the definition of a style by clicking on the class name. I don’t know whether it is my own reason, sometimes it will fail, you need to click disable, and then click enable to make it work. Refer to the link for specific usage methods

The 👉👉 cssPeek plugin will greatly improve your development efficiency

ECMAScript Quotes Transformer

For the template string and ordinary string concatenation of mutual conversion, but in fact, my daily development is basically the unified use of template string, rarely this mutual conversion needs.

The usage is also very simple, select the line that needs to be transformed, press F1 to input the command, the general input ESQ will appear prompt.

embrace

Quickly add quotes and parentheses around the selected code without having to move the cursor back and forth, but most editors today have this feature built in 🤨🤨

File Utils

Create, copy, move, rename, delete files and directories.

javascript console utils

Console. Log is essential for front end debugging, so this is a quick plugin to generate console. To use it, simply select the variable and press CTRL + Shift + L to generate it. To delete it, press CTRL + Shift + D.

json2ts

Automatically convert json format to TS type, copy json and press CTRL + Alt + V.

koroFileHeader

A plug-in that automatically adds header and function comments. You can customize content in settings.json.

  // Automatically generate comments for the header of the plug-in file
  "fileheader.customMade": {
    "Author": "A Warbler"."Description": ""."Date": "Do not edit"."LastEditTime": "Do not edit"."FilePath": ""
  },
  // Automatically generate annotations for plug-in functions
  "fileheader.cursorMode": {
    "description": ""."param": ""."return": ""
  },
Copy the code

Mithril Emmet

Generate code structures quickly, but it looks like a new version of vscode has been built in.

Path Intellisense

When a file is imported, the path is automatically completed.

Npm Intellisense

Intelligent prompt is displayed when you import the NPM package.

px to rem & rpx (cssrem)

Plug-in for automatic unit conversion.

Very simple, after the prompt can be entered.

Turbo Console Log

Another plugin for generating console.log. The difference is that it can customize the content of console.log, including file name, path, size, etc. You can also add your own favorite emoji, CTRL + Alt + L shortcut keys.

Snippet class plug-ins

There are many plugins in this category, but they all provide snippets of code that can be typed using a few character shorthand.

• JavaScript (ES6) code snippets
• Jest Snippets
• HTML Snippets
• Vue VSCode Snippets
• Vue 3 Snippets
• . .

Code formatting

Beautify

Eslint + prettier esLint + prettier ESLint + prettier ESLint + prettier ESLint + prettier ESLint + prettier ESLint + prettier

ESLint

This needless to say, code check, do not conform to the specification will tell you the error, or warning. The specification needs to be configured in a new.eslintrc.js file in the root directory. You can also use the existing specification of many large companies.

👉👉Eslint super easy to get started

Prettier – Code formatter

Code formatting plug-ins, which are usually used with ESLint or can be used alone.

Create the.prettierrc.json file in the root directory and write the format you want. See the link for more details

👉👉 # vscode Uses Prettier to format and configure the Prettier plug-in

vetur / volar

For those who use Vue for development, it is necessary to deal with them. Volar is more compatible with VuE3 and has more functions. Because these two plug-ins have too large functions, we will not expand them.

Other fun add-ons

In addition to functional plug-ins, there are, of course, a lot of bells and whistles. Here are a few plug-ins that may not have much impact on development, but are very interesting.

Little overlord

Remember those gamepads you used to play as a kid? Big guy has given us a plug-in, but I still want friendship to remind one: the game has a risk, touch fish need caution!

The operation is very simple, after the installation will appear on the left of the gamepad icon, click open can download the game to play.

Emoji

In addition to writing some comments, console.log, there is basically no other function for me to add emojis to the code, but it is very fun. People will think you are a lovely person when they see all kinds of small emojis in your code.

The official example also allows you to set emoji to variable names, which I don’t recommend. It is also very simple to use. Press F1 (Windows) to input emoji, and you can see three options, namely emoji, Emoji under MarkDown and Emoji under Unicode. Select a mode and press Enter to enter the list, then press enter to enter the code.

Settings Sync

Can synchronize vscode configuration plug-in, because I have not changed the computer, so it has not been tested, but the online use is quite a lot of people.

Rainbow fart plugin

reference

If you find it useful, please click 👍. If you have other plug-ins to share, please leave a comment in the comments section. Thanks!

VSCode configures Debugger for Chrome

Vscode plugin – Better Comments – Code comments highlighted

VSCode plug-in recommendation | Code Runner: the Code is a key operation, support more than 40 languages

Add Code Spell Checker in VSCode

The cssPeek plugin will greatly improve your development efficiency

Eslint Super simple introduction tutorial

GitLens is a good git source control plug-in in VsCode

# vscode uses Prettier for formatting and configuration

VS Code plugin for Quokka.js