The Ultimate VSCode Setup for Front End/JS/React

Elad Ossadon
Nov 10, 2018 · 7 min read
Image for post
Image for post

Updated Feb 2020

My The Ultimate Atom Editor Setup (+for JS/React) post is pretty popular, but not long ago I migrated to VSCode.

Why? Speed, stability and TypeScript.

Overall, I’m very happy with the switch. As with Atom, for me, out-of-the-box the editor has a lot of missing functionality. However, it is covered by extensions.

I divided this list into Utilities and HTML/CSS/JS/React specific extensions, sorted alphabetically.

Utilities

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

Image for post
Image for post
Bracket Pair Colorizer

A wrapper around node-change-case for Visual Studio Code. Quickly change the case of the current selection or current word.

Image for post
Image for post
change-case

A basic spell checker that works well with camelCase code.

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

Image for post
Image for post
Code Spell Checker

This extension brings Sublime-like duplication of selected text — it duplicates it inline, and not in a new line, like the default behavior of VSCode.

Brings EditorConfig and .editorconfig support to VSCode.

A convenient way of creating, duplicating, moving, renaming and deleting files and directories.

I configured keyboard shortcuts in the File Explorer, like r to rename and d to duplicate.

Image for post
Image for post

File-specific icons in VSCode for improved visual grepping.

Image for post
Image for post

Finds files related to the current file based on user-defined configuration rules. I use it to find spec/test files based on source files.

Image for post
Image for post

Monospaced font with programming ligatures.
tl;dr — converts !==, => etc into beautiful symbols.
VSCode instructions.

Image for post
Image for post

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

Image for post
Image for post

This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may find it helpful in writing code for Nim or Python.

Image for post
Image for post

automate repetitive actions with custom macros.

VSCode doesn’t have a built in way to open file explorer and focus on the current file, these are two different commands. This extension allows combining a set of commands, so I hooked cmd+shift+r to do that. See instructions here.

All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more).

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Material-UI inspired file icons, alternative to File Icons.

Image for post
Image for post

Enable Alt+L (line select) and Alt+Shift+L (selection to multi-cursor) behavior on VSCode. Another feature I really missed from Sublime.

Image for post
Image for post

If your code contains a comment, and you want to add a new comment to temporarily disable a block or portion of code, the first instance of a --> or */ closing comment tag will end the entire comment.

This extension will convert pre-existing comments to safe characters, allowing a new block comment that includes the original comment. It also reverses the effect to uncomment the same block of code.

Image for post
Image for post
Image for post
Image for post

Adds a few commands for opening the current file or project in Finder.

Open the current project or file in github.com.

Image for post
Image for post

Visual Studio Code plugin that autocompletes filenames.

Image for post
Image for post

Easily switch between projects

Image for post
Image for post

Backup file when you save. Life saver.

Replace selections while preserving cases.

Image for post
Image for post

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

Toggle cycle " -> ' -> `

Transpose is an extension for VSCode for transposing/swapping selections or characters.

Image for post
Image for post

Keep unique lines of text and remove duplicates from current selection. Also includes a command to shuffle currently selected lines.

The Visual Studio IntelliCode extension provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning.

Image for post
Image for post

HTML/CSS/JS/React Specific Extensions

Automatically rename paired HTML/XML tag.

Image for post
Image for post
Auto Rename Tag

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

Plenty of useful snippets! Highlights:

import {} from '' where the cursor starts at the path.
const [foo, setFoo] = useState(null)with proper uppercasing of what’s after set.

Integrates ESLint into VS Code.

Includes snippets for ignoring; a block, the current line, or the next line.

Image for post
Image for post

Allows extracting typescript and javascript code into separate module, as well as extracting JSX into new components

Image for post
Image for post
Image for post
Image for post

Wraps selected code with HTML tags. A feature I really missed from TextMate.

Image for post
Image for post

Help insert and remove console.(*) statements.

Image for post
Image for post

Code snippets for testing framework Jest.

Visual Studio Code plugin that autocompletes npm modules in import statements.

Image for post
Image for post

VS Code package to format your JavaScript / TypeScript / CSS using Prettier.

This simple extension provides refactor code actions for React developers.

Recompose your overgrown JSX without worrying about the given data. This extension will do the dirty work for you without breaking your code.

Image for post
Image for post
Image for post
Image for post

My Theme

My all-time favorite theme.

Image for post
Image for post

Like this?

Hit the clap button 👏👏🏻👏🏼👏🏽👏🏾👏🏿 (as many times as you want!).

Follow me on Twitter — @elado, and check out my other productivity tools posts:

Productivity Freak

Awesome tools and productivity hacks

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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