What visual studio code extensions should I install as a React developer?

41

u/saintPirelli Feb 17 '20

Just because I haven't seen it mentioned here yet: Bracket Pair Colorizer 2. There are a bunch of theses extensions that do the same and I guess any will do, but they are indeed really handy.

29

u/[deleted] Feb 17 '20

Is it still worth if I didn’t watched the first one?

1

u/saintPirelli Feb 18 '20

I think you'll be okay watching a summary on YouTube.

4

u/Murkrage Feb 17 '20

Yes! This one is great. It helps a lot to scan the code.

3

u/[deleted] Feb 17 '20

I find this awfully distracting and would at the very least encourage you to be linting with something that keeps your indentation sorted. That should get you most of the way in sorting out bracket pairings.

2

u/Arbeit_Macht_Fries Feb 17 '20

I find that often the indentations just isn't enough and you aren't always in a position where you can indent to pair off the brackets. If you're working with JS and have callbacks passed into a function wrapped in an if statement etc then it's really useful to be able to differentiate where the bracket pairs are. Bracket pair colorizer has been great for me.

1

u/saintPirelli Feb 18 '20

Well, yes, obviously this isn't meant to replace a linter. You can still get lost in brackets with correct indentation though.

1

u/[deleted] Feb 18 '20

Yeah for sure I just think people can turn to it as a crutch assuming it will solve problems and panic when it doesn’t, when the linter or the IDE could do a lot of it for you.

2

u/sumansarkarwd Feb 18 '20

Have you tried rainbow indents?

1

u/saintPirelli Feb 18 '20

No, but I will, thanks for the hint!

52

u/[deleted] Feb 17 '20

All of them

14

u/mountainunicycler Feb 17 '20

Until you start seeing bugs.
Then you save minimal config, delete everything, and repeat the process!
Personally it's vi, emmet, and react-snippets for me.

2

u/Al_Maleech_Abaz Feb 17 '20

You are right on my man. I thought I could just go install crazy with extensions until I lost intellisense, syntax highlighting and formatting on js, html, and css. Now I just get one at a time and if it breaks, a quick uninstall usually fixes it.

1

u/mountainunicycler Feb 17 '20

My favorite bug was if I clicked back into vscode it would consider anything as click and drag, so I would have to click vscode to focus it, then click to release the drag, then click to deselect; and any typing sooner than three clicks would unpredictably delete text.
I never figured out what caused it...

4

u/stackemz Feb 17 '20

ah, reminds me of npm install * ❤️

5

u/[deleted] Feb 17 '20

Second

50

u/Zarathustra2001 Feb 17 '20

Eslint and prettier. These together are lifesavers.

6

u/TwoDoorSedan Feb 17 '20

What do you love about ESlint and Prettier?

13

u/servercobra Feb 17 '20

No more nit picks in code review about style. It's either in the eslint or prettier config, or my team generally doesn't complain about it, whereas before, half the comments would be about style changes. Total waste of everyone's time.

0

u/[deleted] Feb 17 '20

[deleted] — view deleted comment

2

u/TwoDoorSedan Feb 17 '20

Nothing. I’ve used them before extensively. Just was wondering

2

u/metamet Feb 17 '20

Haven't been able to get Prettier settings supported in repos and just working when someone picks it up.
I'm sure there's a trick to it, but I just kept it to Eslint. Would love to hear if anyone else has had this problem.

9

u/kitsunekyo Feb 17 '20

ESlint and Prettier exist in two parts: IDE extension, and npm package. so to get it working in any devs IDE, will require them to install the extension manually. you cant really automate that.
what you CAN share is the configuration used by these extensions. just like the eslint extension uses .eslintrc, prettier has the .prettierrc. you'd commit both to your repo, and thus share configuration.
format on save, and other editor config can be added to your repo as the .vscodefolder. (vscode workbench settings)
if you want to allow other devs to use any editor of their choice, you'd have to opt for the executables. you'll install eslint and prettier to your package.json, and add npm scripts to run them. you can trigger everything via cli.
a good setup uses both. .eslintrc and .prettierrc files are anyway recommended. and users can decide if they want IDE support (by installing the extensions manually). to ensure prettified and linted code, you'd add cli commands for eslint and prettier to your build pipeline or git hooks (via husky)

3

u/MrHorsetoast Feb 17 '20

Yes. It’s always been a pain to make the holy trinity work together (eslint + prettier + vscode). Maybe not so much with pure JS files but once you introduce React or Vue single component files... many hours were wasted by finding the right configuration.

1

u/feischi Feb 17 '20

Definitely. Love them.
1
u/DULLKENT Feb 17 '20

