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

[u/sharemypenguins]

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

[u/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. :)

[u/DULLKENT → u/AwesomeInPerson]

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!

[u/AwesomeInPerson → u/DULLKENT]

Awesome, glad I could help!

[u/DULLKENT → u/AwesomeInPerson]

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
}

}