The Eventual Visual Studio Code Setup for React / JavaScript / AngularJS

6 min readNov 2, 2019

It’s very important to pick the best IDE/Code Editor and Configure it for your programming language. If you get to know the features and capabilities very well, you can greatly improve your productivity.

I have used multiple IDE/Code Editors like RubyMine, Sublime Text ,Atom and Visual Studio Code (VSCode). Visual Studio Code is the best out there with its vast customizability.

Visual Studio Code Logo (Third party image reference)

With lots of Trail and Errors I have the Eventual Visual Studio Code Setup. I have customized VSCode with few Extensions and tweaked some default behaviors to achieve it. I recommend this Setup with an assured increase in productivity.

So, here is the Eventual Visual Studio Code Setup:

Note: Make sure you are on the latest version of Visual Studio Code to enjoy the new features.

Auto Save:

How relaxed you would be if the code you type is Auto Saved. How many Control+S (or Command+S on a Mac) presses would you save per day? 100s or 1000s or even more :D

Configure Auto Save to happen when the focus changes from the current file. This means as soon as you switch your current tab to the Browser your code changes are Auto Saved and the new code is ready to be shown in the browser.

Configuration :

Mac : Code > Preferences > Settings > Text Editor > Files > Auto Save

Change it to onFocusChange.

Installing Extensions in VSCode:

Now let’s install some Extensions to the VSCode which will serve multiple useful purpose.

To install any extension you can You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (⇧⌘X).

This will show you a list of the most popular VS Code extensions on the VS Code Marketplace.

Auto Rename Tag :

This Extension Automatically renames paired HTML/XML tag, same as Visual Studio IDE does. It will come handy most of the time.

Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

Code Spell Checker

The goal of this spell checker extension is to help catch common spelling errors while keeping the number of false positives low.

Its a basic spell checker that works well with camelCase code.

CSS Peek

This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

This was heavily inspired by a similar feature in Brackets called CSS Inline Editors.

Debugger for Chrome

This extension helps you to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.

Supported features

Setting breakpoints, including in source files when source maps are enabled
Stepping, including with the buttons on the Chrome page
The Locals pane
Debugging eval scripts, script tags, and scripts that are added dynamically
Watches
Console

ESLint

This extension integrates ESLint into VSCode. this increases the readability of our code towards the effort of having our codebase look like it was written by “one person”.

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version.

GitLens — Git supercharged

GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

JavaScript Booster

Boost your productivity with advanced JavaScript refactoring and commands.

This VS Code extension provides various code actions (quick fixes) when editing code in JavaScript (or TypeScript/Flow). Just note the light bulb at the left and press it to learn how you can transform the code under the cursor.

javascript console utils

This extension helps you to add or remove consoles with ease.

With selection:

Highlight a variable (or really any text)
Press Cmd+Shift+L
The output (on a new line) will be: console.log(‘variable: ‘, variable);

Without selection:

Press Cmd+Shift+L
The output (on the same line) will be: console.log();

To remove console.logs:

Press Cmd+Shift+D
This will delete all console.log statements in the current document

Prettier — Code formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.