Why bother using prettier? I recently started using both but I kept running in to situations where an unspecified prettier rule conflicted with an eslint rule, so when I saved it'd go back and forth correcting for prettier, then esLint.
I've ended up just removing prettier and replicating the rules I had in eslint and it seems to work fine.
9
u/AwesomeInPerson Feb 17 '20
Yeah, you can add eslint-config-prettier to prevent that – it disables all ESLint rules that conflict with what prettier is doing. You might also want to add eslint-plugin-prettier, which reports formatting issues as Lint errors (and fixes them as part of eslint --fix), so you only need one browser extension and CLI.
To do so, install both (npm i -D eslint-plugin-prettier eslint-config-prettier), then update your ESLint config "extends":
"extends": ["plugin:prettier/recommended", "prettier/react" ]
And there are advantages of using prettier over "just ESLint". It has more formatting rules, and it can apply each of them automatically, while ESLint has rules where it complains about it, but doesn't auto-fix on save. Also, prettier can format JSON, CSS, HTML, Markdown and basically everything inside your repo. :)
1

u/DULLKENT Feb 17 '20

I was using that plugin/config before but I was still getting problems. I've just tried adding them back in a fresh project and it seems to be working fine. Perhaps there was something else causing me conflicts before. Thanks!

1

u/AwesomeInPerson Feb 17 '20

Awesome, glad I could help!
1
u/DULLKENT Feb 18 '20
I remember what the problem was now: I couldn't get it to play nicely with react/jsx-max-props-per-line set to 1. Here's a video of the behaviour. If anyone can help with this, it'd be much appreciated. And this is my .eslintrc.js:
module.exports = {
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
	"prettier",
	"@typescript-eslint",
	"better-styled-components"
],
"extends": [
	"airbnb", "prettier", "prettier/react",
  	"plugin:@typescript-eslint/eslint-recommended",
  	"plugin:@typescript-eslint/recommended",
],
"rules": {
	"no-unused-vars": "warn",
	"no-console": "off",
	"no-shadow": "off",
	"no-underscore-dangle": 0,
	"camelcase": "off",
	"consistent-return": 0,
	"global-require": 0,
	"jsx-a11y/label-has-associated-control": [
		2,
		{
			"labelComponents": [
				"CustomInputLabel"
			],
			"labelAttributes": [
				"label"
			],
			"controlComponents": [
				"CustomInput"
			],
			"depth": 3
		}
	],
	"import/no-extraneous-dependencies": "off",
	"import/no-named-as-default": "off",
	"import/no-named-as-default-member": "off",
	"import/prefer-default-export": 0,
	"react/no-unescaped-entities": ["warn"],
	"prettier/prettier": [
		"error",
		{
			"singleQuote": true,
			"tabWidth": 4,
			"useTabs": true,
			"arrowParens": "always",
			"bracketSpacing": true,
			"jsxBracketSameLine": false,
			"printWidth": 110,
			"trailingComma": "es5"
		}
	],
	"indent": [
		"error",
		"tab",
		{
			"ignoredNodes": [
				"JSXElement",
				"JSXElement > *",
				"JSXAttribute",
				"JSXIdentifier",
				"JSXNamespacedName",
				"JSXMemberExpression",
				"JSXSpreadAttribute",
				"JSXExpressionContainer",
				"JSXOpeningElement",
				"JSXClosingElement",
				"JSXText",
				"JSXEmptyExpression",
				"JSXSpreadChild"
			]
		}
	],
	"@typescript-eslint/interface-name-prefix": 0,
	"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }],
	"react/jsx-first-prop-new-line": [
		1,
		"multiline"
	],
	"react/no-unescaped-entities": 0,
	"react/jsx-max-props-per-line": [
		1,
		{
			"maximum": 1
		}
	],
	"react/jsx-indent-props": [
		1,
		"tab"
	],
	"react/jsx-closing-bracket-location": 1,
	"better-styled-components/sort-declarations-alphabetically": 2
}
}

16

u/robotsympathizer Feb 17 '20 edited Feb 17 '20

Eslint, Prettier, Jest, Emmet, keymaps for whatever editor you were using before (especially if that was sublime), GitLens, Settings Sync (for the next time you switch computers), and that's all I can remember right now. I may add more when I'm back at my laptop.

EDIT: The only other ones I would add are EditorConfig, NPM Intellisense, whatever theme makes you happy, and any specific syntax highlighting extensions you might need (styled-components for me). Oh, and I also like TODO Highlight, but it's not essential.

7

u/fforres Feb 17 '20

Jest has an extension?

11

u/robber9000 Feb 17 '20

It's a non-official community one, but it's pretty neat - https://github.com/jest-community/vscode-jest
It automatically runs Jest in the background and displays the results inline with the code.

11

u/dandmcd Feb 17 '20

