eslint-plugin-standard-cra

A single dev dependency for strict and modern React linting based on StandardJS

Installation

yarn add eslint-plugin-standard-cra
# OR
npm install eslint-plugin-standard-cra

package.json

{
  "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src",
+    "lint:fix": "eslint --fix src"
  },
  "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:standard-cra/recommended"
     ]
   },
}

* See below for list of presets

VSCode

Install EsLint extension

.vscode/settings.json

{
  "eslint.format.enable": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}

* You'll need to reload VSCode after applying new linting rules

Presets

Preset	StandardJS	TypeScript	React/JSX strict rules
plugin:standard-cra/recommended	✔	✔	✔
plugin:standard-cra/base	✔	✔	❌
plugin:standard-cra/js-recommended	✔	❌	✔
plugin:standard-cra/js-base	✔	❌	❌

Rules

1. Recommended rules from React plugin
2. StandardJS + TypeScript
3. React + JSX (see below)

Strict React + JSX rules

🔴 error 🟡 warning

React components

• 🔴 React file needs extension .js .jsx (if using TS: .js .jsx .ts .tsx)
• 🔴 arrow-functions are mandatory for components
• 🔴 Component name needs to be in Pascal case (ex: <MyComponentName />)
• 🔴 No dangerous properties
• 🔴 No children in void DOM element. (ex: <br> forbidden </br>)
• 🔴 React fragment needs to be simplified. (ex: <> ... </>)
• 🟡 No useless closing tag (ex: <Foo></Foo>)
• 🟡 No useless fragments

React component props

• 🔴 No URL starting with javascript: in href prop
• 🟡 No single quote for props
• 🟡 No Array indexes in key prop
• 🟡 No useless Boolean prop (ex: <Comp forbidden={true} />)
• 🟡 No useless curly braces in props (ex: <Comp forbidden={'string'} />)

Indentation

• 🟡 2 spaces indentation
• 🟡 Multiple indentation rules, see below:

const MyComponent: React.FC<MyComponentProps> = ({
  foo,
  bar,
  ...props
}) => (
  <>
    <span id="id" className="myClass">
      text <strong>bold</strong>
      <hr />
    </span>

    { foo && (
      <FooComponent
        data-foo="foo"
        bar={bar}
        baz
        onClick={() => { handleClick() }}
        {...props}
      />
    ) }
  </>
)