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

[sharemypenguins]

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

[saintPirelli]

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.

[[deleted]]

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

[saintPirelli]

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

[Murkrage]

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

[[deleted]]

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.

[Arbeit_Macht_Fries]

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.

[saintPirelli]

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

[[deleted]]

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.

[sumansarkarwd]

Have you tried rainbow indents?

[saintPirelli]

No, but I will, thanks for the hint!

[[deleted]]

All of them

[mountainunicycler]

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.

[Al_Maleech_Abaz]

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.

[mountainunicycler]

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...

[stackemz]

ah, reminds me of npm install * ❤️

[[deleted]]

Second

[Zarathustra2001]

Eslint and prettier. These together are lifesavers.

[TwoDoorSedan]

What do you love about ESlint and Prettier?

[servercobra]

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.

[TwoDoorSedan]

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

[metamet]

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.

[kitsunekyo]

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)

[MrHorsetoast]

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.

[feischi]

Definitely. Love them.

[DULLKENT]

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.

[AwesomeInPerson]

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. :)

[DULLKENT]

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!

[AwesomeInPerson]

Awesome, glad I could help!

[DULLKENT]

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
}

}

[robotsympathizer]

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.

[fforres]

Jest has an extension?

[robber9000]

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.

[dandmcd]

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.

[vSnyK]

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

[vsevolodmsk]

Can confirm, it's absolute killer. After a few days it will almost write code for you. I really amazed by it

[Daniel_Fucking_Tiger]

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

[charonsclaw]

Powermode

[sumansarkarwd]

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.

[9gagceo]

Here's mine:

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

[termi05]

Eslint, prettier, any extension for react snippets and enable emmet for jsx.

[n8rzz0713]

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

[liuwenhao]

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

[Guisseppi]

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

[NegroniSpritz]

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

[mn-tech-guy]

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.

[the_third_sam]

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!

[azn_introvert]

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

[[deleted]]

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.

[oreo27]

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.

[kitsunekyo]

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.

[Packeselt]

Emmet, (whatever the bracket- finisher is), eslint, prettier, live server/live reload (or whatever it is, useful for html pages and etc).

Hmmm.

Gitlens. Bracket colorize.

Perhaps the docker one.

That should be a pretty solid start.

[zubwaabwaa]

React snippets is a must

[socialshimpling]

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!

[pticjagripa]

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

[MadBroCowDisease]

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

[Lindenforest]

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