@nake/eslint-config

Eslint shareable config for your nake apps

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

Installation

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

# Install with yarn
$ yarn add --dev @nake/eslint-config
$ yarn add --dev prettier eslint babel-eslint
$ yarn add --dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

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

Usage

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

Default

For react project.

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

ES2015+ Base

For vanilla javascript project with no framework.

{
  "extends": ["@nake/eslint-config/base"]
}

React

For react project, the same as default config.

{
  "extends": ["@nake/eslint-config/react"]
}

Wxapp (微信小程序)

For wechat miniProgram project.

{
  "extends": ["@nake/eslint-config/wxapp"]
}

This environment can't support browser compatibility linter

Node

For Node.js project.

{
  "extends": ["@nake/eslint-config/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

With Webpack

For project built with webpack, if you are using resolver.alias feature, eslint can't lint import path correctly, you should extends webpack settings.

{
  "extends": ["@nake", "@nake/eslint-config/webpack"]
}

With babel-plugin-module-resolver

If you use babel-plugin-module-resolver to setup a custom alias for directories, specific files, or even other npm modules, you should extends babel settings.

{
  "extends": ["@nake", "@nake/eslint-config/babel"]
}

With Jest

For react or base web project with jest testing framework.

{
  "extends": ["@nake", "@nake/eslint-config/jest"]
}

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": ["@nake"],
  "settings": {
    "polyfills": ["fetch", "promises"]
  }
}

eslintConfig in package.json

I like moving .eslintrc.json 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; exit 0",
    "eslint:fix": "eslint src --ext .js --fix; exit 0"
  },
  "eslintConfig": {
    "extends": ["@nake"],
    "settings": {
      "polyfills": ["fetch", "promises"]
    }
  }
}

Work with VS Code

Share my VS Code settings for ESLint with autoFixOnSave feature.

{
  "editor.formatOnSave": true,

  // ESlint
  "eslint.packageManager": "yarn",
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "vue", "autoFix": true },
    { "language": "wxs", "autoFix": true }
  ]

  // Prettier
  "prettier.eslintIntegration": true,
}

Configure the path mapping in jsconfig.json, e.g.:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Bonus

• Best practices for promises with eslint-plugin-promise
• Consistent ES6 class member order eslint-plugin-sort-class-members
• Security linter with eslint-plugin-security

Extend

You can override any rules with your own prefs.

License

MIT