22 VSCode plug-ins that improve web development speed (worth collecting)

This article shares 22 of the best VSCode plug-ins for web development. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

22 Visual Studio Code plug-ins shared

1. Debugger for chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Trust me, debugging JavaScript is more than writing console.log() (although this method is most commonly used). Chrome has some built-in features for a better debugging experience. This plugin allows you to use all (or almost all) of these debugging features in VS Code.

If you want to know more, you can read:

Debugging JavaScript in Chrome and Visual Studio Code.

Address: https://scotch.io /tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code

2. Javascript (ES6) Code Snippets

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

##I love the Snippets plugin. I don't feel the need to type the same piece of code over and over again. This plugin provides you with popular (ES6) JavaScript code snippets.

Note... If you are not using the es6javascript features - use them quickly!

3. ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Want to write better code? Does the entire team need to use a consistent format? Install ESLint. This plugin can be configured to automatically format code and "yell" with errors or warnings. VS Code, with the appropriate configuration, can show you these tips.

Recommended study: "

vscode tutorial"

4. Live server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

## Make changes in the code editor, switch to the browser, and refresh to see the changes. That’s an endless loop for developers, but what if the browser automatically refreshes when you make changes? This is where Live Server comes in!

It also runs your application on the local server. Some things can only be tested when the application is running on the server, so that's a plus.

5. Bracket Pair Colorizor

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket- pair-colorizer

##Brackets are the scourge that prevents developers from staying alive. With lots of nested code, it's almost impossible to determine which brackets match each other. Bracket Pair Colorizor (as you might expect) matches bracket colors to make code more readable. Trust me, you want it!

6. Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto- rename-tag

Do you need to rename elements in HTML? Well, with "Auto Rename Tag", you only need to rename the starting or ending tag, and the other tags will be renamed automatically. Simple but effective!

7. Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Need a quick place to test some JavaScript? I used to open the console in Chrome and type some code in it, but the drawbacks are many. Quokka provides you with a JavaScript (and TypeScript) scratchpad in VS Code. This means you can test a piece of code in your favorite editor!

8. Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path -intellisense

## Remember specific filenames and files in large projects The directory in which it is located can be troublesome. This plugin will provide you with smart tips. When you start typing a path in quotes, you'll see smart prompts for directory and file names. This will save you from spending a lot of time browsing files :)

9. Project Manager

https://marketplace. visualstudio.com/items?itemName=alefragnani.project-manager

##me One thing I hate is switching between projects in VS Code. Every time I have to open file explorer and find the item on my computer. But this changes with the application of Project Manager. Using this plugin you can open an additional menu in the side menu of your project. You can quickly switch between projects, save favorites or automatically detect Git projects from the file system.

If you develop multiple different projects, this is a great way to stay organized and increase efficiency.

10. Editor Config

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Editor Config is a standard for a handful of coding styles used in major text editors / are supported in the IDE. How it works is as follows. You save the configuration file in a repository supported by your editor. In this case, you have to add an extension to VS Code so that it respects these profiles. It’s super easy to set up and perfect for team projects.

11. Sublime Text Keymap

https://marketplace.visualstudio.com/items?itemName=ms-vscode. sublime-keybindings

##You are an avid Sublime user and are unwilling to switch to VS Code? This extension will make your switch seamless by changing all shortcuts to match Sublime's shortcuts. Now, what reasons would you have for not making the switch?

12. Browser Preview

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser -preview

##I like the Live Server extension extension (mentioned above ), but this extension goes a step further in terms of convenience. It gives you a live reload preview inside VS Code. No need to look at your browser anymore to see small changes!

13. Git Lens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

##There are a lot of git plug-ins, but one of them is the most powerful and has the most functions. You get information about warnings, line and file history, commit searches, and more. If you need help with your Git workflow, start with this plugin!

14. Polacode

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

You know those pretty code screenshots you see on blogs and on Twitter ? Well, most likely they come from Polacode. It's super easy to use. Copy a piece of code to your clipboard, open the extension, paste the code, and click Save Image!

15. Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Don't spend time formatting the code...it's done. Earlier, I mentioned ESLint, which provides formatting and inspection. If you don't need lint checking, then go for Prettier. It's very easy to set up and can be configured to automatically format code on save.

16. Better Comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better -comments

##This plugin marks various types of comments with different colors , to give them a different meaning and stand out from the rest of the code. I've been using this for tips. It's hard to ignore a big orange prompt telling me I have some unfinished work to do.

There are also color codes for questions, alerts and highlights. You can also add your own custom ones!

17. Git Link

https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

If you want to see the files you are working on in Github, this plugin is suitable you. Once installed, just right-click on the file and you will see the option to open the file in Github. If you don't use the Git Lens plugin, this plugin is great for checking history, branch versions, etc.

18. VS Code Icons

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode- icons

Did you know that you can customize the icons in VS Code? If you look at the settings, you'll see an option for "File Icon Theme." From there, you can choose from pre-installed icons or install an icon pack. This plugin gives you a really cute icon pack and is used by 11 million people!

19. Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material- icon-theme

# Are you a fan of Google Material design? Well, check out this “Material Theme” icon pack. There are hundreds of different icons and they look great!

20. Settings Sync

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings -sync

Developers (myself included) spend a lot of time customizing development environments, esp. text editor. Using the "Settings Sync" plugin you can save settings in Github. They can then be loaded into any new version of VS Code using a single command.

21. Better Align

https://marketplace.visualstudio.com/items?itemName=wwm.better-align

If you are the kind of person who likes perfect alignment in your code, then You need Better Align. You can align multiple variable declarations, trailing comments, code snippets, etc. There’s no better way to see how great this plugin is than to install it and give it a try!

22. VIM

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

Are you an in-depth user of VIM? If so, congratulations, you can use all VIM tricks directly in VS Code. I'm not personally great at this, but I know how insanely productive it can be to use VIM to its potential, giving you so much more functionality.

Original author: James Quick 

Original address: https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web -development

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of 22 VSCode plug-ins that improve web development speed (worth collecting). For more information, please follow other related articles on the PHP Chinese website!