eslint-config-xo

What is eslint-config-xo?

eslint-config-xo is a shareable ESLint configuration package that enforces the XO style guide. XO is a strict and opinionated code style guide for JavaScript and TypeScript, which aims to enforce best practices and consistency in codebases.

What are eslint-config-xo's main functionalities?

Enforcing Code Style

By extending the 'xo' configuration in your ESLint configuration file, you can enforce the XO style guide in your project. This includes rules for code formatting, best practices, and potential errors.

{
  "extends": "xo"
}

TypeScript Support

eslint-config-xo provides support for TypeScript by allowing you to extend the 'xo-typescript' configuration. This ensures that TypeScript-specific rules and best practices are enforced.

{
  "extends": "xo",
  "overrides": [
    {
      "files": "*.ts",
      "extends": "xo-typescript"
    }
  ]
}

React Support

For projects using React, you can extend the 'xo-react' configuration to enforce React-specific linting rules and best practices.

{
  "extends": [
    "xo",
    "xo-react"
  ]
}

Other packages similar to eslint-config-xo

eslint-config-airbnb

eslint-config-airbnb is a popular ESLint configuration that follows the Airbnb JavaScript style guide. It is widely used and provides a comprehensive set of rules for JavaScript and React. Compared to eslint-config-xo, it is less strict and more flexible, making it suitable for a broader range of projects.

eslint-config-standard

eslint-config-standard is another popular ESLint configuration that follows the JavaScript Standard Style. It is less opinionated than eslint-config-xo and focuses on simplicity and ease of use. It is a good choice for projects that prefer a more relaxed coding style.

eslint-config-prettier

eslint-config-prettier is an ESLint configuration that disables all rules that are unnecessary or might conflict with Prettier. It is often used in combination with other configurations like eslint-config-airbnb or eslint-config-standard to ensure code formatting is handled by Prettier while still enforcing other linting rules.

README

eslint-config-xo

ESLint shareable config for XO

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

See eslint-plugin-unicorn for some additional useful rules.

Use the XO issue tracker instead of this one.

Install

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

Usage

// eslint.config.js
import xo from 'eslint-config-xo';

export default [
	...xo,
];

This package also exposes eslint-config-xo/browser if you're in the browser:

import xoBrowser from 'eslint-config-xo/browser';

export default [
	...xoBrowser,
];

This package also exposes eslint-config-xo/space if you're in favor of 2-space indent:

import xoSpace from 'eslint-config-xo/space';

export default [
	...xoSpace,
];

This package also exposes eslint-config-xo/space/browser if you're in favor of 2-space indent and in browser:

import xoSpaceBrowser from 'eslint-config-xo/space/browser';

export default [
	...xoSpaceBrowser,
];

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.
• Bundles many useful plugins, like eslint-plugin-unicorn, eslint-plugin-import, eslint-plugin-ava, and more.
• 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.
• Specify indent and semicolon preferences easily without messing with the rule config.
• Config/rule overrides per files/globs.
• 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-space - ESLint shareable config for XO with 2-space indent
• eslint-config-xo-typescript - ESLint shareable config for TypeScript to be used with this config
• eslint-config-xo-react - ESLint shareable config for React to be used with this config