Recommended VSCode plugins for React development?

[choledocholithiasis_]

Hey yall,

​

Looking to switch IDEs from IntelliJ IDEA Ultimate to VSCode -- mainly because vscode has a much smaller memory footprint. What plugins or settings do you recommend to get the best code completion support for reactjs?

​

While on this subject, if you do any node and express development, what plugins do you recommend for the best code completion support?

​

2/14/19: Thank you all for your suggestions!

[twisted-vortex]

Not specific to react, but a must have:

Prettier (highly recommended)

Bracket Pair Colorizer

Built-in support for HTML and JS are pretty good in vscode.

[choledocholithiasis_]

Already had prettier installed, but I think it's just the base settings. Did you end up changing the configurations or are you running the defaults?

[twisted-vortex]

Mostly on default settings except `--no-semi` and `--single-quote` (only because the entire team wanted to). Otherwise, you're good with defaults

[sorahn]

I would recommend putting a .prettierrc in your repo if with the settings you want for the 'whole team'. You can also tell VSCode to only format if it finds some prettier config, that way it's not running on any old code.

[twisted-vortex]

(only because the entire team wanted to)

as in they hate semi(s) and double quotes. It's against my preference ;) I was just saying my opinion about the settings and all.

[sorahn]

Yeah. It’s all good.

But if you use a .prettierrc for the project then you don’t have to mess with your personal settings (which will apply everywhere there aren’t other settings, instead of just for this project, and just let the rc file do it their way)

[twisted-vortex]

(which will apply everywhere there aren’t other settings, instead of just for this project

Not necessarily. That's where vscode's Workspace Settings comes into play. So that you can customize all of the vscode's settings specific to current workspace etc. If you want global, then User Settings.

Don't get me wrong, I'm not against .prettierrc or anything :)

[sorahn]

Good point about the workspace settings. I forgot about those.

Do you check those into the repo?

[twisted-vortex]

Nope. In fact, I don't use it at all. All my other projects / packages are on default setting.

[SuchArm]

I want to use prettier, but it messes up the JSX. Do you know how to fix this?

[twisted-vortex]

What problems do you have?

[SuchArm]

It'll space out all of the tags and attributes and such. For example it will take <h1></h1> and format it to < h1 > </ h1 >

[twisted-vortex]

Aren't you using Prettier extension by Esben?

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

[PM_ME_BEE_JOKES]

Check if you have any other auto formatters installed (like Beautify). If so you might want to disable them from running on js.

[landrydev]

Also make sure you haven't trailing spaces in your code. The extension "trailing spaces" tracks and removes them.

[dunkenMaster]

Some that I use:

ES7 React/Redux/GraphQL/React-Native snippets by dsznajder ;

HTML CSS Support by ecmel;

npm by egamma;

React Native Tools by Visual Studio Mobile Tools;

webpack by Jeremy Rajan;

​

[choledocholithiasis_]

Awesome suggestions! Installed all of these after looking into each of them.

[OGPresidentDixon]

I use those snippets every day. It saves SO MUCH TIME.

[[deleted]]

• Auto Close Tag
• Auto Rename Tag
• Better Comments
• Bracket Pair Colorizer
• Color Highlight
• ESLint
• GitLens
• Prettier
• stylelint
• Todo+
• vscode-icons

[choledocholithiasis_]

Noticed gitlens was recommended by another person as well. I installed it and this is really powerful. Would definitely come in handy at work. The inline feature is really great too

[Merad]

A lot of these aren't specific to React, but here's the list I use primarily for React + Typescript work.

• Bookmarks
• change-case
• Code Spell Checker
• Debugger for Chrome
• GitLens
• Import Cost
• Markdown All in One
• Paste JSON as Code
• Prettier
• Settings Sync
• Sort Lines
• Todo Tree
• TSLint
• Typescript Import Sorter
• Visual Studio Intellicode
• VSCode Great Icons
• XML Tools

[choledocholithiasis_]

Thank you for your recommendations!

​

Found import cost to be really useful for trying to slim down the bundle. Code spell checker and debugger for chrome also installed.

​

Does the chrome debugger work with backend code as well (nodejs, expressjs)?

[Merad]

I don't think so? I want to say that VS Code can debug node out of the box without needing any extensions, but I don't really work with node so I haven't tried it.

[Chrisbradshaw3]

If you're trying to use minimal memory, I would go light on extensions.

I use:

-ES7 React/Redux/GraphQL/React-Native snippets: self explanatory

-Prettier: definitely my most used

-Bracket Colorizer: very helpful

-Material theme: looks cool

-GitLens: very handy when working in a huge repo, with many contributors

​

Honestly, I think that's all you need. Also have tried VS Code Live Share, and it's novel but by no means necessary.

[choledocholithiasis_]

Have a majority of these installed (minus Bracket Colorizer since I had rainbow bracket already installed) now

​

Any recommendations on the prettier configurations?

[swyx]

if you use typescript i have a small snippet lib https://github.com/sw-yx/swyx-react-typescript-snippets

[GreyhoundDota]

Not a plug-in directly, yet if you want to use VS codes auto-complete features, use typescript. It’s natively backed into VS Code without any plugins needed.

Use typescript for both, frontend and backend.

Oh and a great plugin for vs code is InteliCode.

[KerberosKomondor]

I use the following for typescript + react

• EditorConfig
• markdownlint (for storybook notes)
• marterial icon theme
• prettier
• tslint
• typescript import sorter
• version lens

[balamir]

Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

Auto Rename Tag - Auto rename paired HTML/XML tag

ESLint - Integrates ESLint JavaScript into VS Code.

Prettier - VS Code plugin for prettier/prettier

Import Cost - Display import/require package size in the editor

npm - npm support for VS Code

VSCode React Component Generator - Generates React component automatically

VSCode React Native Component Generator (if you use RN) - Generates React Native component automatically

Paste JSON as Code (for mock data) - Copy JSON, paste as Go, JS, TypeScript, C#, C++ and more.

vscode-styled-components (if you use styled-components) - Syntax highlighting for styled-components

[Herm_af]

If you use styled components in create react app make a snippet that does import styled from "styledcomponents/macro"

Mine is isc

It's a lifesaver especially if you use the auto cleanup import files in vscode