Reel by reel of those visual studio Code plugins that improve/create

In front end development, vscode is the most commonly used editor, and vscode has a variety of utility plug-ins, some of which can help us make our work more efficient, some of which can make our work process more enjoyable.

Today we will introduce some useful plugins

Efficiency plug-ins

Code artifact – Power Mode

First up is Power Mode, which will make your programming experience a lot happier (see below).

In addition to the above effect, the plugin has several other effects, all of which are good. Let’s learn how to use it.

First let’s search for Power Mode in the vscode plugin bar (as shown below).

Then we click install. After the installation, we press Ctrl + Shift + P and enter Setting to open the JSON configuration file (as shown below).

Add the following three lines of configuration at the end:

"powermode.enabled": true, // Enable Power Mode

"powermode.shakeIntensity": 0, // turn off jitter (you can choose not to)

"powermode.presets": "particles", // Effects presets, and"fireworks"."flames"."magic"."clippy"."simple-rift"."exploding-rift"

Copy the code

It’s time to start your “special effects programming journey”!

Highlight – Todo Tree

In our usual business development, code files are written more and more, single files are longer and longer. When you modify your code, you often have to find what you want in the file, or scroll up and down the file to find the object code and then make changes.

A recommended plugin to help with this is Todo Tree. After we install it in the app Store search, we simply add the comment code like // Todo: and we can quickly locate the comment line in the Todo Tree (pictured below).

We can also customize the color and highlight code with the following Settings (setting.json), and then we can quickly define the location of the key methods (as shown below).

"todo-tree.highlights.customHighlight": {

  "API": {// keywords

    "background": "green", // Background color

    "icon": "issue-closed", // icon

    "rulerColour": "green", // Text color

    "iconColour": "green"/ / icon color

  },

  "METHOD": {

    "foreground": "black".

    "background": "yellow".

    "icon": "issue-closed".

    "rulerColour": "yellow".

    "iconColour": "yellow"

  },

},

Copy the code

Quickly locate Bracket – Bracket Pair Colorizer

There are many types of parentheses that can’t be written without, and they often get in the way when the nesting gets too deep and you need to change the structure.

The Bracket Pair Colorizer helps you quickly identify Bracket positions and types so you can quickly locate them. (Figure below)

Code Spell Checker

In our usual development process, sometimes because of variable name definition and use when inconsistent, debug half a day and finally found that the spelling problem.

We can use the Code Spell Checker plugin for Spell checking. After we install the plugin, we can specify the file to check in setting.json.

Git management

Vscode has a number of gi1T-managed plug-ins to help you manage your Git repository.

Git History

Git History allows you to quickly view your Git History in a graphical page (see below).

We can also view the specified version of the specified file (as shown below)

We can also hover the cursor over a line of code to view the submission information of the line (submission person, submission time, submission information) (as shown in the figure below).

Git Graph

Git Graph can help you better analyze the relationships between branches (see below)

Git Emoji

Git Emoji can better help the team to form the submission specification. Use an Emoji to summarize the submission, plus some text description information, and the submission record will become pleasing to the eye (as shown below).

GitLens

GitLens can help you quickly compare the differences between different branches of code (see below)

One day

Draw a flow chart in vscode – draw.io

After installing draw. IO, create a new helloworld.drawio, and you can draw a flow chart in vscode.

Good for drawing some simple flow charts, vscode full stack engineer.

Rainbow Fart

Rainbow Fart is a motivational plugin that encourages you as you type code. The voice pack has a choice of sweet-sounding little sisters.

When the installation is complete, press the keyboard combination Ctrl + Shift + P, type Enable Rainbow Fart and press Enter to open a new page for the voice (as shown below).

At this point, create a new file and start typing code, such as write a for loop, or write a function, and you will be pleasantly surprised

conclusion

Well, that’s all for vsCode plug-in analysis! Do you have any good plug-in can also be shared in the message area comments yo ~

Next announcement:

Make a list of those productivity/creative sites

One last thing

If you have already seen this, I hope you still click “like” before you go ~

Your “like” is the greatest encouragement to the author, and can also let more people see this article!

If you found this article helpful, please help to light up the Star on Github to encourage!