云社区 博客 博客详情
云社区 博客 博客详情

利用git-hooks 使用husky+prettier+eslint+stylelint进行代码校验和格式化

SegmentFault思否 发表于 2020-11-06 00:23:08 11-06 00:23
SegmentFault思否 发表于 2020-11-06 00:23:08 2020-11-06
0
0

【摘要】 项目中需要对代码进行格式化,并且对代码进行校验。可以通过git提供的钩子在commit时可以对==git暂存区的文件==提前进行校验和格式化,如果校验不通过,则不让提交。在项目中最开始运行的时候,可以把校验规则配置的等级低一些,后续再增加校验难度。git钩子git hooks都存储在 .git/hooks文件夹,里面都是一些可执行的脚本。生成项目时,会生成一些带sample的...

项目中需要对代码进行格式化,并且对代码进行校验。可以通过git提供的钩子在commit时可以对==git暂存区的文件==提前进行校验和格式化,如果校验不通过,则不让提交。

在项目中最开始运行的时候,可以把校验规则配置的等级低一些,后续再增加校验难度。

git钩子

git hooks都存储在 .git/hooks文件夹,里面都是一些可执行的脚本。生成项目时,会生成一些带sample的文件,可以把sample去掉执行。

客户端钩子

一般比较常用到的钩子

  • pre-commit:在commit消息之前执行脚本
  • prepare-commit-msg:可以在这里执行 提交信息的模板,合并提交、压缩提交等
  • commit-msg: 对提交信息进行校验
服务端钩子
  • pre-receive:处理来自客户端的推送操作时执行
husky 和 vue-cli

husky提供了commits的各种钩子,包括pre-commit、commit-msg等。

vue-cli内置了git-hooks yorkie, yorkie是两年前从 husky 项目中fork出来的,打开可以看到yorkie已经两年没有更新了。

husky 使用

在pre-commit钩子中使用 lint-staged, lint-staged只会对git暂存区的文件进行校验。

安装相应依赖
npm install --save-dev husky lint-staged

npm i -D prettier
npm i -D eslint-plugin-prettier
npm i -D eslint-config-prettier

npm i -D eslint
npm i -D eslint-plugin-standard
npm i -D eslint-plugin-vue

npm i -D stylelint
npm i -D stylelint-scss
npm i -D stylelint-config-standard
npm i -D stylelint-config-recess-order
husky相应配置

将下面配置拷贝到package.json中

"husky": {
  "hooks": { "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{html,vue,css,scss}": [ "prettier --write", "stylelint --fix", "git add"
  ],
  "*.{js,vue}": [ "prettier --write", "eslint --fix", "git add -A"
  ]
},
Prettier配置

格式化代码,通过配置.prettierrc达到项目中使用统一格式。可以与eslint配合使用。

新建 .prettierrc文件。

{ "arrowParens": "always", "bracketSpacing": true, "endOfLine": "auto", "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxBracketSameLine": true, "jsxSingleQuote": false, "printWidth": 120, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": true, "singleQuote": false, "tabWidth": 2, "trailingComma": "es5", "useTabs": false
}

新建 .prettierignore文件, 里面填写不需要校验的文件或文件夹。

EsLint 配置

十分钟了解eslint配置 && 编写自定义eslint规则
EsLint 配置文档

Extends的规则
  • EsLint 推荐的规则:eslint:recommended, 通过使用 "extends": "eslint:recommended"来启用推荐的规则。
  • Vue文件校验的规则: plugin:vue/essential, 通过安装官方的 eslint-plugin-vue支持,它支持同时检查你 .vue 文件中的模板和脚本,增加对v-if,v-for等指令的校验等。
  • prettier校验:plugin:prettier/recommended,根据配置的prettier规则进行校验。

在项目新建 .eslintrc.js 文件。

module.exports = {
  root: true,
  env: { browser: true, node: true, es6: true,
  },
  extends: ["eslint:recommended", "plugin:vue/essential", "plugin:prettier/recommended"],
  parserOptions: { parser: "babel-eslint",
  },
  // eslint: https://eslint.org/docs/user-guide/configuring
  // "规则名": [规则值, 规则配置]
  // 关闭规则: "off"或者0
  // 在打开的规则作为警告(不影响退出代码): "warn"或者1
  // 把规则作为一个错误(退出代码触发时为1): "error"或者2
  rules: { "prettier/prettier": "warn", "arrow-parens": 0, // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "no-unused-vars": [ "off", { ignorePattern: "^_", }, ], avoidEscape: 0, "space-before-function-paren": 0, "generator-star-spacing": 0, semi: [0], indent: ["off", 2], "no-multi-spaces": "warn", "no-prototype-builtins": "warn", "no-undef": "warn", "prefer-const": 0, "key-spacing": [ 0, { singleLine: { beforeColon: false, afterColon: true, }, multiLine: { beforeColon: true, afterColon: true, align: "colon", }, }, ],
  },
};

新建 .eslintignore文件, 里面填写不需要校验的文件或文件夹。

node_modules
/dist
StyleLint 配置

新建 .stylelintrc.js

module.exports = {
  extends: ["stylelint-config-standard", "stylelint-config-recess-order"],
  plugins: ["stylelint-scss"],
  defaultSeverity: "warning",
  rules: { // 校验规则略
  },
};

新建 .stylelintignore文件, 里面填写不需要校验的文件或文件夹。

效果

image

格式化工具
  • vscode vue-format, 对包含jsx语法的文件支持度不好,不能配合git钩子进行校验,其它不错,可以支持按照标签属性个数进行格式化。
  • vscode prettier

vscode vue模板使用vetur,setting中有个template选项,vetur.validation.template为true时会自动使用 eslint-plugin-vue校验。

参考

文章来源: segmentfault.com,作者:浮生如斯,版权归原作者所有,如需转载,请联系作者。

原文链接:segmentfault.com/a/1190000037727080

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您没有权限执行当前操作

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消