文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. init
    2. 2.2. dependence
    3. 2.3. extends: airbnb
    4. 2.4. parser: babel-eslint
    5. 2.5. with webpack
    6. 2.6. Lint with scripts
    7. 2.7. eslint-plugin-react
    8. 2.8. rules
    9. 2.9. prettier
  3. 3. Reference

Defined

new front chains - 3 ESLint and Prettier

Env: npm5.x

Main()

init

npm init
eslint init or use gist file downbelow

dependence

npm –save-dev install eslint eslint-loader

extends: airbnb

  • install(npm5+) airbnb-extends

    npx install-peerdeps –dev eslint-config-airbnb

  • .eslintrc

    1
    2
    3
    4
    5
    {
    ...
    "extends": "airbnb",
    ...
    }

and it may be too strict, so, I’ll use eslint:recommended instead.

parser: babel-eslint

for ES6 support

  • install

    npm install –save-dev babel-eslint

  • .eslintrc

    1
    2
    3
    4
    5
    {
    ...
    parser: "babel-eslint",
    ...
    }

with webpack

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
// ...
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
},
],
},
// ...
}

Lint with scripts

package.json

1
2
3
4
5
"scripts": {
// lint all js file in src folder
"lint": "eslint --ext .js src"
"lint-fix": "eslint --fix --ext .js src"
}

eslint-plugin-react

this will auto install when you initial eslint with react option

rules

propTypes js 类型检测(type detection)

prettier

maybe update lately, here is the link

Reference

文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. init
    2. 2.2. dependence
    3. 2.3. extends: airbnb
    4. 2.4. parser: babel-eslint
    5. 2.5. with webpack
    6. 2.6. Lint with scripts
    7. 2.7. eslint-plugin-react
    8. 2.8. rules
    9. 2.9. prettier
  3. 3. Reference