Eslint

第一步：

第一种：

npm install -g install-peerdeps   (全局安装install-peerdeps)
install-peerdeps --dev eslint-config-airbnb  (使用install-peerdeps来安装相应的包)

第二种：

npm install eslint --save-dev  
npm install eslint-config-airbnb --save-dev  // （airbnb的规则）  
npm install eslint-plugin-import --save-dev  
npm install eslint-plugin-jsx-a11y --save-dev  // （airbnb规则依赖于这个库）  
npm install eslint-plugin-react --save-dev

第二步：

为了兼容es6 需要安装以下包，不然箭头函数会报错

npm i --save-dev babel-eslint

第三步：

可以运行下方代码进行配置

eslint --init

也可以新建 .eslintrc.js 拷贝以下代码

{
  "extends": ["airbnb-base"],
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-uses-vars": 1,
    "react/jsx-uses-react": 1,
    "no-tabs": 0,
    "class-methods-use-this": 0,
    "import/no-unresolved": 0,
    "indent": 0,
    "comma-dangle": 0,
    "import/prefer-default-export": 0
  },
  "plugins": [
    "react"
  ],
  "globals": {
    "document": true,
    "navigator": true,
    "window":true,
    "node":true
  },
  "settings": {
    "import/resolver": {
      "node": {
         "extensions": [".js",".jsx"]
      }
    }
  }
}

第四步：

这也是最重要的一步， package 中配置 lint；在scripts中加入以下代码

"lint": "eslint --ext .js ./src --fix"

OK Eslint 目前就算配置完了，接下来是 prettier

prettier

第一步：

npm install --save-dev prettier (安装prettier)

第二步：新建 .prettierrc 文件，加入下方配置， prettierrc 配置和 Eslint(airbnb) 可能会有冲突，需要注意配置

{
  "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
  "tabWidth": 2, //一个tab代表几个空格数，默认为80
  "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  "semi": true, //行位是否使用分号，默认为true
  "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
  "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}

package -> scripts

"prettier": "prettier --write src/**/*.js"

第三步：（可忽略，也可配置）

配合onchange 可实现在本地开发的时候，保存即格式化；

npm install --save-dev onchange

package -> scripts

"dev": "webpack-dev-server & npm run format",
"format": "onchange 'src/**/*.js' 'src/**/*.jsx' 'src/**/*.scss' -- prettier --write {{changed}}"

OK ， prettier 配置好了。接下来是git hooks （Pre-commit）钩子

Pre-commit

第一步：

安装包

npm i -D husky lint-staged pretty-quick

第二步：

配置package

"scripts": {
    "precommit": "pretty-quick --staged",
},
"lint-staged": {
    "src/**/*.{js,jsx}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }

接下来

没了大佬，难道不好使吗？

npm run lint

npm run prettier

git commit -m 'msg'

是不是会提示你一大堆问题，没错，按照提示解决他，其实最主要的还是eslint 的检验配置，实在解决不掉问题，小弟给你支个招，解决不掉问题，就解决发现问题的人，哈哈哈哈哈，其实就是关掉某个检验。。。