• Coding Beauty
  • Posts
  • 10 must-have VS Code extensions for web development

10 must-have VS Code extensions for web development

⏲️Time translation, essential VS Code extensions, and more

Recommended

  • Techpresso: a daily rundown of what’s happening in tech and what you shouldn’t miss. Read by professionals at Google, Apple, and OpenAI. Check it out

  • GPTE AI: Discover over 5,000 new AI tools for productivity, design, content creation, and more. Check it out

Visual Studio Code has thousands of extensions you can install to ramp up your developer productivity and save you from mundane tasks.

They are all available in the Visual Studio marketplace and the vast majority of them are completely free.

Let’s have a detailed look at 10 powerful extensions that significantly improve the web development experience.

Powerful extension for creating location-specific reminders of JavaScript code tasks you'll need to get back to later:

Just use // TODO: 

Prettier is a pretty😏 useful tool that automatically formats your code using opinionated and customizable rules.

It ensures that all your code has a consistent format and can help enforce a specific styling convention in a collaborative project involving multiple developers.

The Prettier extension for Visual Studio Code brings about a seamless integration between the code editor and Prettier, allowing you to easily format code using a keyboard shortcut, or immediately after saving the file.

Watch Prettier in action:

ESLint is a tool that finds and fixes problems in your JavaScript code.

It deals with both code quality and coding style issues, helping to identify programming patterns that are likely to produce tricky bugs.

The ESLint extension for Visual Studio Code enables integration between ESLint and the code editor. This integration allows ESLint to notify you of problems right in the editor.

For instance, it can use a red wavy line to notify of errors:

We can view details on the error by hovering over the red line:

We can also use the Problems tab to view all errors in every file in the current VS Code workspace.

This is a big mistake many developers make that makes code cryptic and unreadable.

Don’t do this:

Double negatives like this makes it much harder to think about the logic and conditionals in your code.

It’s much better to name them positively:

There is no indirection and your brain takes zero time to parse this.

Just imagine the pain of trying to understand this:

I didn’t not forget about not being unable to use the account.

Lol I couldn’t even understand it myself even though I made it up.

Compare to the far more natural way you’d expect from a sensible human:

Coding Beauty University: Learn, grow, and earn with coding and community

Claim your free coaching call and learn more about how it works.

  • ✅Start on a personalized learning path to everything you need to earn a comfortable living with regular, high-paying freelance developer jobs.

  • ✅Learn coding from scratch if you have no experience.

  • ✅Learn essential concepts to become industry-ready & practice real-world projects

  • ✅Never run out of work again: Gain access to exclusive freelance networks and access $160,000 jobs with no resume.

  • ✅Delegate jobs to the network and make money passively with unlimited potential

Thanks for taking the time to read today’s issue.

Don’t let the bugs byte,
Tari Ibaba