eslint-plugin-standard-cra

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

Installation

``bash
yarn add eslint-plugin-standard-cra


OR


npm install eslint-plugin-standard-cra
`

> package.json
>
> `diff
> {
> "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*

Let react-scripts run with eslint errors.


If you do not want eslint errors to block yarn start or yarn build...

> .env.local
>
> `bash
>DISABLE_ESLINT_PLUGIN=true
> `

VSCode

Install EsLint extension

> .vscode/settings.json
>
> `json
>{
> "eslint.format.enable": true,
> "editor.defaultFormatter": "dbaeumer.vscode-eslint",
> "[typescript]": {
> "editor.defaultFormatter": "dbaeumer.>vscode-eslint"
> },
> "[typescriptreact]": {
> "editor.defaultFormatter": "dbaeumer.>vscode-eslint"
> }
>}
> `
\ You'll need to reload VSCode*




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: .ts .tsx)
- 🔴 arrow-functions are mandatory for components
- 🔴 Component name needs to be in Pascal case (ex: )
- 🔴 No dangerous properties
- 🔴 No children in void DOM element. (ex:
forbidden
)
- 🔴 React fragment needs to be simplified. (ex: <> ... )
- 🟡 No useless closing tag (ex: )
- 🟡 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: )
- 🟡 No useless curly braces in props (ex: )

Indentation

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

`tsx
const MyComponent: React.FC = ({
foo,
bar,
...props
}) => (
<>

text bold


---

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

)
``