@pubean/eslint-config

ESLint shareable config for Pubean Inc.

This ESLint config is extended from both airbnb and prettier styles. It uses eslint-plugin-compat plugin for browser compatibility linter. It provides four extend options for different environment.

Installation

# Install with npx
$ npx install-peerdeps --dev @pubean/eslint-config

# Install with yarn
$ yarn add --dev @pubean/eslint-config
$ yarn add --dev babel-eslint eslint prettier eslint-plugin-compat eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-security

Use npx to install peerdeps automatically or install peerDependencies with npm/yarn manually.

Usage

After installation, add following contents to your .eslintrc or the eslintConfig entry of package.json file.

Default

For react project.

{
  "extends": ["@pubean"]
}

ES5 legacy

For old ES5 project.

{
  "extends": ["@pubean/legacy"]
}

ES2015+ Base

For vanilla javascript project with no framework.

{
  "extends": ["@pubean/base"]
}

React

For react project, the same as default config.

{
  "extends": ["@pubean/react"]
}

Wxapp (微信小程序)

For wechat miniProgram project.

{
  "extends": ["@pubean/wxapp"]
}

This environment can't support browser compatibility linter

Node

For Node.js project.

{
  "extends": ["@pubean/node"]
}

It recommends a use of the "engines" field of package.json. The "engines" field is used by node/no-unsupported-features/* rules.

This environment can't support browser compatibility linter

Browser compatibility linter

First, add browsers that we support in your package.json or config file that browserslist supports.

{
  "browserslist": [
    "defaults",
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not ie <= 9",
    "not op_mini all"
  ]
}

Second, ESLint will linter your code with predefined browserslist automatically. It will shot an error message to tell you which feature have not be well supported by these browsers (e.g. fetch and promises):

Finally, after install these polyfills, we should add them to whitelist to prevent ESLint shotting error message again.

yarn add whatwg-fetch es6-promise

{
  "extends": ["@pubean"],
  "settings": {
    "polyfills": ["fetch", "promises"]
  }
}

eslintConfig in package.json

I like moving .eslintrc and .eslintignore file from project root to package.json, this makes my project cleaner. If you want to respect .gitignore as eslintIgnore, make your eslint script with --ignore-path .gitignore is a good idea.

{
  "scripts": {
    "eslint": "eslint src --ext .js --ignore-path .gitignore; exit 0",
    "eslint:fix": "eslint src --ext .js --ignore-path .gitignore --fix; exit 0"
  },
  "eslintConfig": {
    "extends": ["@pubean"],
    "settings": {
      "polyfills": ["fetch", "promises"]
    }
  }
}

Bonus

• Best practices for promises with eslint-plugin-promise
• Jest testing linter with eslint-plugin-jest
• Security linter with eslint-plugin-security

Extend

You can override any rules with your own prefs.

License

MIT