# eslint-config-nake-app

> Naked eslint shareable config for web apps

**Deprecation notice: we have moved to [@nake/eslint-config](https://www.npmjs.com/package/@nake/eslint-config)**

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 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.

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

### ES5 legacy

For old ES5 project.

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

### ES2015+ Base

For vanilla javascript project with no framework.

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

### React

For react project, the same as default config.

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

### Vue

For Vue project

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

### Wxapp (微信小程序)

For wechat miniProgram project.

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

_This environment can't support browser compatibility linter_

### Node

For Node.js project.

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

### With Jest

For react or base web project with jest testing framework.

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

### With Immutable JS

For project which disabled all mutation in JS.

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

### With Functional Programming

For project with fp style.

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

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

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

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