Giter VIP home page Giter VIP logo

xo-1's Introduction


XO


JavaScript happiness style linter ❤️

Build Status: Linux Build status: Windows Coverage Status XO code style

Enforce strict code style. Never discuss code style on a pull request again!

No decision-making. No .eslintrc or .jshintrc to manage. It just works!

Uses ESLint underneath, so issues regarding rules should be opened over there.

JSX is supported by default, but you'll need eslint-config-xo-react for React specific linting.

Install

$ npm install --global xo

Usage

$ xo --help

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

  Options
    --init          Add XO to your project
    --fix           Automagically fix issues
    --reporter      Reporter to use
    --stdin         Validate code from stdin
    --esnext        Enforce ES2015+ rules
    --env           Environment preset  [Can be set multiple times]
    --global        Global variable  [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
    --plugin        Include third-party plugins  [Can be set multiple times]
    --extend        Extend defaults with a custom config  [Can be set multiple times]
    --open          Open files with issues in your editor
    --quiet         Show only errors and no warnings

  Examples
    $ xo
    $ xo index.js
    $ xo *.js !foo.js
    $ xo --esnext --space
    $ xo --env=node --env=mocha
    $ xo --init --esnext
    $ xo --plugin=react

  Tips
    Put options in package.json instead of using flags so other tools can read it.

Note that the CLI will use your local install of XO when available, even when run globally.

Default code style

Any of these can be overridden if necessary.

  • Tab indentation (or space)
  • Semicolons
  • Single-quotes
  • 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 $ xo --init (with any options) to add XO to your package.json or create one.

Before

{
  "name": "awesome-package",
  "scripts": {
    "test": "ava"
  },
  "devDependencies": {
    "ava": "^0.11.0"
  }
}

After

{
  "name": "awesome-package",
  "scripts": {
    "test": "xo && ava"
  },
  "devDependencies": {
    "ava": "^0.11.0",
    "xo": "^0.12.0"
  }
}

Then just run $ npm test and XO will be run before your tests.

Config

You can configure some options in XO by putting it in package.json:

{
  "name": "awesome-package",
  "xo": {
    "esnext": true
  }
}

Globals and rules can be configured inline in files.

esnext

Type: boolean
Default: false

Enforce ES2015+ rules. Enabling this will prefer ES2015+ syntax and conventions.

ES2015+ is parsed even without this option. You can already use ES2016 features like async/await and decorators. For a full list of features see Babel's experimental features and their Learn ES2015.

envs

Type: array
Default: ['node']

Which environments your code is designed to run in. Each environment brings with it a certain set of predefined global variables.

globals

Type: array

Additional global variables your code accesses during execution.

ignores

Type: array

Some paths are ignored by default. 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".

rules

Type: object

Override any of the default rules. See the ESLint docs for more info on each rule.

Please take a moment to consider if you really need to use this option.

semicolon

Type: boolean
Default: true (semicolons required)

Set it to false to enforce no-semicolon style.

plugins

Type: array

Include third-party plugins.

extends

Type: array, string

Use one or more shareable configs to override any of the default rules (like rules above).

Config Overrides

XO makes it easy to override configs for specific files. The overrides property must be an array of override objects. Each override object must contain a files property which is a glob string, or an array of glob strings. The remaining properties are identical to those described above, and will override the settings of the base config. If multiple override configs match the same file, each matching override is applied in the order it appears in the array. This means the last override in the array takes precedence over earlier ones. Consider the following example:

{
  "xo": {
    "semicolon": false,
    "space": 2,
    "overrides": [
      {
        "files": "test/*.js",
        "esnext": true,
        "space": 3
      },
      {
         "files": "test/foo.js",
         "esnext": false
      }
    ]
  }
}
  • The base configuration is simply space: 2, semicolon: false. These settings are used for every file unless otherwise noted below.

  • For every file in test/*.js, the base config is used, but space is overridden with 3, and the esnext option is set to true. The resulting config is:

{
  "esnext": true,
  "semicolon": false,
  "space": 3
}
  • For test/foo.js, the base config is first applied, followed the first overrides config (its glob pattern also matches test/foo.js), finally the second override config is applied. The resulting config is:
{
  "esnext": false,
  "semicolon": false,
  "space": 3
}

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

Vim

You can use Syntastic's ESLint checker with the following settings in your .vimrc file:

let g:syntastic_javascript_eslint_generic = 1
let g:syntastic_javascript_eslint_exec = 'xo'
let g:syntastic_javascript_eslint_args = '--reporter=compact'
let g:syntastic_javascript_checkers = ['eslint']

Build-system plugins

Configs

Related

Badge

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

[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)

Team

Sindre Sorhus James Talmage
Sindre Sorhus James Talmage

License

MIT © Sindre Sorhus

xo-1's People

Contributors

sindresorhus avatar jamestalmage avatar kevva avatar joakimbeng avatar abhisekp avatar antleblanc avatar arthurvr avatar blainsmith avatar brandon93s avatar beatfreaker avatar claylo avatar dustinspecker avatar jfmengels avatar lukeed avatar rosszurowski avatar samverschueren avatar ntwb avatar sterpe avatar floatdrop avatar j-em avatar

Watchers

程泽赫 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.