ESLint plugin for StandardJS for React CRA + TypeScript
npm install eslint-plugin-standard-craA single dev dependency for strict and modern React linting based on StandardJS

``bash`
yarn add eslint-plugin-standard-craOR
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*
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 🟡 warningReact 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: )
- 🔴 React fragment needs to be simplified. (ex: <> ... >)
- 🟡 No useless closing tag (ex: )
- 🟡 No useless fragmentsReact 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}
/>
) }
>
)
``