使用husky和lint-staged实现代码上传自动格式化·

在团队开发中,不一定所有人的代码都是符合规范的,为了统一代码格式的一致性,可借鉴的方法就是在提交代码库时进行eslint的校验和自动格式化……

借助第三方插件进行格式化

  • husky 提交git仓库钩子,在触发提交状态时运行指定的命令
  • lint-staged 通过限定需要格式化的文件范围
  • eslint 通过指定代码规范检查代码的优雅度
  • prettier 直接格式化代码

配置过程

  1. 安装对应的npm插件 eslint需要版本在5.8.0以上

    npm i husky lint-staged prettier eslint eslint-plugin-prettier --save 
    
  1. 配置package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
……
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**": [ //限定检测文件的位置范围
"prettier --write", // prettier 格式化
"eslint --fix", // eslint检测修复
"git add -n" //继续git流程
]
},
……

2020年7月2日(改)

由于上面代码会直接匹配css文件,如果你css文件中有@import,那么eslint就会自动匹配到import关键字,从而报错

报错信息
1
2
× eslint --fix:
1:2 error Parsing error: Unexpected keyword 'import'

修改配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
……
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.+(scss|css)": [ //匹配css文件,只格式化,不做eslint校验,如果有stylelint也可以用stylelint进行格式化
"prettier --write",
"git add -n"
],
"src/**/*.+(js|vue|)": [ // 匹配js文件,使用eslint进行校验
"prettier --write",
"eslint --fix",
"git add -n"
]
},
……
  1. 新建或配置.eslintrc.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    module.exports = {

    .....

    plugins: ['vue','prettier'], // 引用eslint-plugin-vue eslint-plugin-prettier 插件

    extends: ["eslint:recommended","plugin:vue/recommended"], // 引入eslint配置和eslint-plugin-vue的推荐配置(vue组件使用)

    .....


    }

以上,所有配置已完成,当触发git提交事件后,代码就会自动格式化之后在提交,入过eslint检测不通过,就会报错并中断提交