This package has been deprecated

Author message:

This package has been renamed to eslint-config-laozhu, install using new package instead.

eslint-config-nake-app

Naked eslint shareable config for web apps

Deprecation notice: we have moved to @nake/eslint-config

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 eslint-config-nake-app
 
# Install with yarn 
$ yarn add --dev eslint-config-nake-app
$ 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 or the eslintConfig entry of package.json file.

Default

For react project.

{
  "extends": ["nake-app"]
}

ES5 legacy

For old ES5 project.

{
  "extends": ["nake-app/legacy"]
}

ES2015+ Base

For vanilla javascript project with no framework.

{
  "extends": ["nake-app/base"]
}

React

For react project, the same as default config.

{
  "extends": ["nake-app/react"]
}

Vue

For Vue project

{
  "extends": ["nake-app/vue"]
}

Wxapp (微信小程序)

For wechat miniProgram project.

{
  "extends": ["nake-app/wxapp"]
}

This environment can't support browser compatibility linter

Node

For Node.js project.

{
  "extends": ["nake-app/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-app", "nake-app/webpack"]
}

With Jest

For react or base web project with jest testing framework.

{
  "extends": ["nake-app", "nake-app/jest"]
}

With Immutable JS

For project which disabled all mutation in JS.

{
  "extends": ["nake-app", "nake-app/immutable"]
}

With Functional Programming

For project with fp style.

{
  "extends": ["nake-app", "nake-app/fp"]
}

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

Work with VS Code

Share my VS Code settings for ESLint with autoFixOnSave feature.

{
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,
  "eslint.packageManager": "yarn",
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    { "language": "vue", "autoFix": true },
    { "language": "wxs", "autoFix": true }
  ]
}

TODO

• TypeScript lint with ESLint (no more tslint)

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