xo
v0.61.0-2
JavaScript/TypeScript linter (ESLint wrapper) with great defaults
0/weekUpdated 3 months agoMITUnpacked: 78.2 KB
Published by Sindre Sorhus
npm install xo
> 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 eslint.config.js 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
- 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.
- Flat config customization.
- TypeScript supported by default.
- Includes many useful ESLint plugins, like unicorn, import, ava, n and more.
- 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 or turn off all Prettier rules with the compat option.
- Optionally use eslint-config-xo-react for easy JSX and React linting with zero config.
- Optionally use with ESLint directly
- Great editor plugins.
Install
``sh`
npm install xo --save-dev
You must install XO locally. You can run it directly with $ npx xo.
You'll need eslint-config-xo-vue for specific linting in a Vue app.
Usage
`
$ xo --help
Usage
$ xo [
Options
--fix Automagically fix issues
--reporter Reporter to use
--space Use space indent instead of tabs [Default: 2]
--config Path to a XO configuration file
--semicolon Use semicolons [Default: true]
--react Include React specific parsing and xo-react linting rules [Default: false]
--prettier Format with prettier or turn off prettier-conflicted rules when set to 'compat' [Default: false]
--print-config Print the effective ESLint config for the given file
--version Print XO version
--open Open files with issues in your editor
--quiet Show only errors and no warnings
--stdin Validate/fix code from stdin
--stdin-filename Specify a filename for the --stdin option
--ignore Ignore pattern globs, can be set multiple times
--cwd=
Examples
$ xo
$ xo index.js
$ xo *.js !foo.js
$ xo --space
$ xo --print-config=index.js
$ echo 'const x=true' | xo --stdin --fix
Tips
- Add XO to your project with npm init xo.`
- Put options in xo.config.js instead of using flags so other tools can read it.
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 create an xo.config.js.
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, or you can add an xo field to your package.json. XO supports all js/ts file extensions (js,cjs,mjs,ts,cts,mts) and popular framework extensions (vue,svelte,astro) automatically. A XO config is an extension of ESLint's 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 to make them easier to work with.
$3
XO exports the types FlatXoConfig, XoConfigItem, and other types for you to get TypeScript validation on your config files.
examples:
xo.config.js
`js`
/* @type {import('xo').FlatXoConfig} /
const xoConfig = [...]
xo.config.ts
`ts
import {type FlatXoConfig} from 'xo';
const xoConfig: FlatXoConfig = [...]
`
`ts`
export default [...] satisfies import('xo').FlatXoConfig
$3
Type: string | string[] | undefined\*/.{js,cjs,mjs,jsx,ts,cts,mts,tsx,vue,svelte,astro}
Default:
A glob or array of glob strings which the config object will apply. By default XO will apply the configuration to all files.
> Tip: If you are adding additional @typescript-eslint rules to your config, these rules will apply to JS files as well unless you separate them appropriately with the files option. @typescript-eslint rules set to 'off' or 0, however, will have no effect on JS linting.
$3
Type: string[]
Some paths are ignored by default, including paths in .gitignore. Additional ignores can be added here.
> Tip: For global ignores, keep ignores as the only key in the config item. You can optionally set a name property. Adding more properties will cause ignores to be scoped down to your files selection, which may have unexpected effects.
$3
Type: boolean | number\false
Default: (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”.
$3
Type: boolean\true
Default: (Semicolons required)
Set it to false to enforce no-semicolon style.
$3
Type: boolean | 'compat'\false
Default:
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
- singleQuote: true
- bracketSpacing:
To stick with Prettier's defaults, add this to your Prettier config:
`js`
export default {
singleQuote: false,
bracketSpacing: true,
};
If contradicting options are set for both Prettier and XO, an error will be thrown.
#### Compat
If the Prettier option is set to compat, instead of formatting your code automatically, XO will turn off all rules that conflict with Prettier code style and allow you to pass your formatting to the Prettier tool directly.
$3
Type: boolean\false
Default:
Adds eslint-plugin-react, eslint-plugin-react-hooks, and eslint-config-xo-react to get all the React best practices applied automatically.
TypeScript
XO will automatically lint TypeScript files (.ts, .mts, .cts, and .tsx) with the rules defined in eslint-config-xo-typescript#use-with-xo.
XO will handle the @typescript-eslint/parser project option automatically even if you don't have a tsconfig.json in your project.
You can opt out of XO's automatic tsconfig handling by specifying your own languageOptions.parserOptions.project, languageOptions.parserOptions.projectService, or languageOptions.parserOptions.tsconfigRootDir. Files in a config with these properties will be excluded from automatic tsconfig handling.
Usage as an ESLint Configuration
With the introduction of the ESLint flat config, many of the original goals of xo were brought into the ESLint core, and shareable configs with plugins became possible. Although we highly recommend the use of the xo cli, we understand that some teams need to rely on ESLint directly.
For these purposes, you can still get most of the features of xo by using our ESLint configuration helpers.
$3
The xoToEslintConfig function is designed for use in an eslint.config.js file. It is NOT for use in an xo.config.js file. This function takes a FlatXoConfig and outputs an ESLint config object. This function will neither be able to automatically handle TS integration for you nor automatic Prettier integration. You are responsible for configuring your other tools appropriately. The xo cli, will, however, handle all of these details for you.
eslint.config.js
`js
import xo from 'xo';
export default xo.xoToEslintConfig([{space: true, prettier: 'compat'}]);
`
Tips
$3
Put a xo.config.js with your config at the root and do not add a config to any of your bundled packages.
$3
To include files that XO ignores by default, add them as negative globs in the ignores option:
`js
const xoConfig = [{ignores: ['!vendor/**']}];
export default xoConfig;
`
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
- Sublime Text
- Atom
- Vim
- TextMate 2
- VSCode
- Emacs
- WebStorm
Build-system plugins
- Gulp
- Grunt
- webpack loader
- webpack plugin
- Metalsmith
- Fly
Configs
- 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
Support
Related
- 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
Badge
Show the world you're using XO → 
`md``
You can also find some nice dynamic XO badges on badgen.net.
Team
###### Former
- James Talmage
- Michael Mayer
- Mario Nebl
- Pierre Vanduynslager