Convenient JavaScript Coding with VS Code Extensions

Development

Reading Time: 4 minutes

Visual Studio Code provides an amazing environment for development, especially for JavaScript developers. The cross-platform text editor by Microsoft has attracted a large number of developers due to its performance and long list of amazing features.

Having a well-calibrated editor is paramount to a developer’s productivity, and great tooling can help developers write faster, cleaner, and more consistent code. VS Code already does a lot right from install, but with time, you might want to add a few extensions.

Fortunately, VS Code has a vibrant extension community that makes this very easy with well over 700,000 downloads per month. We’ll take a look at must-have plugins, a few that are nice to have, and some honorable mentions.

The Must-Haves

This list was hard to compile — choosing among so many great extensions, I admit I gave some preference according to my own personal needs.

GitLens

The GitLens extension enables you to visualize code authorship within VS Code. You can browse and explore the history of a file, view a git blame annotation for each file line, and even add a changes (diff) hover annotation, all of which are fully customizable.

GitLens is especially useful on larger projects, where you may not be aware who wrote what within a given file. With GitLens, you can easily see with a glance who wrote a specific line right from the status bar at the bottom. When specific questions arise, the proper dev can be contacted.

NPM IntelliSense

NPM IntelliSense is a small utility that enables autocompletion of module names in require statements using the VS Code IntelliSense feature. The extension is dead simple, but provides a nice quality-of-life improvement when you’re developing.

ESLint

ESLint is a very commonly used and highly customizable JavaScript linter that can be configured for most major frameworks and code styles. Instead of having to manually run ESLint to see what errors out, this specific VS Code implementation of ESLint highlights the linting errors within the editor, as well as offers the ability to resolve them with a few mouse clicks.

“Wait,” you might be saying, “VS Code comes with IntelliSense built in, which does a perfectly decent job of code linting.”

That’s true, but what if not everyone on your project is using the same editor? What if you want to have different config settings just for JSX or a specific ECMAScript version for vanilla JS running in the browser or Node.js server code? ESLint has got you covered for all those scenarios.

This extension integrates ESLint into VS Code. It does require you to already have ESLint installed on your computer, either locally or globally. You can do this with NPM, by running NPM’s install -g eslint. There are more detailed configuration and installation settings and instructions on the extension’s marketplace page.

TODO Highlight

How often do you code a function and immediately think that there’s a probably better way to do the same thing? You leave a comment: // TODO: Needs Refactoring or something to that effect. But then you forget about the note and push your code to master/production. With TODO Highlight, that won’t happen. Hopefully.

This simple extension highlights your TODOs/FIXMEs or any other annotation in your code in bright colors so they’re always clearly visible. One nifty feature is the List Highlighted annotation capability. It lists all the TODOs in the output console.

The Nice to Haves

Moving on, let me introduce you to some VS Code extensions that simply make things a bit more comfortable.

Open in Browser

VS Code Great Icons

Trailing Spaces

Code Runner

Material Palenight

The Honorable Mentions

And finally, you might want to browse through some of these extensions that I felt warranted a nod.

Conclusion

Of course, VS Code has a huge library of extensions to choose from, and I’ve barely grazed the surface. If you have an extension you think deserves a mention and I missed it, please feel free to comment on this article so others can benefit.

Subscribe via Email

Over 60,000 people from companies like Netflix, Apple, Spotify and O'Reilly are reading our articles.
Subscribe to receive a weekly newsletter with articles around Continuous Integration, Docker, and software development best practices.



We promise that we won't spam you. You can unsubscribe any time.

Join the Discussion

Leave us some comments on what you think about this topic or if you like to add something.