Skip to content
/ xo Public
forked from xojs/xo

❤️ JavaScript linter with great defaults

License

Notifications You must be signed in to change notification settings

spence-s/xo

This branch is 4 commits ahead of xojs/xo:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

6cdbe1e · Jan 14, 2025
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025
Feb 13, 2018
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025
Nov 13, 2018
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025
Jul 23, 2018
Jul 23, 2018
Jan 14, 2025
Apr 25, 2020
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025

Repository files navigation


XO


JavaScript/TypeScript linter (ESLint wrapper) with great defaults

Coverage Status XO code style

Opinionated but configurable ESLint wrapper with lots of goodies included. Enforces strict and readable code. Never discuss code style on a pull request again! No decision-making. No .eslintrc to manage. It just works!

It uses ESLint underneath, so issues regarding built-in rules should be opened over there.

XO requires your project to be ESM.

Highlights

Install

npm install xo --save-dev

You must install XO locally. You can run it directly with $ npx xo.

JSX is supported by default, but you'll need eslint-config-xo-react for React specific linting. Vue components are not supported by default. You'll need eslint-config-xo-vue for specific linting in a Vue app.

Usage

$ xo --help

  Usage
    $ xo [<file|glob> ...]

  Options
    --fix             Automagically fix issues
    --env             Environment preset  [Can be set multiple times]
    --ignore          Additional paths to ignore  [Can be set multiple times]
    --space           Use space indent instead of tabs  [Default: 2]
    --no-semicolon    Prevent use of semicolons
    --prettier        Conform to Prettier code style
    --plugin          Include third-party plugins  [Can be set multiple times]
    --extend          Extend defaults with a custom config  [Can be set multiple times]
    --quiet           Show only errors and no warnings
    --cwd=<dir>       Working directory for files
    --print-config    Print the ESLint configuration for the given file

  Examples
    $ xo
    $ xo index.js
    $ xo *.js !foo.js
    $ xo --space
    $ xo --print-config=index.js

Default code style

Any of these can be overridden if necessary.

  • Tab indentation (or space)
  • Semicolons (or not)
  • Single-quotes
  • Trailing comma for multiline statements
  • No unused variables
  • Space after keyword if (condition) {}
  • Always === instead of ==

Check out an example and the ESLint rules.

Workflow

The recommended workflow is to add XO locally to your project and run it with the tests.

Simply run $ npm init xo (with any options) to add XO to your package.json or create one.

Config

You can configure XO options by creating an xo.config.js or an xo.config.ts file in the root directory of your project. XO's config is an extension of ESLints Flat Config. Like ESLint, an XO config exports an array of XO config objects. XO config objects extend ESLint Configuration Objects. This means all the available configuration params for ESLint also work for XO. However, XO enhances and adds extra params to the configuration objects.

files

type: string | string[] | undefined, default: **/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx};

A glob or array of glob strings which the config object will apply. By default XO will apply the configuration to all files.

ignores

Type: string[]

Some paths are ignored by default, including paths in .gitignore and .eslintignore. Additional ignores can be added here.

space

Type: boolean | number
Default: false (tab indentation)

Set it to true to get 2-space indentation or specify the number of spaces.

This option exists for pragmatic reasons, but I would strongly recommend you read "Why tabs are superior".

semicolon

Type: boolean
Default: true (Semicolons required)

Set it to false to enforce no-semicolon style.

prettier

Type: boolean
Default: false

Format code with Prettier.

Prettier options will be based on your Prettier config. XO will then merge your options with its own defaults:

To stick with Prettier's defaults, add this to your Prettier config:

export default {
  trailingComma: "es5",
  singleQuote: false,
  bracketSpacing: true,
};

If contradicting options are set for both Prettier and XO, an error will be thrown.

Tips

The --ts option

By default, XO will handle all aspects of type aware linting, even when a file is not included in a tsconfig, which would normally error when using ESLint directly. However, this incurs a small performance penalty of having to look up the tsconfig each time in order to calculate and write an appropriate default tscfonfig to use for the file. In situations where you are linting often, you may want to configure your project correctly for type aware linting. This can help performance in editor plugins.

Monorepo

Put a xo.config.js with your config at the root and do not add a config to any of your bundled packages.

Including files ignored by default

To include files that XO ignores by default, add them as negative globs in the ignores option:

{
  "xo": {
    "ignores": ["!vendor/**"]
  }
}

FAQ

What does XO mean?

It means hugs and kisses.

Why not Standard?

The Standard style is a really cool idea. I too wish we could have one style to rule them all! But the reality is that the JS community is just too diverse and opinionated to create one code style. They also made the mistake of pushing their own style instead of the most popular one. In contrast, XO is more pragmatic and has no aspiration of being the style. My goal with XO is to make it simple to enforce consistent code style with close to no config. XO comes with my code style preference by default, as I mainly made it for myself, but everything is configurable.

Why not ESLint?

XO is based on ESLint. This project started out as just a shareable ESLint config, but it quickly grew out of that. I wanted something even simpler. Just typing xo and be done. No decision-making. No config. I also have some exciting future plans for it. However, you can still get most of the XO benefits while using ESLint directly with the ESLint shareable config.

Editor plugins

Build-system plugins

Configs

Support

Related

Badge

Show the world you're using XO → XO code style

[![XO code style](https://shields.io/badge/code_style-5ed9c7?logo=xo&labelColor=gray&logoSize=auto&logoWidth=20)](https://github.com/xojs/xo)

Or customize the badge.

You can also find some nice dynamic XO badges on badgen.net.

Team

Former

About

❤️ JavaScript linter with great defaults

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%