Table of Contents
Code Spell Checker
javascript console utils
GitHub Copilot
Import Cost
VS Code Counter
Summary
Home Development Tools VSCode Share some front-end Vscode plug-ins that crazy improve development efficiency!

Share some front-end Vscode plug-ins that crazy improve development efficiency!

May 27, 2022 pm 08:49 PM
vscode

VScode It is definitely very familiar to front-end students. Everyone has a few plug-ins that they like very much. Recently, through my own exploration and recommendations from colleagues, combined with actual development, I have selected several VScode plug-ins that are very helpful for actual development efficiency.

Share some front-end Vscode plug-ins that crazy improve development efficiency!

[Recommended learning: "vscode introductory tutorial"]

Code Spell Checker

Share some front-end Vscode plug-ins that crazy improve development efficiency!

Code Spell Checker is a plugin for checking the spelling of words.

"Research shows that the order of Chinese characters does not necessarily affect reading" In the process of our development, there are often misspellings of variable names. If the review partner You can still tell the difference if you look carefully, but sometimes the spelling order of words is wrong and it will not affect reading. We often can't tell it in Chinese, let alone English?

The Code Spell Checker can come in handy at this time. After installing the plug-in, if there is a spelling mistake, there will be a wavy line prompt

Share some front-end Vscode plug-ins that crazy improve development efficiency!

For example, when the Delete word in the picture above is in all capital letters, it is difficult to find that one letter is missing during the development process. If this error is used extensively elsewhere in order to save time or use code prompts, Words, the overall code is relatively unstandardized, and unexpected bugs may occur.

After using the plug-in, not only will you be prompted for misspelled words, but also when you hover the mouse over the wrong word and select Quick Fix, a prompt that may be the correct word will also pop up. This It's very friendly.

Share some front-end Vscode plug-ins that crazy improve development efficiency!

When I installed this plug-in for the first time, I discovered that two words in the current project were misspelled and were quoted in many places, so I revised them in time. A wave. This also shows that this plug-in is very helpful in actual development~

javascript console utils

Share some front-end Vscode plug-ins that crazy improve development efficiency!

It’s hard to believe, A plug-in with 140,000 downloads has no icon. The only use of javascript console utils is that it provides you with two shortcut keys:

  • Cmd Shift L

  • Cmd Shift D

When you select a variable abc, pressing the first set of shortcut keys will insert a line under the current code:

console.log( "abc" , abc )
Copy after login

And the second shortcut The key is used to delete the inserted line of code. The official example picture is as follows:

Share some front-end Vscode plug-ins that crazy improve development efficiency!

Any programmer who has written js knows that two simple sets of shortcut keys are useful for How much is the actual improvement in development efficiency? This simple and straightforward plug-in must not be missed?

GitHub Copilot

Share some front-end Vscode plug-ins that crazy improve development efficiency!

Compared with the previous two plug-ins, GitHub Copilot should be known to more people. Its official description is an AI programmer who develops with you at any time, which is reflected in an AI code prompt during development. The plug-in will provide you with code tips based on the context of your current input combined with AI.

In the recent development, this plug-in has shocked me more than once, even a little scary. Whether it’s methods, variables, or even comments, it can give you hints, and sometimes it’s so accurate that it scares you

Share some front-end Vscode plug-ins that crazy improve development efficiency!

The picture above is when I was designing a button component , I wrote too many attributes unknowingly. When I wanted to deconstruct the object on the label to make the code clearer, I just typed const, and GitHub Copilot did what I wanted to do. Things are prompted, and you can't imagine how it analyzes the subsequent code based on a const.

And this is just child's play. In actual use, whether it is variables, constants, methods, or hooks, it can infer the code you need. At the beginning, I thought that such AI would be devastating to programmers. Will programmers not be needed in the future?

But in actual use, it really understands you. It does not prompt you with a bunch of codes for no reason, but based on the current business logic, it determines what you need now. , it will prompt you thoughtfully.

Share some front-end Vscode plug-ins that crazy improve development efficiency!

