VSCode Extensions for JavaScript developers

March 25, 2018 0 Comments

VSCode Extensions for JavaScript developers

 

 

I’ve fallen in love with a couple of VSCode Extensions for JavaScript development and I thought I’d share them with you in this post. Since I started using VSCode I have barley opened my atom.io editor (and I know that for a fact since I’m using an extension that I will discuss later in this post).

I’m going to show you the VSCode extensions I use and a summary of the most important settings per extension.

Coding Efficiency VSCode Extensions

Here is the complete list of VSCode extensions that I think increases my efficiency when developing JavasScript applications.

ESlint

Eslint, my guess is that most of you already heard about this VSCode Extension. I could not live without it! All the small typos I make all the time is so easily found with this extension. You’ll need to install eslint and then run eslint --init and tell eslint what kind of code style you want to use. It’s easy though.

// Run these commands to get eslint setup in your project.
npm install --save-dev eslint
./node_modules/.bin/eslint --init

I like to keep eslint installed as a devDependency for all my projects, and also include the .eslintrc file so that if someone else want to mess around with my code they’ll follow my code conventions.

// Will try to 'fix' your errors on save.
"eslint.autoFixOnSave": true,

// If you use something else than npm (yarn?)


"eslint.packageManager": "npm"

// If you'd like to run it on save or when you are typing. If it's running while you are typing


// you might get annoyed by all the red lines appearing. I still keep that setting though.
"eslint.run": "onType"

JS Refactor

JS Refactor helps you streamline your refactoring. Has a huge list of actions that can be performed to refactor your code efficiently. The ones I use the most are listed below

  • Extract Method
  • Rename Variable
  • Convert to Arrow Function
  • Convert to Template Literal
  • Shift Parameters

Sass & SCSS IntelliSense

Sass and SCSS intelliSense are two seperate VSCode Extensions. Sass gives VSCode support of indented Sass style (instead of using brackets) and SCSS intelliSense keeps track of your $variables so that you can find them easily.

VSCode Extension Sass
VSCode Extension Sass supports using indented Sass style instead of brackets.

Auto Rename Tag

Auto Rename Tag is a great VSCode Extension If you’re like me and keep changing your mind about what kind of tag (span/div/i) that you want to use this is a perfect plugin. It automatically changes the closing tag when you are editing the opening one.

VS Extensions Auto Rename Tag
Automatically rename the closing tag when editing it.

Auto Close Tag

Auto Close Tag automatically closes HTML/JSX/XML tags for you. Even if I usually use the built-in support for emmet in VSCode I still love this one for the times I just write a tag without emmet.

VSCode Extensions Auto Close Tag
VSCode Extension to automatically close your tags
//Auto Close Tag

// Set a list of tags that shouldn't get closed automatically.


// If there's a JSX tag that I keep using that shouldn't have
// and children information I usually add it to this list
// for the project I'm working in.
"auto-close-tag.excludeTags": []

npm Intellisense

npm Intellisense supports in autocompletion for your NPM modules. I’ve never had to play around with any of the settings since I’m happy with the standard ones, but if you want to change something here’se a list of the current settings that I think might be interesting to change for some.

// Switch to false if you want to use require instead of import.
"npm-intellisense.importES6": true,

// The type of quotes used (I use ' so I'm happy with the standard


"npm-intellisense.importQuotes": "'",

// For ES5 imports, I'm happy with const so I leave it though.


"npm-intellisense.importDeclarationType": "const",

VSCode Extensions to support Testing

VSCode Extensions that support in getting your coded tested and working as intended.

Wallaby.js

Wallaby.js, I can’t even begin to tell you how much this plugin have helped me in getting those tests written. It runs your tests as you are typing and blurts out the issues you are having in the editor. It also has a built-in web-service where you can see your current code coverage. When you install the extension you start with a trial period and later you can buy it, the time you save using it will be well worth the license key though.

VSCode Extension WallabyJS
VSCode Extension WallabyJS supports your testing with live updates as you type.

Quokka.js

Quokka.js is from the developers of Wallaby.js. It’s a schratchpad for JavaScript, think somethink like jsfiddle but with live updates. When I want to try something out (typically when I’m writing my blog posts) I always create a Quokka.js file and starting hammering at the keyboard to see what comes out. This is one of those must-haves. It comes with a free “community edition” and there’s also a “professional extension”.

VSCode Extension Quokka
VSCode Extension Quokka is a scratchpad for JavaScript!

Debugger for Chrome

