JavaScript Standard Style JSX ESLint Config

11.0.0 · active · verified Sun Apr 19

eslint-config-standard-jsx provides ESLint configuration for linting JSX syntax according to JavaScript Standard Style. It extends `eslint-config-standard` and specifically adds rules for JSX, making it suitable for projects using JSX with libraries like React, Preact, or others, without enforcing React-specific patterns. This package is intended for advanced users who prefer direct ESLint configuration rather than using the `standard` command-line tool. The current stable version is v11.0.0. Releases typically align with updates to ESLint, `standard` itself, and `eslint-plugin-react`. Its key differentiator is its focus on generic JSX rules, utilizing `eslint-plugin-react` for its JSX capabilities but remaining framework-agnostic regarding specific virtual DOM implementations. It requires several other `eslint-plugin-*` packages to be installed alongside it for a complete setup.

Common errors

```
Error: Failed to load config 'standard-jsx' to extend from.
```
cause The `eslint-config-standard-jsx` package is not installed or not discoverable by ESLint.

fix Run `npm install --save-dev eslint-config-standard-jsx` or `yarn add --dev eslint-config-standard-jsx`.
```
Error: Failed to load plugin 'react' declared in '.eslintrc' at 'standard-jsx#overrides[0]'.
```
cause The `eslint-plugin-react` package is not installed, which is a required dependency for `eslint-config-standard-jsx`.

fix Run `npm install --save-dev eslint-plugin-react` or `yarn add --dev eslint-plugin-react`.
```
Error: Failed to load config 'standard' to extend from.
```
cause The `eslint-config-standard` package is not installed, which is a base config extended by `standard-jsx`.

fix Run `npm install --save-dev eslint-config-standard` or `yarn add --dev eslint-config-standard`.
```
Parsing error: '...' is not a valid ES2022 feature.
```
cause You are using ES2022 syntax (e.g., top-level await, class static blocks) with an older version of `eslint` or `eslint-config-standard-jsx` that does not fully support it.

fix Update `eslint-config-standard-jsx` to v11.0.0 or higher, and ensure your `eslint` version is at least `^8.8.0`. Also, verify your ESLint parser (if customized) is up-to-date and configured for the correct ECMAScript version.

Warnings

gotcha This package is for advanced users configuring ESLint directly. Most users will find the `standard` package, which provides a CLI and pre-bundled configuration, much simpler to use.
Fix: Consider using `npm install -g standard` and `standard --fix` instead of manually configuring ESLint.
breaking Version 11.0.0 fixed an issue with the usage of ES2022 features. Projects using ES2022 syntax with older versions (pre-v11) might encounter parsing errors or incorrect linting results.
Fix: Upgrade to `eslint-config-standard-jsx@^11.0.0` and ensure your `eslint` peer dependency meets the specified version (`^8.8.0`).
gotcha Installing `eslint-config-standard-jsx` alone is not sufficient. You must also manually install `eslint`, `eslint-config-standard`, `eslint-plugin-react`, `eslint-plugin-promise`, `eslint-plugin-import`, and `eslint-plugin-node` as development dependencies.
Fix: Ensure all required peer and extended dependencies are installed: `npm install --save-dev eslint eslint-config-standard eslint-config-standard-jsx eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react`.

Install

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

Imports

standard-jsx
wrong:
```
{ "extends": ["standard", "eslint-config-standard-jsx"] }
```
correct:
```
{ "extends": ["standard", "standard-jsx"] }
```
This config is referenced by its short name in the `extends` array of an `.eslintrc` file. While the full package name works, the short form is canonical.
config object
wrong:
```
import config from 'eslint-config-standard-jsx'
```
correct:
```
module.exports = { extends: ['standard', 'standard-jsx'] }
```
ESLint configuration files (e.g., `.eslintrc.js`) typically use CommonJS `module.exports` for their configuration objects. Direct ESM imports of the config package are not the standard way to apply it.

Quickstart

Demonstrates how to install all necessary packages and configure ESLint using `eslint-config-standard-jsx` and its required peers in an `.eslintrc.js` file, then run linting.

npm install --save-dev eslint eslint-config-standard eslint-config-standard-jsx eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-react

// Then, create a .eslintrc.js file in your project root:
// .eslintrc.js
module.exports = {
  extends: [
    'standard',
    'standard-jsx'
  ],
  // You can add project-specific rules or overrides here
  rules: {
    // Example: allow unused variables if they start with underscore
    'no-unused-vars': ['error', { 'argsIgnorePattern': '^_', 'varsIgnorePattern': '^_', 'caughtErrorsIgnorePattern': '^_' }]
  }
};

// To run ESLint (assuming you have an 'index.jsx' file):
// npx eslint index.jsx

view raw JSON →