eslint-config-xo

ESLint shareable config for XO with support for JavaScript, TypeScript, HTML, and Markdown

This is for advanced users. You probably want to use XO directly.

Use the XO issue tracker instead of this one.

Install

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

Usage

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

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

Options

browser

Type: boolean
Default: false

Use browser globals instead of Node.js globals.

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

space

Type: boolean | number
Default: false

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

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

semicolon

Type: boolean
Default: true

Use semicolons at the end of statements. Set to false to enforce no semicolons.

export default defineConfig([
	...eslintConfigXo({semicolon: false}),
]);

prettier

Type: boolean | 'compat'
Default: false

Integrate Prettier.

• true — Run Prettier as an ESLint rule using XO's Prettier style, and disable the stylistic rules that would conflict with it. Requires prettier to be installed.
• 'compat' — Only disable the stylistic rules that conflict with Prettier, for when you run Prettier separately (for example, from your editor or a script).

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

Prettier options you set in a .prettierrc still apply for anything XO does not configure (like printWidth or plugins), but XO's own style settings take precedence.

TypeScript

TypeScript is supported out of the box. If typescript is installed, TypeScript rules are automatically enabled. For JavaScript-only projects, typescript is not required.

HTML

HTML files (*.html) are linted automatically using @html-eslint/eslint-plugin, covering best practices, accessibility, SEO, and style.

Markdown

Markdown files (*.md) are linted automatically using @eslint/markdown, covering link/image correctness, heading structure, and more.

Custom rules

xo/import-specifier-newline

When an import spans multiple lines, each specifier must be on its own line. Autofixable.

// Bad
import {
	foo, bar, baz,
} from 'x';

// Good
import {
	foo,
	bar,
	baz,
} from 'x';

// Single-line imports are not affected
import {foo, bar} from 'x';

Included plugins

• eslint-plugin-unicorn
• eslint-plugin-import-x
• eslint-plugin-n
• eslint-plugin-ava
• @eslint-community/eslint-plugin-eslint-comments
• @stylistic/eslint-plugin
• typescript-eslint
• @html-eslint/eslint-plugin
• @eslint/markdown
• eslint-plugin-regexp
• eslint-plugin-jsdoc
• eslint-plugin-prettier (only when the prettier option is enabled)

Use the XO CLI instead

XO is an ESLint wrapper with great defaults.

Here are some reason why you should use the XO CLI instead of this config:

• XO comes bundled with this config.
• Beautiful output.
• No need to specify file paths to lint. It will lint all JS files except commonly ignored paths.
• Super simple to add XO to a project with $ npm init xo.
• Config/rule overrides per files/globs.
• Prettier integration.
• React support.
• Can open all files with errors at the correct line in your editor. (See the --open flag)
• The editor plugins are IMHO better than the ESLint ones. (Subjective)

tl;dr You miss out on a lot by just using this config.

Related

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