JavaScript/TypeScript linter (ESLint wrapper) with great defaults
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.
- Beautiful output.
- Zero-config, but configurable when needed.
- Enforces readable code, because you read more code than you write.
- No need to specify file paths to lint as it lints all JS/TS files except for commonly ignored paths.
- Config overrides per files/globs.
- TypeScript supported by default.
- Includes many useful ESLint plugins, like
unicorn
,import
,ava
,n
and more. - Automatically enables rules based on the
engines
field in yourpackage.json
. - Caches results between runs for much better performance.
- Super simple to add XO to a project with
$ npm init xo
. - Fix many issues automagically with
$ xo --fix
. - Open all files with errors at the correct line in your editor with
$ xo --open
. - Specify indent and semicolon preferences easily without messing with the rule config.
- Optionally use the Prettier code style.
- Great editor plugins.
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.
$ 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
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.
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.
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.
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.
Type: string[]
Some paths are ignored by default, including paths in .gitignore
and .eslintignore. Additional ignores can be added here.
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".
Type: boolean
Default: true
(Semicolons required)
Set it to false
to enforce no-semicolon style.
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:
- semi: based on semicolon option
- useTabs: based on space option
- tabWidth: based on space option
- trailingComma:
all
- singleQuote:
true
- bracketSpacing:
false
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.
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.
Put a xo.config.js
with your config at the root and do not add a config to any of your bundled packages.
To include files that XO ignores by default, add them as negative globs in the ignores
option:
{
"xo": {
"ignores": ["!vendor/**"]
}
}
It means hugs and kisses.
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.
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.
- eslint-config-xo - ESLint shareable config for XO with tab indent
- eslint-config-xo-space - ESLint shareable config for XO with 2-space indent
- eslint-config-xo-react - ESLint shareable config for React to be used with the above
- eslint-config-xo-vue - ESLint shareable config for Vue to be used with the above
- stylelint-config-xo - Stylelint shareable config for XO with tab indent
- stylelint-config-xo-space - Stylelint shareable config for XO with 2-space indent
- eslint-config-xo-typescript - ESLint shareable config for TypeScript
- eslint-plugin-unicorn - Various awesome ESLint rules (Bundled in XO)
- xo-summary - Display output from
xo
as a list of style errors, ordered by count
Show the world you're using XO →
[![XO code style](https://shields.io/badge/code_style-5ed9c7?logo=xo&labelColor=gray&logoSize=auto&logoWidth=20)](https://github.com/xojs/xo)
You can also find some nice dynamic XO badges on badgen.net.