eslint-config-wpvip v0.0.1

Overview

ESLint configs to enforce VIP's (internal) JS coding standards

Installation

To add eslint-config-wpvip to you project, first install it to package.json (not yet published to NPM):

"devDependencies": {
  ...
  "eslint-config-wpvip": "github:automattic/eslint-config-wpvip#6b5993b",
  ...
}

And install the required dependencies:

npm i --save-dev babel-eslint@10 eslint@4 eslint-plugin-flowtype@3 eslint-plugin-import@2 eslint-plugin-jsx-a11y@6 eslint-plugin-react@7 eslint-plugin-wpcalypso@4 eslint-plugin-json@1

Then in your package.json, add:

"eslintConfig": {
  "extends": "wpvip"
}

And that's it! Editors that are configured to work with eslint will automatically pick up the rulesets and flag any errors or warnings.

To run eslint manually (or as part of automated tests), simply run:

./node_modules/eslint/bin/eslint.js .

Or, the preffered way is to setup a lint npm script. Back in package.json:

"scripts": {
  "lint": "eslint .",
  "test": "npm run lint"
}

Migrating

Changing linter rules can be tricky and lead to huge PRs. To ease adoption, we can add eslines to our project, to turn lint errors into warnings.

npm i --save-dev eslines

Add the default .eslines.json to your project root:

{
    "branches": {
        "default": ["downgrade-unmodified-lines"]
    },
    "processors": {
        "downgrade-unmodified-lines": {
            "remote": "origin/master",
            "rulesNotToDowngrade": ["no-unused-vars"]
        }
    }
}

Then modify the npm run lint command to pass through to eslines:

"scripts": {
  "lint": "eslint -f json . | eslines"
}

Errors will still appear in any code editor that supports eslint, but tests will continue to pass as the code is migrated to the new standard.