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 as a general purpose editor, in addition to being free and , 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 with single-click installs makes this super easy as well. Visual Studio Code open-source extension community 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 section at the end. Summary of VS Code Extensions The Must-Haves Extensions so good, they should just be built-in. ESLint is a very commonly used and highly customizable JavaScript linter that can be 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. ESLint configured Now you may be saying to yourself, “VS Code already comes with 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 workflow to make sure everyone is committing using team-defined styles. IntelliSense pre-commit 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 allowing it to be as visible or as hidden as you want, as well as its large and active community. granular customizability 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": false TODO 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 or and it’ll automatically be highlighted to ensure it’s always visible. Easy peasy. TODO FIXME 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 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 ), Prettier provides a reprinted version of how the code should be formatted. This is great when used with workflows, as it can automatically reformat the code and save it to match required styles with every . Prettier --fix option pre-commit git commit It should be noted that Prettier is primarily focuses on formatting, so a for code quality. In addition to that, Prettier can be for single command execution. Prettier does come with its own strong opinions by default, but it can be should your own opinions differ. linter is still useful integrated into ESLint easily configured 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 ( with React). That said, if you’re among those using styled-components, then this extension is almost definitely a must-have. styled-components 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 to VS Code. What else needs to be said? (100+) 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. Summary of VS Code Extensions Questions/Comments/Other? Find me on GitHub , LinkedIn or my website