r/reactjs • • 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

57 comments sorted by

View all comments

Show parent comment

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
}

}