eslint-config-xo-react

ESLint shareable config for React to be used with eslint-config-xo

Install

npm install --save-dev eslint-config-xo eslint-config-xo-react

[!NOTE] This config is built on ESLint React, which requires typescript as a peer dependency even in JavaScript-only projects. npm and pnpm install it for you, but Yarn does not, so install it yourself there.

Usage

// eslint.config.js
import eslintConfigXo from 'eslint-config-xo';
import eslintConfigXoReact from 'eslint-config-xo-react';
import {defineConfig} from 'eslint/config';

export default defineConfig([
	...eslintConfigXo(),
	...eslintConfigXoReact(),
]);

Options

space

Type: boolean | number
Default: false

Use spaces for indentation instead of tabs for JSX props. Set to true for 2 spaces, or a number for a custom count.

export default defineConfig([
	...eslintConfigXo({space: true}),
	...eslintConfigXoReact({space: true}),
]);

prettier

Type: boolean | 'compat'
Default: false

Integrate Prettier by turning off the JSX formatting rules that conflict with it. Rules owned by eslint-config-xo are left alone, so you no longer need to add eslint-config-prettier yourself.

export default defineConfig([
	...eslintConfigXo({prettier: 'compat'}),
	...eslintConfigXoReact({prettier: 'compat'}),
]);

This config never runs Prettier, so any truthy value only turns off the conflicting rules. Running Prettier itself is handled by the prettier option in eslint-config-xo. Pass the same value you pass there.

Use with XO

XO comes bundled with eslint-config-xo, so you only need this config:

npm install --save-dev eslint-config-xo-react

// xo.config.js
import eslintConfigXoReact from 'eslint-config-xo-react';
import {defineConfig} from 'eslint/config';

export default defineConfig([
	...eslintConfigXoReact(),
]);

Pass the same space and prettier values you use in your XO config.

Included plugins

• @eslint-react/eslint-plugin
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y-x
• eslint-plugin-perfectionist
• @stylistic/eslint-plugin

Accessibility

Accessibility rules come from eslint-plugin-jsx-a11y-x, a maintained fork of eslint-plugin-jsx-a11y. The rules are prefixed with jsx-a11y-x/.

Only the rules that can be decided from the markup alone are enabled. The rules that guess at whether an element is meant to be interactive are left out, as they cannot see through component wrappers and do not apply to React Native. Enable those yourself if they suit your project.

If you wrap native elements in your own components, map them so the rules can see through the wrapper:

export default defineConfig([
	...eslintConfigXoReact(),
	{
		settings: {
			'jsx-a11y-x': {
				components: {
					TextField: 'input',
				},
			},
		},
	},
]);

Related

• eslint-config-xo - ESLint shareable config for XO
• XO