Debugger for Chrome is an extension that connects to any browser that supports the Chrome DevTools Protocol. Put your breakpoints; in VSCode and just see the magic happen. There are some things you need to setup to get started but when you are done you’ll save hours on debugging your apps.

VSCode Extensions - Chrome DevTools
VSCode Extensions – Chrome Devtools makes it so much easier to debug your code.
// Allows showing the values in-line in your code instead
// of having to look at the debug window for your variables.
"debug.inlineValues": true

Utility VSCode Extensions

Here are the VSCode Extensions that doesn’t really fit into any of the other categories but still make your developer experience so much better.

Settings Sync

Settings sync does just what it says in the title. It keeps track of your settings and synchronizes it between machines (or works like a backup if you wish). I’m working on two machines one from home and one at work and having the same settings on both just makes me that much more effective.

Settings sync gives you a good introduction on their VSCode Extension page, and typically you dont’ have to change any settings, but if you do these are probably the ones that are the most interesting to keep track of

// If you want to change your gist this is where you do it.
"sync.gist" : "87918538ff10e2d772e1286e0c3f8398"

// If you set this to false you'll just add the extensions


// that's in the gist you are downloading from without removing
// the ones you currently have.
"sync.removeExtensions": true

Polacode

Polacode is a utility to take pictures of your code for sharing. It’s simple to use and makes great pictures. I haven’t used it in any of my blog posts yet since I want you guys to be able to copy-paste the snippets but I might start using images in some spots instead.

Prettier-Code formatter

Prettier-Code Formatter VSCode Extension is amazing. It does just like the title says. It keeps your code pretty. Just install it and let it do it’s magic. There’s some settngs that I like to play around with to make it look just the way I want and those are:

123456789101112131415161718192021
// If you want to have (res) => {} instead of res => {}
// changes this to "always". I keep it at "avoid" though.
"prettier.arrowParens": "avoid"

// Will use your .eslintrc to style your code, I always


// turn this setting on to match my current project
// eslint settings.
"prettier.eslintIntegration": false

// Use single quotes


"prettier.singleQuote": true,

// A 'tab' is represented by 4 spaces.


"prettier.tabWidth": 4,

// I don't want the wrapping of lines to happen too early so


// I extend it by 20 characters to 100 instead of 80 (default).
"prettier.printWidth": 100,

// Changes where the '>' will be put in your JSX


"prettier.jsxBracketSameLine": false,

Guides

Guides, oh my god, I love this VSCode extension, I didn’t know what I was missing out on before I started using it. Colors the guide-lines of your indents when you select the different groups. Just start using it! Makes it easier to find when you’ve missed some })] characters.

// Make the guides a bit more visible
// I keep min at 3 to really notice them.
"guides.normal.width": 3,

// Shows two arrows (<>) in the gutter to help find those missing brackets.


"guides.active.gutter": true

Rainbow Brackets

Rainbow Brackets helps you keep track of opening/closing brackets by color coding them. Helps me to find those pesky missing ‘end’-brackets. Not much else to say about this plugin just download it!

VSCode Extentions Rainbow Brackets
VSCode Extensions Rainbow Brackets helps you keep track of close closing )}]

vscode-icons

vscode-icons helps finding things in your ‘Project Explorer’. The biggest issue I had when moving from atom.io to VSCode was the Explorer Tree view, too small text and the folder you were working in was difficult to keep track on. Just install vscode-icons and your workflow with the explorer will be so much smoother.

VSCode Extension vscode-icons
VSCode Extension vscode-icons makes the explorer view so much smoother to work with.
// Makes the folders a bit more "boring" but to me make it easier
// to find what I'm looking for.
"vsicons.presets.foldersAllDefaultIcon": true,

WakaTime

WakaTime helps you keep track of you coding time. Per project, per coding language, per editor. I love being able to look at my statistics and it’s a great support for those freelance programmers to keep track on how much time they spent on a project. You’ll need an API key from WakaTime but it’s easy to register and it’s free!

VSCode Extension WakaTime
VSCode Extension WakaTime helps you keep track on the time you program

That’s it!

These are the extensions that I use right now when coding. What are your favorite extensions? Give me a comment below in the comment section or feel free to e-mail me with your input if you think I missed some extension that I should add to my list! (tommy@snappyjs.com)

If you liked this post I’m sure you’ll like some of my other posts too:
NodeJS: HTTP Requests queued for web scraping
Generators and iterators in JavaScript for Promise Flow Control
Guide: React Redux Project Structure

Please follow and like SnappyJS:

Tag cloud