Juicy list of VSCode Extensions for React Native, JavaScript and general use

I use VSCode full-time since 2016. Before that, I was using its "bigger brother" — Visual Studio IDE and I was looking for a lighter editor.

I would like to share with you the extensions that I have currently installed. I’m working as a React Native developer so JavaScript centric section will be the biggest one but not the only one!

There is a bunch of general-use extensions that will increase the happiness of your coding time. Doesn't matter what technology you are using!

Must have — My top 3 VSCode extensions

Settings Sync

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

First and the only extension I install after changing workspace (new computer, fresh account, editor reinstall or disk formatting). I have all my extensions and settings stored safely on Github Gist. It is also useful to share with teammates to compare and customise their editors.

ESLint

Integrates ESLint JavaScript into VS Code. Dirk Baeumer

Linter is the most important tool while writing JavaScript code.

I started my career with C# and other strongly typed languages with rich-featured IDEs. It is natural to me that when something is underscored red it will not work.

Without configured linter, you can make syntax error and you don't know it. You will be notified in the browser's console — it's too late. _In React you might be informed a bit earlier — still too late _

This extension gives you nice feedback in the exact moment of writing. In my team, we've configured git hooks that won't allow anyone to push project with linter errors. It makes project more stable. This also eliminates wasting time on pull requests. No more searching for typos or mistakes that are easily eliminated with a linter rule.

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 Eric Amodio

I work in projects that have a long lifecycle. So I ofter work in files that were written by me or my teammates a long time ago. Then edited many times to satisfy business requirements.

Here is where git shows it's power with the whole history of the file. This extension gives me tools to navigate through the history of the file commit by commit. Like in a book - page by page. Using arrow buttons.

It also shows the last commit for each line with the date, message and author's name. I use it a lot to get the context of the code I'm looking at. Setting up mindset is much faster when you understand why somebody has written that line in this particular way.

VSCode extensions for React Native, React and JavaScript

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text Jun Han

When I open some new tag it will automatically create closing tag for it. For example I type <Component> and this extension adds </Component> immediately. It works for JSX/TSX.

Auto Rename Tag

Auto rename paired HTML/XML tag Jun Han

It is similar to the previous extension. When I edit one tag paired one will be edited as well so I don't need to revisit it. It works for JSX/TSX.

Auto Import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX steoates

Color Highlight

Highlight web colors in your editor Sergii Naumov

Whenever I have a hex colour in my opened files the colour will be set as background of the string. For example {myColour: '#AA0000',} will highlight #AA0000 with red background.

ES7 React/Redux/GraphQL/React-Native snippets

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax dsznajder

Basic snippets set. For example I write rafcp and it autocompletes my file with a React Arrow Function Component with ES7 module system. Basically this where $1 is name of the file.

import React from 'react'
import PropTypes from 'prop-types'

const $1 = (props) => {
  return <div>$0</div>
}

$1.propTypes = {}

export default $1

It's very big set and constantly improved.

Highlight Matching Tag

Highlights matching closing and opening tags vincaslt

Very useful extension to highlight paired tag with underscore. It helps to navigate through JSX tree.

Name That Color

Get a friendly name from a Hex color representation. Guillaume Doutriaux

I don't like to lose time to think: "should I name this colour just secondaryColor or make some sensible name for it like blueSky?". This extension names every hex colour. For example it can tell you that: #B10000 is Bright Red or even #bright-red.

Prettier - Code formatter

Code formatter using prettier Esben Petersen

Format your React Native code automatically to avoid time-consuming unneeded discussions among your team. We do formatting on every commit. I also have tendency to press "Format Document" shortcut very often...

Remember to setup .prettierrc config file with Prettier docs to customise your formatting.

React PropTypes Intellisense

PropTypes intellisense for React components Of Human Bondage

The extension finds React PropTypes and adds them to the suggestion list.

sort-imports

Sort ES6 imports automatically. VSC Sort Import

I like to have my libraries imported at the top of the file and local files lower separated with newline. This extension makes it semi-automated.

exports autocomplete

autocompletes javascript module exports from your project capaj

React Native Tools

Debugging and integrated commands for React Native Microsoft

