The Ultimate VSCode Setup for Front End/JS/React

Elad Ossadon
Nov 10, 2018 · 7 min read

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

Bracket Pair Colorizer

Bracket Pair Colorizer

change-case

change-case

Code Spell Checker

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

Code Spell Checker

DuplicateSelection

EditorConfig for VS Code

File Utils

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

file-icons

Find Related Files

FiraCode

GitLens — Git supercharged

indent-rainbow

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.

Markdown All in One

Material Icon Theme

Multi Line tricks

Nest Comments

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.

open-in-finder

open-in-github

Path Intellisense

Project Manager

saveBackup

Sensitive Replace (VSCode now supports this feature!)

Settings Sync

Toggle Quotes

transpose

Unique Lines

Visual Studio IntelliCode

HTML/CSS/JS/React Specific Extensions

Auto Rename Tag

Auto Rename Tag

ES7 React/Redux/GraphQL/React-Native snippets

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.

ESLint

eslint-disable-snippets

glean

htmltagwrap

javascript console utils

Jest Snippets

npm Intellisense

Prettier — Code formatter

React Refactor

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

Version Lens

My Theme

Dracula Official

Got more? Let me know in the comments!

Like this?

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

Productivity Freak

Awesome tools and productivity hacks

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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