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

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.

Auto Save Tab in VSCode

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).

VSCode Marketplace Icon

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

VSCode 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.

Auto Rename Tag Usage

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.

Bracket Pair Colorizer 2 Usage

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.

Code Spell Checker Usage

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.

CSS Peek Usage

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
Debugger for Chrome Usage

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.

ESLink in VSCode Marketplace

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.

GitLens Usage

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 Booster Usage

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
javascript console usage

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.

Prettier in VSCode Marketplace

Simple React Snippets

This extensions has some of the essential collection of React Snippets and commands. It might reduce few key presses for you 😁

Simple React Snippets Usage

Version Lens

This extension shows package version information for npm, jspm, dub and dotnet core in the Visual Studio Code editor.

Version Lens Usage

Auto Indent the code as per Airbnb ESLint rules list

How pleasing it would be if the code editor you are using fixes Linting issues instead of showing those errors. Yes we can configure it in VSCode.

Configuration :

Mac : Code > Preferences > Settings > Click on Open Settings (JSON) at the top right corner

Settiings (JSON) in VSCode

Add the following line:

“prettier.eslintIntegration”: true,

Make sure you final Settings JSON looks like:

Configuration of VSCode (JSON)

Thanks for reading. Happy coding 😉