Registry / testing / eslint-config-standard-react

eslint-config-standard-react

library13.0.0jsnpmunverified

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.

testing

npm install eslint-config-standard-react

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-CONFIG-STAN

eslint-config-standard-react

testingjavascriptv13.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

standard-react

✓ { "extends": [ "standard", "standard-jsx", "standard-react" ] }

✗ { "extends": [ "eslint-config-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

✓ { "parser": "@babel/eslint-parser" }

✗ { "parser": "babel-eslint" }

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.

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 } } }

Debug

Known issues

breakingVersion 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.

affects: >=12.0.0

breakingVersion 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`.

affects: >=13.0.0

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.

affects: >=1.0.0

gotchaWhen 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.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Failed to load parser '@babel/eslint-parser' declared in '.eslintrc.json'

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 "...".

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

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"'

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 }`.

Upgrade

Version history

13.0.0latest on npm

Audit

Dependencies

eslintrequiredCore ESLint linter, required to run any ESLint configuration. Peer dependency `^8.8.0`.

eslint-plugin-reactrequiredProvides React-specific linting rules for JSX and component best practices. Peer dependency `^7.28.0`.

eslint-plugin-react-hooksrequiredAdds rules for React Hooks usage, introduced in `eslint-config-standard-react` v13.0.0. Peer dependency `^4.6.0`.

@babel/eslint-parserrequiredRequired for parsing modern JavaScript and JSX syntax using Babel.

@babel/corerequiredCore Babel library, a dependency of `@babel/eslint-parser`.

eslint-config-standardrequiredThe base JavaScript Standard Style ESLint configuration.

eslint-config-standard-jsxrequiredAdds generic JSX linting rules, which `eslint-config-standard-react` extends.

eslint-plugin-promiserequiredRecommended plugin by `eslint-config-standard` for promise-related rules.

eslint-plugin-importrequiredRecommended plugin by `eslint-config-standard` for import/export syntax validation.

eslint-plugin-noderequiredRecommended plugin by `eslint-config-standard` for Node.js-specific rules.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/standard/eslint-config-standard-react ↗

packagehttps://www.npmjs.com/package/eslint-config-standard-react ↗