{"id":10821,"library":"eslint-config-standard-react","title":"JavaScript Standard Style React ESLint Config","description":"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.","status":"active","version":"13.0.0","language":"javascript","source_language":"en","source_url":"git://github.com/standard/eslint-config-standard-react","tags":["javascript","JavaScript Standard Style","check","checker","code","code checker","code linter","code standards","code style"],"install":[{"cmd":"npm install eslint-config-standard-react","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-config-standard-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-config-standard-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core ESLint linter, required to run any ESLint configuration. Peer dependency `^8.8.0`.","package":"eslint","optional":false},{"reason":"Provides React-specific linting rules for JSX and component best practices. Peer dependency `^7.28.0`.","package":"eslint-plugin-react","optional":false},{"reason":"Adds rules for React Hooks usage, introduced in `eslint-config-standard-react` v13.0.0. Peer dependency `^4.6.0`.","package":"eslint-plugin-react-hooks","optional":false},{"reason":"Required for parsing modern JavaScript and JSX syntax using Babel.","package":"@babel/eslint-parser","optional":false},{"reason":"Core Babel library, a dependency of `@babel/eslint-parser`.","package":"@babel/core","optional":false},{"reason":"The base JavaScript Standard Style ESLint configuration.","package":"eslint-config-standard","optional":false},{"reason":"Adds generic JSX linting rules, which `eslint-config-standard-react` extends.","package":"eslint-config-standard-jsx","optional":false},{"reason":"Recommended plugin by `eslint-config-standard` for promise-related rules.","package":"eslint-plugin-promise","optional":false},{"reason":"Recommended plugin by `eslint-config-standard` for import/export syntax validation.","package":"eslint-plugin-import","optional":false},{"reason":"Recommended plugin by `eslint-config-standard` for Node.js-specific rules.","package":"eslint-plugin-node","optional":false}],"imports":[{"note":"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`.","wrong":"{\n  \"extends\": [\n    \"eslint-config-standard-react\"\n  ]\n}","symbol":"standard-react","correct":"{\n  \"extends\": [\n    \"standard\",\n    \"standard-jsx\",\n    \"standard-react\"\n  ]\n}"},{"note":"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.","wrong":"{\n  \"parser\": \"babel-eslint\"\n}","symbol":"@babel/eslint-parser","correct":"{\n  \"parser\": \"@babel/eslint-parser\"\n}"},{"note":"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.","symbol":".eslintrc configuration file","correct":"{\n  \"parser\": \"@babel/eslint-parser\",\n  \"extends\": [\n    \"standard\",\n    \"standard-jsx\",\n    \"standard-react\"\n  ],\n  \"rules\": {\n    \"react/jsx-uses-react\": \"off\",\n    \"react/react-in-jsx-scope\": \"off\" \n  }\n}"}],"quickstart":{"code":"npm install --save-dev \\\n  eslint \\\n  eslint-plugin-react \\\n  eslint-plugin-react-hooks \\\n  @babel/core \\\n  @babel/eslint-parser \\\n  eslint-config-standard \\\n  eslint-config-standard-jsx \\\n  eslint-config-standard-react \\\n  eslint-plugin-promise \\\n  eslint-plugin-import \\\n  eslint-plugin-node\n\n// .eslintrc.json\n{\n  \"parser\": \"@babel/eslint-parser\",\n  \"extends\": [\n    \"standard\",\n    \"standard-jsx\",\n    \"standard-react\"\n  ],\n  \"parserOptions\": {\n    \"ecmaVersion\": 2020,\n    \"sourceType\": \"module\",\n    \"ecmaFeatures\": {\n      \"jsx\": true\n    },\n    \"requireConfigFile\": false // Required for @babel/eslint-parser with some setups\n  },\n  \"env\": {\n    \"browser\": true,\n    \"node\": true,\n    \"es6\": true\n  },\n  \"rules\": {\n    // Override/add rules as needed, e.g., for React 17+ JSX transform\n    \"react/jsx-uses-react\": \"off\",\n    \"react/react-in-jsx-scope\": \"off\"\n  },\n  \"settings\": {\n    \"react\": {\n      \"version\": \"detect\" // Automatically detect the React version\n    }\n  }\n}","lang":"json","description":"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."},"warnings":[{"fix":"Upgrade `eslint` to `^8.8.0` (or newer compatible version) and update all related ESLint plugins and configs in your project.","message":"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.","severity":"breaking","affected_versions":">=12.0.0"},{"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`.","message":"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.","severity":"breaking","affected_versions":">=13.0.0"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `\"react/jsx-uses-react\": \"off\"` and `\"react/react-in-jsx-scope\": \"off\"` to the `rules` section of your `.eslintrc` file.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev @babel/eslint-parser @babel/core`.","cause":"The `@babel/eslint-parser` package or its core dependency `@babel/core` is not installed.","error":"Error: Failed to load parser '@babel/eslint-parser' declared in '.eslintrc.json'"},{"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\"`.","cause":"The `eslint-config-standard-react` package (or its peer dependencies) is not installed, or there's a typo in the `extends` array.","error":"Error: Failed to load config \"standard-react\" relative to config \"...\"."},{"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.","cause":"Your React component is violating one of the Rules of Hooks, such as calling a Hook conditionally or from a regular JavaScript function.","error":"React Hooks: Rules of Hooks violation"},{"fix":"Ensure `parserOptions` in your `.eslintrc` includes `\"sourceType\": \"module\"` and `\"ecmaVersion\": 2020` (or higher), and `\"ecmaFeatures\": { \"jsx\": true }`.","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.","error":"Parsing error: 'import' and 'export' may only appear with 'sourceType: \"module\"'"}],"ecosystem":"npm"}