eslint shareable configs / split

[orlin]

Because the react plugin / jsx rules aren't optional with this style-guide, I found out there is an official way for sharing eslint configs. The "standard" style, with standard-react, makes a good example of splitting eslint rules. Not all js is front-end, and using react...

[justjake]

Ok, sounds good. I will try to move React styleguide options from eslint-config-airbnb to eslint-config-airbnb-react next week. I'm also planning to do an audit of the .eslintrc to make sure it conforms with both the letter and the spirit of the styleguide.

@goatslacker @hshoff should we have 3 separate ESlintrcs? eslint-config-airbnb, eslint-config-airbnb-es6, eslint-config-airbnb-react? I would prefer not to split out the ES6 rules since those are considered part of the core style guide, but I'm up for discussion on the matter. I would prefer to only maintain two, eslint-config-airbnb and eslint-config-airbnb-react.

[goatslacker]

+1 on just two. We can have a third es5 only if people really want that but since ES2015 is a final draft and its actual JS now I vote we move forward with no distinction between the two.

[ljharb]

The spec being finalized is not the same as being free to use ES6 sans transpilation - ES5 was finalized in 2009 and it wasn't safe to use getters/setters for many many years. I'd prefer have an ES5 one as well for those who don't wish to use babel, and wish to support browsers.

[baer]

Hey guys, we (walmartlabs) have been grappling with updating our ESLint config as well. Especially making sure that it works in multiple environments (ES5, ES6, React, Node, Browser, Test etc.) and we decided to take the same approach and split our config out into an ES5 base + extensions. It's been working out well so far.

We also had issues with protecting CI from new rules that get turned on when we update ESLint and maintaining the giant YAML files so we created eslint-config-defaults. It starts with a reset where everything is off (this will be default in the upcoming ESLint 1.x anyway) then builds up config with composable rule sets using ESLint's sharable config.

So far we have WalmartLabs configs, the default set from ESLint and a (decomposed) copy of your eslintrc file. I'd love to work together if you are interested in trying to follow a similar path. Ultimately we'd like to try to provide more premade, robust and easily consumable configs available to the community. It would be great to have something akin to the JSCS Presets at some point.

Either way, I thought I'd point the conversation towards an example that has been working well :)

Thanks for putting this guide together by the way, I've been using chunks of it in personal projects for a few years now. Awesome work!

[hshoff]

As long as we're supporting the ES5 guide we should provide a working eslint config as well.

Similiar to how @baer is doing it, I like how @segmentio is handling this: https://github.com/segmentio/eslint-config

[baer]

That would be rad. One thing to note is that ESLint merges the user defined config with their default config whether you like it or not so the config as read by eslint might not be an exact match to what you give it unless you define all of the properties.

As a part of my project I took the config you have here and did that merge before I divided it up so if you want to break stuff apart you could consider copying/forking/whatever-ing what I have since it may be duplicate work in some areas.

[thefotios]

Has there been any update on this front? We (Shutterstock) are looking to adopt this styleguide, but have a mix of ES6/5 and would like to use the same styleguide. If nobody has taken a try at it, I can give it a go and submit a PR.

[nkbt]

@thefotios have you tried eslint-config-airbnb?

npm install -SD eslint-config-airbnb

In .eslintrc

{
  "extends": "eslint-config-airbnb"
}

For different code in different subfolders just create separate .eslintrc files with different rules.

[thefotios]

@nkbt Yea, it definitely works just fine, but we're running into issues with some rules not being applicable to ES5, like no-var. It might make sense to have a "base" ruleset that just has style rules, then an ES5 ruleset that extends that, and an ES6 ruleset that extends either of those, and so on for browser, react, whatever.

Not entirely sure how the extends works under the hood with eslint, but if it is just requiring the extends value, then this would work.

Module structure:

.
├── index.js
└── versions
    ├── browser
    │   └── index.js
    ├── es6
    │   └── index.js
    └── react
        └── index.js

.eslintrc

{
  "extends": "eslint-config-airbnb/versions/browser"
}

Theoretical eslint logic

var rcFile = require(".eslintrc");
var baseRules = require(eslintrc.extends);
// require "package/foo" overrides the module's "main" and looks for an "index.js" in that dir

[nkbt]

@thefotios I see what you mean... You can create additional config overriding some rules for es5 (will be quite short, and then use it for your legacy folder. So you just keep airbnb as the core one, and override rules for es5-one.

In my projects I have 3 configs: main for actual js code, one for tests, one for nodejs/configs. You can check it for example in https://github.com/nkbt/react-component-template (though I don't use airbnb because I want much higher strictness and include all supported eslint rules).

[thefotios]

@nkbt Thanks, that is the approach we're taking for now.

In case anybody is still following this, doing an extends: package/foo works as I theorized in a previous post. Even better those can extend the base eslint config for the package as exposed via the package.json's main directive.

{
  "main": "es6/index.js"
}

// airbnb/es6/index.js
module.exports = {
  rules: {
     // babel inserts "use strict"; for us
    strict: [2, "never"],
  }
}

Then we could make the es5 version, es5/index.js. This will work because the extends is evaluated at run time, so it's not a circular reference to its own package.

// airbnb/es5/index.js
module.exports = {
  extends: "airbnb",
  rules: {
    // We always want strict and we don't have babel to help us :(
    strict: [2, "global"] 
  }
}

[nkbt]

👍

[brettstack]

How about creating the separate configs as suggested (es5, es6, react) and extend using multiple extends http://eslint.org/docs/user-guide/configuring.html#extending-configuration-files. So put all the core rules in es5 (I assume most people are stuck on this), and then have the es6 and react configs override/add the necessary rules. So the consumer .eslintrc files will look like:

For es5:

extends:
  - eslint-config-airbnb

For es6:

extends:
  - eslint-config-airbnb
  - eslint-config-airbnb-es6

For react:

extends:
  - eslint-config-airbnb
  - eslint-config-airbnb-react

For es6+react:

extends:
  - eslint-config-airbnb
  - eslint-config-airbnb-es6
  - eslint-config-airbnb-react

[ljharb]

That is an excellent idea because it would also illustrate what additions and changes there are between the spec versions, and react.

I'm pretty sure that es6 itself could extend the es5 one, so that consumers wouldn't need to stack them - ie, each one could handle its own dependencies.

[baer]

I've already done the bulk of that for you if you'd like to use it. I just updated to ESLint 1.0.0 + AirBnB 0.0.7 this week so you should be able to just take it as is.
https://github.com/walmartlabs/eslint-config-defaults/blob/master/configurations/airbnb.js

You should check out how WalmartLabs does config for an example of how configs can be composed
https://github.com/walmartlabs/eslint-config-defaults/tree/master/configurations/walmart