JavaScript Standard Style React ESLint Config

13.0.0 · active · verified Sun Apr 19

eslint-config-standard-react is an ESLint shareable configuration designed to extend the JavaScript Standard Style with support for React and JSX syntax. The current stable version is 13.0.0, released on December 15, 2022. This package integrates React-specific linting rules, including those for React Hooks (introduced in v13.0.0), into the opinionated `standard` ecosystem. It functions as an additive layer on top of `eslint-config-standard` and `eslint-config-standard-jsx`, requiring these and specific ESLint plugins (such as `eslint-plugin-react` and `eslint-plugin-react-hooks`) to be installed as peer dependencies. The project maintains an active status, with major version bumps typically aligning with significant updates like ESLint version support (e.g., v12.0.0 for ESLint 8.x) or new React feature linting. Unlike the main `standard` package, this config is intended for advanced users who prefer to manage their ESLint setup manually rather than relying on the `standard` CLI tool directly, offering more granular control over the linting process.

Common errors

```
Error: Failed to load parser '@babel/eslint-parser' declared in '.eslintrc.json'
```
cause The `@babel/eslint-parser` package or its core dependency `@babel/core` is not installed.

fix Run `npm install --save-dev @babel/eslint-parser @babel/core`.
```
Error: Failed to load config "standard-react" relative to config "...".
```
cause The `eslint-config-standard-react` package (or its peer dependencies) is not installed, or there's a typo in the `extends` array.

fix Ensure `eslint-config-standard-react` and all its peer dependencies (e.g., `eslint-plugin-react`) are installed: `npm install --save-dev eslint-config-standard-react eslint-plugin-react eslint-plugin-react-hooks` and verify the `extends` entry is `"standard-react"`.
```
React Hooks: Rules of Hooks violation
```
cause Your React component is violating one of the Rules of Hooks, such as calling a Hook conditionally or from a regular JavaScript function.

fix Refactor your code to ensure Hooks are only called at the top level of React function components or custom Hooks, and not inside loops, conditions, or nested functions.
```
Parsing error: 'import' and 'export' may only appear with 'sourceType: "module"'
```
cause ESLint is trying to parse a file with `import`/`export` statements as a CommonJS module, or `sourceType` is not correctly set for JSX files.

fix Ensure `parserOptions` in your `.eslintrc` includes `"sourceType": "module"` and `"ecmaVersion": 2020` (or higher), and `"ecmaFeatures": { "jsx": true }`.

Warnings

breaking Version 12.0.0 of `eslint-config-standard-react` introduced support for ESLint 8.x. Projects still using ESLint 7.x or older will need to either update their ESLint version or stick to `eslint-config-standard-react` v11.x.
Fix: Upgrade `eslint` to `^8.8.0` (or newer compatible version) and update all related ESLint plugins and configs in your project.
breaking Version 13.0.0 added `react-hooks` rules, which might introduce new linting errors in existing codebases that do not strictly adhere to React Hooks best practices (e.g., Rules of Hooks). It also updated Babel instructions, potentially requiring adjustments to `@babel/eslint-parser` setup.
Fix: Review your React Hooks usage and refactor code to comply with the 'Rules of Hooks'. Ensure `@babel/eslint-parser` and `@babel/core` are installed and configured correctly, potentially adding `requireConfigFile: false` to `parserOptions`.
gotcha `eslint-config-standard-react` is not a standalone solution. It requires `eslint-config-standard`, `eslint-config-standard-jsx`, `@babel/eslint-parser`, and several `eslint-plugin-*` packages to function correctly. Failure to install all dependencies will lead to ESLint errors.
Fix: Always install the complete set of recommended dependencies as listed in the package's README or the quickstart section, typically using `npm install --save-dev` for all listed packages.
gotcha When using React 17+ and the new JSX transform, the `react/jsx-uses-react` and `react/react-in-jsx-scope` rules become obsolete and will cause linting errors or warnings if not explicitly disabled.
Fix: Add `"react/jsx-uses-react": "off"` and `"react/react-in-jsx-scope": "off"` to the `rules` section of your `.eslintrc` file.

Install

npm install eslint-config-standard-react npm
yarn add eslint-config-standard-react yarn
pnpm add eslint-config-standard-react pnpm

Imports

standard-react
wrong:
```
{
  "extends": [
    "eslint-config-standard-react"
  ]
}
```
correct:
```
{
  "extends": [
    "standard",
    "standard-jsx",
    "standard-react"
  ]
}
```
Referenced as a string in the `extends` array of an `.eslintrc` file. ESLint automatically assumes the `eslint-config-` prefix. It should be used in conjunction with `standard` and `standard-jsx`.
@babel/eslint-parser
wrong:
```
{
  "parser": "babel-eslint"
}
```
correct:
```
{
  "parser": "@babel/eslint-parser"
}
```
Specify this as the `parser` in your `.eslintrc` to enable Babel-based parsing for modern JavaScript features and JSX. `babel-eslint` is a deprecated package.
.eslintrc configuration file
```
{
  "parser": "@babel/eslint-parser",
  "extends": [
    "standard",
    "standard-jsx",
    "standard-react"
  ],
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off" 
  }
}
```
A complete `.eslintrc` file is used to configure ESLint. It's common to disable `react/jsx-uses-react` and `react/react-in-jsx-scope` if using React 17+ and the new JSX transform, as React no longer needs to be in scope for JSX to work. This isn't strictly an 'import' but the primary way developers integrate the config.

Quickstart

This quickstart demonstrates the full installation of `eslint-config-standard-react` and its necessary peer dependencies, along with the correct `.eslintrc.json` configuration for a typical React project using JavaScript Standard Style. It includes basic `parserOptions`, `env` settings, and common rule overrides for modern React applications using the new JSX transform.

npm install --save-dev \
  eslint \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  @babel/core \
  @babel/eslint-parser \
  eslint-config-standard \
  eslint-config-standard-jsx \
  eslint-config-standard-react \
  eslint-plugin-promise \
  eslint-plugin-import \
  eslint-plugin-node

// .eslintrc.json
{
  "parser": "@babel/eslint-parser",
  "extends": [
    "standard",
    "standard-jsx",
    "standard-react"
  ],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "requireConfigFile": false // Required for @babel/eslint-parser with some setups
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    // Override/add rules as needed, e.g., for React 17+ JSX transform
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  },
  "settings": {
    "react": {
      "version": "detect" // Automatically detect the React version
    }
  }
}

view raw JSON →