npm package: @nake/eslint-config
Description: Eslint shareable config for your nake apps
Author: Richie Zhu
Latest version: 1.3.1

# @nake/eslint-config

> Eslint shareable config for your nake apps

This ESLint config is extended from both [airbnb](https://github.com/airbnb/javascript) and [prettier](https://prettier.io/) styles. It uses [eslint-plugin-compat](https://github.com/amilajack/eslint-plugin-compat) plugin for browser compatibility linter. It provides six extend options for different environment.

## Installation

```bash
# 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.

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

### ES2015+ Base

For vanilla javascript project with no framework.

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

### React

For react project, the same as default config.

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

### Wxapp (微信小程序)

For wechat miniProgram project.

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

_This environment can't support browser compatibility linter_

### Node

For Node.js project.

```json
{
  "extends": ["@nake/eslint-config/node"]
}
```

_It recommends a use of [the "engines" field of package.json](https://docs.npmjs.com/files/package.json#engines). 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](https://webpack.js.org/configuration/resolve/#resolve-alias) feature, eslint can't lint import path correctly, you should extends webpack settings.

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

### With babel-plugin-module-resolver

If you use [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver) to setup a custom alias for directories, specific files, or even other npm modules, you should extends babel settings.

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

### With Jest

For react or base web project with jest testing framework.

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

## Browser compatibility linter

First, add browsers that we support in your `package.json` or config file that [browserslist](https://github.com/browserslist/browserslist) supports.

```json
{
  "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](https://caniuse.com/#feat=fetch) and [promises](https://caniuse.com/#feat=promises)):

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

```bash
yarn add whatwg-fetch es6-promise
```

```json
{
  "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.

```json
{
  "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.

```jsonc
{
  "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.:

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

## Bonus

- Best practices for promises with [eslint-plugin-promise](https://github.com/xjamundx/eslint-plugin-promise)
- Consistent ES6 class member order [eslint-plugin-sort-class-members](https://github.com/bryanrsmith/eslint-plugin-sort-class-members)
- Security linter with [eslint-plugin-security](https://github.com/nodesecurity/eslint-plugin-security)

## Extend

You can override any rules with your own prefs.

## License

MIT