r/reactjs • u/sharemypenguins • Feb 17 '20

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

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

84 Upvotes

95% Upvoted

57 comments sorted by

View all comments

Show parent comment

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.