Debugger and multiple helper functions of React Native. If you like to do everything from editor instead keeping several terminals open — it will be good for you.

vscode-styled-components

Syntax highlighting for styled-components Julien Poissonnier

Styled Components has multiple fans in React (and React Native) world. But using Tagged Template Literal as a string without colours is... ugly? Doesn't nice? Colouring is increasing your productivity and makes code more readable and I'm all into readability.

Other extensions

Working with a team

Jira and Bitbucket (Official)

Bringing the power of Jira and Bitbucket to VS Code - With Atlassian for VS Code you can create and view issues, start work on issues, create pull requests, do code reviews, start builds, get build statuses and more! Atlassian

It gives me great pull-request experience without leaving the code editor. Much better than doing reviews inside the browser.

I make new branches out of Jira tickets without leaving the editor. I really like this extension and I recommend it to all Bitbucket users.

It is mostly useful if you are working with the team though.

GitLab Workflow

GitLab VSCode integration Fatih Acet It gives preview of issues and merge requests created or assigned to you. It also extends VSCode command palette and status bar to provide more information about your project.

Marp for VS Code

Create slide deck written in Marp Markdown on VS Code.

Marp, Markdown Presentation Ecosystem, provides the great experience to create beautiful slide deck. You only have to focus writing your story in Markdown document. Marp team

I'm a huge fan of Markdown. I also need to make a presentation from time to time so I decided to make my decks in markdown.

Extra profit — slides are easily convertible into the documentation. So I make two things with one effort.

This extensions brings Marp ecosystem inside VSCode. For example deck preview. If you are making presentations I encourage you to read more on their website.

Live Share

Real-time collaborative development from the comfort of your favorite tools. Microsoft

This is great for pair programming. Especially useful with remote working and brainstorming with your team from home.

Improve coding experience

All Autocomplete

Create autocomplete items from open files in VSCode. Atishay Jain

Not everything is included in built-in autocompleter. Sometimes it is not possible for editor to understand context in the time of writing. When this happen it is useful to have just a list of used words — variable names, function names etc.

IntelliJ IDEA Keybindings

Port of IntelliJ IDEA Keybindings, including for WebStorm, PyCharm, PHP Storm, etc. Keisuke Kato

For some time I was working with PyCharm then IntelliJ and it was easier at first to have the same shortcuts. Unfortunately It is not fully mapped so there is bunch of keybindings from IntelliJ and some from Visual Studio.

Usually when I need to do something in JetBrains tools it is easier for me to do it as I know many shortcuts. I don't know if I would recommend it if someone isn't migrating from those tools. I think it is better to use tools with basic settings unless you are fluent with some other tool and transition would cost too much effort.

Lorem ipsum

Generates and inserts lorem ipsum text Daniel Imms

Helpful tool for prototyping. Instead of copy-pasting some dummy text from the web I just type a command lorem: Insert a paragraph or lorem: Instert a line.

Themes worth checking

Brackets Light Pro

A theme basic Brackets Light and more beautiful. EryouHao

One Monokai Theme

A cross between Monokai and One Dark theme Joshua Azemoh

My favourite dark colour theme. It is the one :)

Other languages support

Excel Viewer

View Excel spreadsheets and CSV files within Visual Studio Code workspaces. GrapeCity

I use it to have nicer CSV preview as I work a bit with those files.

shell-format

shellscript、Dockerfile、properties、gitignore、dotenv、hosts、jvmoptions... DocumentFormat foxundermoon

It's like Prettier but for bash.

shellcheck

An extension to use shellcheck in vscode Timon Wong

ShellCheck is an open source static analysis tool that automatically finds bugs in your shell scripts.

I write scripts in bash that make some project files transformations. CI scripts are also written in bash. It is useful to have modern editing experience in such a language — I'm not writing scripts often and its syntax is different than anything known to me. It doesn't forgive mistakes.

YAML

YAML Language Support by Red Hat, with built-in Kubernetes and Kedge syntax support Red Hat

If you do anything with CI then your config files are usually in YAML. This extension gives you powerful support of the language.

XML Tools

XML Formatting, XQuery, and XPath Tools for Visual Studio Code Josh Johnson

I installed it to have nice XML formatting features. I like auto formatting :)