Custom ESLint Rules for Sift Science

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-sift:

$ npm install eslint-plugin-sift --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-sift globally.

Add sift to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "sift"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "sift/rule-name": 2
    }
}

This plugin includes slight variations on three existing ESLint rules to better support Sift Science's front-end rules:

• array-element-newline:

  Whereas the original rule's {multiline: true} option only checks for newlines within array elements, this rule also checks for newlines between elements. Therefore, all of the following are valid:

  var foo = [1, 2, 3];
  
  var foo = [
    somethingReallyLog,
    letsPretendThatIfAllEntriesWereOnOneLineTheyWouldPassOurMaxLen,
    puppies
  ];
  
  var foo = [
    oneEntry
      .thatIsAlsoMultiLine()
   ];

  (original rule)

• function-paren-newline:

  Whereas the original rule's multiline option checked for newlines between function parameters, this rule also checks for newlines within function parameters. It also fallsback to consistent behavior if there is just a single parameter or if any of the parameters are node types that generally look good not forced onto new lines, like objects/arrays/functions blocks. So all of the following are valid:

  bar(shortParam1, shortParam2);
  
  bar(reallyLongParamOnOneLine);
  bar(
    reallyLongParamOnOneLine
  );
  bar(
    reallyLongParam
      .thatGoesMultipleLines()
  );
  bar(
    reallyLongParam
      .thatGoesMultipleLines(),
    withASecondParam
  );
  
  window.setTimeout(() => {
    console.log('foo');
    baz();
  }, 5000);
  
  bar(
    <MyComponent
      isLong
      requiresManyProps={42}
    />
  );
  
  bar('foo', {
    imAn: 'object',
    whatAn: 'object'
  });
  
  bar([
    'im an array entry',
    'me too'
  ], 'foo');

  (original rule)

• space-infix-ops:

  This follows the original rule of requiring spaces around operators, but adds the exception of default paramters. So all the following are valid:

  var foo = 'bar';
  
  noah = noah   1;
  
  function returnName(name='noah') {
    return name;
  }

  This follows some lengy discussions that ended up with this not being implemented in ESLint.

  (original rule)

• jsx-handler-names:

  The original rule allowed for any prop with the configured prefix (default on) to have a function prop that also started with on, which led to some undesirable linting errors for unreserved React events:

  // error!!
  <Child onPaginate={this.changePage} />

  These kinds of errors are troublesome because they require you to go up and down the component chain to change values for our made-up props. Our version of this rule only checks for reserved React events:

  // nobody cares
  <Child onPaginate={this.changePage} />
  
  // error!
  <Child onClick={this.clickChangePage} />
  
  // all good
  <Child onClick={this.onClickChangePage} />
  <Child onClick={this.props.onClickChangePage} />

  This rule only takes one option, eventHandlerPrefix, which defaults to on, and governs prefixes for both component instance methods as well as component prop methods, which are both within the control of that component.

  (original rule)

To add a rule to this repo, you'll need to make two files:

1. The rule itself: /lib/rules/<rule_name>.js (more info)
2. A test file for the rule: /tests/lib/rule/<rule_name>.js (more info)

To run tests, just run:

$ npm test