10 Best Visual Studio Code Extensions for Web Development

10 Best Visual Studio Code Extensions for Web Development

September 26, 2020 | 2 min read

As a Software Engineer, I like to focus on the creative task (e.g., coding) and want to leverage the tedious, repetitive tasks with the help of IDE. Another critical and often neglected feature of modern IDEs is that they reduce the Context Switching of the developer by providing the tools for day-to-day Job.

Context Switching in programming is expensive. But Context switching of the human brain is significantly more costly than CPU’s context switching.

In my programming career, I have used many free (KDevelop, Eclipse, NetBeans, Atom, Sublime Text, and VS Code) and many commercial IDE. Among them, I found Visual Studio Code is the best IDE, especially for Web Development. Developed by Microsoft in 2015, it quickly rose to prominence and loved by the developers. The Stack Overflow Developer Survey 2019 has ranked VS Code as the most popular IDE for Web development:

Installing an Extension

If you know how to install a VSCode extension, you may skip this section.

First of all, you need to have VSCode installed on your system. I assume you already have but if you haven’t then you can download it by following the link here. Next, launch VSCode and open the Extensions tab from the left sidebar or hit command-shift-x on macOS or ctrl-shift-x on Windows and Linux. There, you will see the list of installed extensions. You can search for other extensions. Once you find an extension, simply click the Install button. You may need to reload VSCode in some cases. If not, you’re good to go!

Here’s a list of the top VSCode extensions that every web developer must have:

  1. Material Icon Theme
  2. Atom Keymap
  3. Prettier - Code formatter
  4. Bracket Pair Colorizer 2
  5. Auto Rename Tag
  6. HTML CSS Support
  7. Emmet
  8. PHP IntelliSense
  9. Email [to make .eml files colorful]
  10. Auto Close Tag