Apr 25, 2018
VS Code Extensions for Happier JavaScript Coding
As a web developer, having a well calibrated editor is paramount to productivity. One of the best parts of Visual Studio Code as a general purpose editor, in addition to being free and open-source, is how much it can already do straight out of the box with minimal fiddling around. That said, as use-cases become more niche, it’s nice to be able to reach out and pull in a few extensions to help boost that quality of life even further. Luckily, VS Code vibrant extension community with single-click installs makes this super easy as well.
There is an element of personal taste that comes into play here. As such, it should not be implied that everything on this list needs installing as your mileage may vary depending on your own use-case and code style.
If you feel like skipping all the verbiage, just scroll directly to the Summary of VS Code Extensions section at the end.
The Must-Haves
Extensions so good, they should just be built-in.
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 to automatically resolve them with a few mouse clicks.
Now you may be saying to yourself, “VS Code already comes with IntelliSense built in which does a perfectly descent job of code hinting.” 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 specific ECMAScript version for vanilla JS running in the browser, or Node.js server code? Well, ESLint has got you covered for all those scenarios. Likewise, ESLint can also be incorporated into your pre-commit workflow to make sure everyone is committing using team-defined styles.
GitLens
VS Code comes with Git functionality out of the box, so this is another extension that’s more about enriching an existing capability as opposed to adding a new one. There are numerous Git add-ons floating around, but what makes GitLens stand out from the pack is its high level of granular customizability allowing it to be as visible or as hidden as you want, as well as its large and active community.
GitLens is especially useful on larger projects where you may not be aware who wrote what within a given file. Using GitLens you can quickly see with a glance who wrote a specific line right from the bottom status bar. Thus, when specific ad-hoc questions about why or how something was done arises, you can direct them to the original developer for quick low-friction communication.
One personal recommendation is to add the below snippet to the VS Code settings. This will remove the per-line annotations, which can be distracting.
"gitlens.currentLine.enabled": falseTODO Highlight
Comments have a way of fading away into the background, which most of the time is good, as you don’t want to be overly distracted. Other times however you may want to make certain comments stand out to guarantee they’re read. This can be for reasons such as to add a reminder marker of where you left off, or as a note to someone else.
With this extension, simply type a comment containing TODO or FIXME and it’ll automatically be highlighted to ensure it’s always visible. Easy peasy.
Import Cost
This is a great plugin if you are looking to embrace your inner masochist. Every time you import yet another module into your project, Import Cost will give you an instant and continuous reminder of its size. As a consequence you’ll have to continuously ask yourself if the benefit is worth the cost. That’s a good thing.
The Nice-to-Haves
Improves quality of life, but can still begrudgingly live without them.
Prettier - Code formatter
Prettier is in a similar vein to ESLint described above, in that its purpose is to try to enforce and standardize coding style, with this specific plugin allowing it to be used directly within the editor. The thing that separates Prettier from ESLint is instead of listing the error (although ESLint does have a --fix option), Prettier provides a reprinted version of how the code should be formatted. This is great when used with pre-commit workflows, as it can automatically reformat the code and save it to match required styles with every git commit.
It should be noted that Prettier is primarily focuses on formatting, so a linter is still useful for code quality. In addition to that, Prettier can be integrated into ESLint for single command execution. Prettier does come with its own strong opinions by default, but it can be easily configured should your own opinions differ.
open in browser
On occasion, you may find yourself working on something that doesn’t involve a whole build process food chain, and opening an HTML file is all thats needed to see what you’re working on, just like in the good old days.
For such increasingly-rare occasions, you can use this extension to right-click within VS Code and have it open with either the default browser or an alternative browser you have installed. No more changing directories in your shell just to open up a single file.
vscode-styled-components
Alright, I’ll admit this is among of the more niche ones on the list seeing as it’s an extension for a specific library designed for use with another specific library (styled-components with React). That said, if you’re among those using styled-components, then this extension is almost definitely a must-have.
Since styled-components are written within a template literal, many syntax highlighters will highlight the whole section as a quotation. With this extension, you can still retain full CSS-like code highlighting within the template. Life is good.
VSCode Great Icons
Adds a bunch of great file icons (100+) to VS Code. What else needs to be said?
Bookmarks
Ideally your code is always modular, readable and terse enough that you never struggle to see the entirety of a given file. If an imperfect moment were to arise where this was not the case, for reasons not your own, it’s nice to be able to put in a few quick bookmarks to quickly jump back-and-forth between.
One Monokai Theme
I have a working theory that ugly things increase eyestrain. Still finalizing the dissertation on this one.
The default VS Code theme is actually not that bad. However, if the app you are going to be living in all day can easily be made a little better and be given a bit more personality, why not. Needless to say custom themes are a dime-a-dozen, but something about this one just clicks for me, for completely subjective and indefensible reasons of course.
