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:

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:

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 :

Auto Rename Tag Usage

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 Usage

Code Spell Checker

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

Code Spell Checker Usage

CSS Peek

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

CSS Peek Usage

Debugger for Chrome

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

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 Usage

JavaScript Booster

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

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 in VSCode Marketplace

Simple React Snippets

Simple React Snippets Usage

Version Lens

Version Lens Usage

Auto Indent the code as per Airbnb ESLint rules list

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 😉

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store