Articles19
Tags0
Categories0

使用ESLint 、prettier、husky、lint-staged实现半自动化构建代码

1.关于半自动化构建代码的实现过程:

-> 待提交的代码
-> git add 添加到暂存区
-> 执行 git commit
-> husky注册在git pre-commit的钩子调起 lint-staged
-> lint-staged 取得所有被提交的文件依次执行写好的任务(ESLint 和 Prettier)
-> 如果有错误(没通过ESlint检查)则停止任务,等待下次commit,同时打印错误信息
-> 成功提交

2.介绍一下husky

husky 其实就是一个为 git 客户端增加 hook 的工具。hook可以理解成当执行如git add、git commit等git操作时的回调。将其安装到所在仓库的过程中它会自动在 .git/ 目录下增加相应的钩子实现在 pre-commit 阶段就执行一系列流程保证每一个 commit 的正确性。部分在 cd commit stage 执行的命令可以挪动到本地执行,比如 lint 检查、比如单元测试。

3.安装和配置husky和hook

npm i husky lint-staged --save-dev

修改 package.json 添加 pre-commit 钩子和配置lint-staged

{
  "scripts": {
    "precommit": "lint-staged"
  }
  "lint-staged": {   // lint-staged 配置
        "eslint --fix --ext .js",
        "prettier --write",
        "git add"
        ]
    },
}

lint-staged 的配置是:在 git 的待提交的文件中,在 app 目录下的所有 .js .jsx 都要执行三条命令。Lint-staged保证只对当前add到git stage区的文件进行扫描操作.

在进行git commit的时候回触发到git hook进而执行precommit,而precommit脚本引用了lint-staged配置表明只对git add到stage区的文件进行扫描,具体lint-staged做了三件事情:1. 执行eslint –fix操作,进行扫描,若发现工具可修复的问题进行fix;2. 执行prettier脚本,这是对代码进行格式化的,3. 上述两项任务完成后对代码重新add。

4.关使用prettier和ESLint:https://zzjshuo.club/2019/08/24/Prettier/

5.可以初始化ESLint

node_modules/.bin/eslint --init

生成配置文件.eslintrc.json(大体如下):

{
    "env": { 
        "browser": true,
        "commonjs": true,
        "es6": true
    },
/*因为前端使用的React框架,eslint会对React等变量进行扫描会报出no-undefined的error,需要另其为global变量才能避开扫描。*/
    "globals":{
    "React":"readable"
    },
    "extends": ["eslint-config-ali","prettier", "plugin:prettier/recommended"],
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": ["prettier"],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

调试配置

配置肯定是不能拿来就用的,推荐先就只使用 eslint:recommended 版本。

参考链接:

https://blog.csdn.net/u011521203/article/details/87546146

https://segmentfault.com/a/1190000009546913

https://www.jianshu.com/p/cdd749c624d9

Author:shuo
Link:http://yoursite.com/2019/08/24/调试配置/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可