gem-hunter

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

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

// 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(),
]);

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}),
]);

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.

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.

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

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',
				},
			},
		},
	},
]);

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