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.