22 practical VSCode plug-ins for web development

Related recommendations: "vscode Basic Tutorial"

1. Debugger for chrome

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

Trust me, debugging JavaScript is more than just 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 vscode.

If you want to know more, you can read:

"Debugging JavaScript in Chrome and Visual Studio Code":

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.

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

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

In large projects, it can be troublesome to remember specific file names and the directories in which the files are located. 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

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 supported in major text editors/IDEs. 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

Are you an avid Sublime user and 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 (mentioned above), but this one 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 beautiful 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 your 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 colors various types of comments to give them different meanings 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 for 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, especially text editors. 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 address: https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development

Original author: James Quick

Translation address: https://segmentfault.com/a/1190000038478784

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

The above is the detailed content of 22 practical VSCode plug-ins for web development. For more information, please follow other related articles on the PHP Chinese website!