https://github.com/kegi/eslint-plugin-standard-cra
A single dev dependency for strict and modern React linting based on StandardJS
https://github.com/kegi/eslint-plugin-standard-cra
cra eslint react standardjs typescript
Last synced: 3 months ago
JSON representation
A single dev dependency for strict and modern React linting based on StandardJS
- Host: GitHub
- URL: https://github.com/kegi/eslint-plugin-standard-cra
- Owner: kegi
- Created: 2021-03-28T12:53:44.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-28T22:49:25.000Z (about 2 years ago)
- Last Synced: 2025-09-24T00:57:30.786Z (10 months ago)
- Topics: cra, eslint, react, standardjs, typescript
- Language: JavaScript
- Homepage:
- Size: 74.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
> **.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](https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules)
2) [StandardJS + TypeScript](https://standardjs.com/)
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](https://reactjs.org/docs/dom-elements.html) 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 && (
{ handleClick() }}
{...props}
/>
) }
>
)
```