The Ultimate VSCode Setup for Front End/JS/React
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
This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.
change-case
A wrapper around node-change-case for Visual Studio Code. Quickly change the case of the current selection or current word.
Code Spell Checker
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.
DuplicateSelection
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.
EditorConfig for VS Code
Brings EditorConfig and .editorconfig support to VSCode.
expand-region
Expand selection to word/quotes/braces/expression/function body etc.
File Utils
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.
file-icons
File-specific icons in VSCode for improved visual grepping.
Find Related Files
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.
FiraCode
Monospaced font with programming ligatures.
tl;dr — converts !==, => etc into beautiful symbols.
VSCode instructions.
GitLens — Git supercharged
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
JoinLines
Adds join lines command (ctrl+j / cmd+j) known from Sublime Text to VS Code.
macros
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.
Markdown All in One
All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more).
Multi Line tricks
Enable Alt+L (line select) and Alt+Shift+L (selection to multi-cursor) behavior on VSCode. Another feature I really missed from Sublime.
Nest Comments
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.
Path Intellisense
Visual Studio Code plugin that autocompletes filenames.
Project Manager
Easily switch between projects
saveBackup
Backup file when you save. Life saver.
Sensitive Replace
Replace selections while preserving cases.
Settings Sync
Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
Toggle Quotes
Toggle cycle " -> ' -> ```
transpose
Transpose is an extension for VSCode for transposing/swapping selections or characters.
Unique Lines
Keep unique lines of text and remove duplicates from current selection. Also includes a command to shuffle currently selected lines.
HTML/CSS/JS/React Specific Extensions
Auto Rename Tag
Automatically rename paired HTML/XML tag.
ESLint
Integrates ESLint into VS Code.
glean
Allows extracting typescript and javascript code into separate module, as well as extracting JSX into new components
htmltagwrap
Wraps selected code with HTML tags. A feature I really missed from TextMate.
javascript console utils
Help insert and remove console.(*) statements.
Jest Snippets
Code snippets for testing framework Jest.
npm Intellisense
Visual Studio Code plugin that autocompletes npm modules in import statements.
Prettier — Code formatter
VS Code package to format your JavaScript / TypeScript / CSS using Prettier.
TSLint
TSLint for Visual Studio Code
Version Lens
My Theme
Dracula Official
My all-time favorite theme.
Got more? Let me know in the comments!
Like this?
☞ Learning ReactJs User Interfaces
☞ React: Learn ReactJS Fundamentals for Front-End Developers
☞ React: Web Apps with ReactJS and Redux - The Complete Course
☞ [2018] Modern Frontend Web Development Course with ReactJS
Suggest:
☞ JavaScript for React Developers | Mosh
☞ Getting Closure on React Hooks
☞ Web Development Tutorial - JavaScript, HTML, CSS
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch