1. Debugger for chrome

Trust me, debugging JavaScript isn’t just about writing console.log() (although that’s the most used). Chrome has some features built in to make it a better debugging experience. This plugin lets you use all (or almost all) of these debugging features in VS Code.

If you want to learn more, you can read:

Debugging JavaScript in Chrome and Visual Studio Code.

2. Javascript (ES6) Code Snippets

I love the Snippets plugin. I don’t think it’s necessary to type the same code over and over again. This plugin provides you with popular (ES6) JavaScript snippets.

Note… If you don’t use the es6javascript features — do it now!

3. ESLint

Want to write better code? Do you need a consistent format across the team? Install ESLint. This plug-in can be configured to automatically format code and “yell” with errors or warnings. With the appropriate configuration, VS Code can show you these tips.

4. Live server

Make the changes in the code editor, switch to the browser, and then 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 this is also a positive.

5. Bracket Pair Colorizor

Parentheses prevent developers from living the scourge. With a lot of nested code, it’s almost impossible to determine which parentheses match each other. Bracket Pair Colorizor (as you might expect) matches the brackets to make the code more readable. Believe me, you do!

6. Auto Rename Tag

Do you need to rename elements in HTML? Ok, using “Auto Rename Tag”, you only need to Rename the start or end tags, other tags will be automatically renamed. Simple but effective!

7. Quokka

Need a quick place to test some JavaScript? I used to be used to opening the console in Chrome and typing some code into it, but there were many disadvantages. Quokka provides you with a JavaScript (and TypeScript) memory in VS Code. This means you can test a piece of code in your favorite editor!

8. Path Intellisense

In large projects, it can be cumbersome to remember the specific file name and the directory in which the file is located. This plugin will provide you with intelligent tips. When you start typing paths in quotes, you’ll see a smart hint for directories and filenames. This will prevent you from spending a lot of time in file browsing 🙂

9. Project Manager

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

If you’re working on multiple different projects, this is a great way to stay organized and be more productive.

10. Editor Config

Editor Config is a standard for a few encoding styles that are supported in all major text editors/ides. The operation mode is as follows. You save the configuration files in a repository supported by your editor. In this case, you must add extensions to VS Code to make it comply with these profiles. It’s super easy to set up and great for team projects.

11. Sublime Text Keymap

Are you an avid Sublime user and reluctant to switch to VS Code? By changing all the shortcuts to match Sublime’s, this extension lets you switch without any awareness. Now, why wouldn’t you switch?

12. Browser Preview

I like the Live Server Extension extension (mentioned above), but in terms of convenience, this extension goes a step further. It gives you a real-time reload preview inside VS Code. You don’t have to look in your browser to see small changes!

13. Git Lens

There are a bunch of Git plugins, but one of them is the most powerful and powerful. You get information about warnings, row and file history, submit searches, and so on. If you need help with your Git workflow, start with this plugin!

14. Polacode

You know those nice screenshots of code you see on blogs and tweets? Well, probably they’re from Polacode. It’s super easy to use. Copy a piece of code to the clipboard, open the extension, paste the code, and click Save Image!

15. Prettier

Don’t spend time formatting code… It did. Earlier, I mentioned ESLint, which provides formatting and checking. “Prettier” if you don’t need lint check, “Prettier”. It is very easy to set up and can be configured to automatically format the code at save time.

16. Better Comments

The plug-in colors the various types of comments to give them different meanings and to stand out in the rest of the code. I’ve been using this as a reminder. It’s hard to ignore a big orange hint that tells me I have some unfinished business to do.

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

17. Git Link

If you want to see the files you’re working on on Github, this plugin is for you. Once installed, simply right-click on the file and you’ll see the option to open the file on Github. If you don’t use Git Lens, this plugin is great for checking history, branching versions, etc.

18. VS Code Icons

Did you know that you can customize ICONS in VS Code? If you look at the Settings, you will see the option of “File Icon Theme”. From there, you can select from the pre-installed ICONS or install icon packages. This plugin provides you with a very cute package of ICONS, 11 million people already use!

19. Material Icon Theme

Are you a fan of Google Material design? So, check out the “Material Theme” icon pack. There are hundreds of different ICONS and they look great!

20. Settings Sync

Developers (myself included) spend a lot of time customizing the development environment, especially the text editor. Using the “Settings Sync” plugin, you can save your Settings on Github. You can then use a command to load them into any new version of VS Code.

21. Better Align

If you’re the kind of person who likes perfect alignment in your code, you need Better Align. You can align multiple variable declarations, tag comments, code snippets, and so on. There’s no better way to see what this plugin does better than to install it and give it a try!

22. VIM

Are you a deep VIM user? If so, congratulations, you know all about VIM SAO and can use it directly in VS Code. I’m not good at this personally, but I know how crazy productivity can be when you use VIM to its full potential and give you more functionality.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

The best 22 Visual Studio Code plug-ins for Web development

1. Debugger for chrome

2. Javascript (ES6) Code Snippets

3. ESLint

4. Live server

5. Bracket Pair Colorizor

6. Auto Rename Tag

7. Quokka

8. Path Intellisense

9. Project Manager

10. Editor Config

11. Sublime Text Keymap

12. Browser Preview

13. Git Lens

14. Polacode

15. Prettier

16. Better Comments

17. Git Link

18. VS Code Icons

19. Material Icon Theme

20. Settings Sync

21. Better Align

22. VIM

The best 22 Visual Studio Code plug-ins for Web development

1. Debugger for chrome

2. Javascript (ES6) Code Snippets

3. ESLint

4. Live server

5. Bracket Pair Colorizor

6. Auto Rename Tag

7. Quokka

8. Path Intellisense

9. Project Manager

10. Editor Config

11. Sublime Text Keymap

12. Browser Preview

13. Git Lens

14. Polacode

15. Prettier

16. Better Comments

17. Git Link

18. VS Code Icons

19. Material Icon Theme

20. Settings Sync

21. Better Align

22. VIM

Related Posts

Are you still using virtual machines? Play Linux with WSL2 in Windows 10

[Big Data Tribe] Using R language to mine and cluster website comment text

CocoaPods Installation Method -2021.04.15