For example, in the picture above, I defined a constant before this type. It has already guessed for me what type I need to use here. This It's exactly what I need. When the amount of code is large, maybe 60% of the code in a day will be prompted by GitHub Copilot.

Before I used this plug-in, I needed to apply. I don’t know what the current situation is. I strongly recommend that you download it and give it a try~

Import Cost

Share some front-end Vscode plug-ins that crazy improve development efficiency!

Import Cost The use of this plug-in is very simple. Install it directly. After installation, we will display the size of the dependency after the dependency introduced in js or ts. The official example picture is as follows:

Share some front-end Vscode plug-ins that crazy improve development efficiency!

The actual use effect is as follows. Sometimes it is more convenient to use some alternative third-party dependencies to determine which one is more lightweight.

1Share some front-end Vscode plug-ins that crazy improve development efficiency!

VS Code Counter

1Share some front-end Vscode plug-ins that crazy improve development efficiency!

VS Code Counter can be used to count your code lines Number, sometimes when you take over a large project (shit mountain), you want to complain to your friends that you are maintaining a huge project. How big is it? You can use this plug-in to calculate the code and show it to others. Renkan (comparison)

The method of use is to after installing the plug-in, click the Vscode top menuView-> Command Panel, enter count, select the option in the picture below, and it will be done for you Count all codes in the current workspace directory.

1Share some front-end Vscode plug-ins that crazy improve development efficiency!

The statistical report will show the overall code volume classified by language. The report also includes the specific code volume of each directory.

1Share some front-end Vscode plug-ins that crazy improve development efficiency!

Summary

The plug-ins recommended this time will not be strongly associated with a certain language or framework, and are applicable It has a wide range of features, so friends can install it and give it a try. If you have your own collection of excellent plug-ins, please feel free to share them in the comment area~

For more relevant knowledge about VSCode, please visit:vscode Tutorial!

The above is the detailed content of Share some front-end Vscode plug-ins that crazy improve development efficiency!. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to view word documents in vscode How to view word documents in vscode How to view word documents in vscode How to view word documents in vscode May 09, 2024 am 09:37 AM

How to view word documents in vscode How to view word documents in vscode

How to draw a flow chart with vscode_How to draw a flow chart with visual_studio code How to draw a flow chart with vscode_How to draw a flow chart with visual_studio code Apr 23, 2024 pm 02:13 PM

How to draw a flow chart with vscode_How to draw a flow chart with visual_studio code

How to write Maude in Vscode_How to write Maude in Vscode How to write Maude in Vscode_How to write Maude in Vscode Apr 23, 2024 am 10:25 AM

How to write Maude in Vscode_How to write Maude in Vscode

Caltech Chinese use AI to subvert mathematical proofs! Speed ​​up 5 times shocked Tao Zhexuan, 80% of mathematical steps are fully automated Caltech Chinese use AI to subvert mathematical proofs! Speed ​​up 5 times shocked Tao Zhexuan, 80% of mathematical steps are fully automated Apr 23, 2024 pm 03:01 PM

Caltech Chinese use AI to subvert mathematical proofs! Speed ​​up 5 times shocked Tao Zhexuan, 80% of mathematical steps are fully automated

How to enable background updates in vscode How to enable background updates in vscode How to enable background updates in vscode How to enable background updates in vscode May 09, 2024 am 09:52 AM

How to enable background updates in vscode How to enable background updates in vscode

How to add files to vscode workspace How to add files to vscode workspace How to add files to vscode workspace How to add files to vscode workspace May 09, 2024 am 09:43 AM

How to add files to vscode workspace How to add files to vscode workspace

How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode May 09, 2024 am 10:30 AM

How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode

How to set animation smooth insertion in VScode VScode tutorial to set animation smooth insertion How to set animation smooth insertion in VScode VScode tutorial to set animation smooth insertion May 09, 2024 am 09:49 AM

How to set animation smooth insertion in VScode VScode tutorial to set animation smooth insertion

See all articles