Eslint + prettier + git hooks

1,154

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 的检验配置,实在解决不掉问题,小弟给你支个招,解决不掉问题,就解决发现问题的人,哈哈哈哈哈,其实就是关掉某个检验 。。。