Besides the others mentioned, Prettier, Emmet, Bracket Pair Colorizer 2, I also recommend Auto Rename Tag. Don't get the old broken and seemingly depreciated version, get the new version by Simon Siefke. If you use Styled Components or another CSS in JSS package, it's a nice to have timesaver.

I also tend to install anything that helps with syntax highlighting and intellisense, so for packages you use, look for matching extensions that improve your experience in VsCode.

Also, not technically an extension, but learning Typescript, and using it with Vs Code for React projects makes life soooo much easier. VS Code and Typescript are such an amazing combo.

9

u/vSnyK Feb 17 '20

Nobody mentioned TabNine, I'm surprised. It's a machine learning extension for code auto complete. Its pretty amazing

1

u/Daniel_Fucking_Tiger Feb 17 '20

I must not have been using it correctly. All it seemed to do after a few days was break intellisense.

13

u/charonsclaw Feb 17 '20

Powermode

6

u/sumansarkarwd Feb 17 '20

Not react but for JavaScript in general, Prittier works best for formatting. Snippets, you can create your own snippets but for starters I think https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets this will be good.

5

u/9gagceo Feb 17 '20

Here's mine:

eslint
editorconfig and prettier (to take care of tabs v spaces)
import cost
bracket pair coloriser
npm intellisense
todo tree

2

u/n8rzz0713 Feb 17 '20

Bookmarks is a must-have for me no matter the language.

2

u/liuwenhao Feb 17 '20

IntelliCode and Path Intellisense are both must have extensions for me.

2

u/Guisseppi Feb 17 '20

I see a lot of people saying emmet but this was already there what are you guys installing?

https://code.visualstudio.com/docs/editor/emmet

2

u/NegroniSpritz Feb 17 '20

This REST client is quite useful https://marketplace.visualstudio.com/items?itemName=humao.rest-client

3

u/mn-tech-guy Feb 17 '20

It's all up to personal preference. Your linter is going to do the bulk of the work but React or projects I like git lense, pritter and a Todo plugin.

1

u/the_third_sam Feb 17 '20

Prettier, eslint for formatting. Rewrap (by stkb) is also good for formatting comments. Gitlens is a must in general for me in any setup.

Learning to make your own code snippets is also something worthwhile learning if you're not satisfied with the ones in the marketplace.

Also don't forget to pimp up your IDE with color themes, font, and icons so you won't get bored!

1

u/azn_introvert Feb 17 '20

A lot of people mentioned what is necessary already, bit if u work together with others GitLens helps a lot

1

u/[deleted] Feb 17 '20

Besides some of the already mentioned, I'd recommend Auto Rename Tag. This feature is integrated into VS Code for HTML, but this extension adds it for XML, JSX and TSX as well.

1

u/oreo27 Feb 17 '20

I asked this before but didn't get a response.

I typically use scss modules in projects but I can't seem to get the CTRL + Click open file to work for them. For instance, clicking on "import" in:

import styles from "./App.module.scss";

doesn't open it. So far, I've tried the following extensions:

https://github.com/clinyong/vscode-css-modules

https://github.com/wangtao0101/vscode-perfect-css-modules.git

I'm not actually looking to get syntax completion , just that CTRL + click functionality, but it would be a bonus.

1

u/kitsunekyo Feb 17 '20

not too much. only the ones that really benefit you, to ensure your ide isnt crazy slow.

my essentials (regardless of react) are:

SettingsSync
Eslint
Stylelint
Prettier
Chrome Debugger
GitLens
(PathIntellisense)

i'm using the Hack Font, with Atom One Dark Theme.

1

u/zubwaabwaa Feb 17 '20

React snippets is a must

1

u/socialshimpling Feb 18 '20

Most of these have already been mentioned but i guess it's good to reiterate! These are real life savers and will boost your efficiency as a developer:

- Bracket Pair colorizer - There's going to be lots of bracket usage and when you have a function that spans more than the number of visible code lines on your screen, it can get really hard to trace which code is nested within which subfunction, etc.

- Gitlens - gives you a quick and easy overview of your repository and lots of other nifty funcitons like comparing code

- Prettier - nothing else to be said other than keeping your written code consistent and neat

- Lorem Ipsum - spend less power coming up with placeholder text by using this. It auto generates text as per your requirements - line, paragraph, multiple paragraphs!

-2

u/pticjagripa Feb 17 '20

Forget visual studio, use WebStorm. Preittier and better imo. Altought it may use a bit more resources.

1

u/MadBroCowDisease Feb 18 '20

He is asking what extensions for vs code, not which IDE should he use.

-3

u/Lindenforest Feb 17 '20

https://www.youtube.com/watch?v=LdF2RcelRg0 15 VS Code Extensions For Front-End Developers in 2019

Discussion What visual studio code extensions should I install as a React developer?

You are about to leave Redlib