vue，react 配置 commitlint 和 eslint 钩子

chemzqm 发布于2019-08-23 10:26 / 1874人阅读

摘要：官网仓库仓库中文官网一配置搭配的钩子后，每次提交版本信息的时候，会根据配置的规则进行校验，若不符合规则会失败，并提示相应信息。添加字段的配置跳过校验使用指令可以跳过检验规则代码规范强制提交测试

关于 commitlint, husky, eslint 的具体信息可以见官网。

commitlint: 官网, github 仓库

husky： github 仓库

eslint 中文官网

一、配置 commitlint

commitlint 搭配 husky 的 commit message 钩子后，每次提交 git 版本信息的时候，会根据配置的规则进行校验，若不符合规则会 commit 失败，并提示相应信息。
1. 安装 commitlint husky 依赖

npm install --save-dev @commitlint/{cli,config-conventional}
npm install --save-dev husky@next  # 安装最新版，就不用配置 scripts 脚本了

2. 新建 commitlint.config.js 文件

module.exports = {
    extends: ["@commitlint/config-conventional"]
};

commitlint.config.js 配置文件可以添加自己的规则，这里 @commitlint/config-conventional 提供了官方的规则扩展：

build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
docs：文档更新
feat：新增功能
merge：分支合并 Merge branch ? of ?
fix：bug 修复
perf：性能, 体验优化
refactor：重构代码(既没有新增功能，也没有修复 bug)
style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
test：新增测试用例或是更新现有测试
revert：回滚某个更早之前的提交
chore：不属于以上类型的其他类型

3. 配置 package.json 文件
添加 husky 字段

"husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },

4. 测试

git add .
git commit -m "foo: this will fail"

配置 eslint 钩子

添加 husky 的 pre-commit 的钩子，husky 会在你每次提交 commit 之前使用 eslint 校验代码规范，不符合规则会提交失败会打印出校验信息。
添加 husky 字段的配置

"husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS",
      "pre-commit": "eslint "src/**/*.{js,ts,vue}""
    }
  },

- 跳过校验
使用 --no-verify 指令可以跳过检验规则

git add . && git commit --no-verify -m "代码规范强制提交测试"

GPU云服务器云服务器 commitlint ESLint webrtc和vue 键盘钩子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96334.html

工程搭建---代码风格统一

摘要：为此我们需要安装这个是用于提交代码的钩子函数安装完之后，我们就需要在增加运行钩子函数。等钩子函数这样就简单的成功对代码进行效验了，当然这边更进一步的可以使用这个可以将取得所有被提交的文件依次执行写好的任务。一个项目是会有多个成员来开发的，因此统一开发规范是很有必要的，不然每个人都有自己的风格，同步之后代码都会报错。我这边是用Vscode编译器的。首先用vue-cli3.0创建一个工...

levius 2019-08-23 16:05 评论0 收藏0
Lint Your Code

摘要：形成良好统一的代码规范，有利于提高代码的可读性，减少潜在的错误，便于团队协作开发。其中是可选的，如果没有则禁用所有规则，如果有则禁用所有规则。也可以定义一个命令同时运行这两个命令，我在这里使用了我们定义了在钩子触发时会执行命令。形成良好统一的代码规范，有利于提高代码的可读性，减少潜在的错误，便于团队协作开发。本文简单介绍JS、CSS、 Git Commit 的规范工具及用法。 Lin...

hidogs 2019-08-23 10:27 评论0 收藏0
vue控件库环境搭建(1)--统一打包

摘要：当然如果使用的话，使用来效验提交的代码最后，需要修改演示环境在该环境下创建一个文件这边主要和英文版中文版框架库框架库选择语言简体中文主页面配置别名路径配置别名路径背景：为了避免重复造轮子，很有必要开发一个通用组件库，方便重复利用。本文是采用vue-lic3.0脚手改造而成的，使用vuepress作为演示环境。首先通过vue脚手架生产目录如下： showImg(https://seg...

Scorpion 2019-08-23 15:56 评论0 收藏0
vue控件库环境搭建(1)--统一打包

摘要：当然如果使用的话，使用来效验提交的代码最后，需要修改演示环境在该环境下创建一个文件这边主要和英文版中文版框架库框架库选择语言简体中文主页面配置别名路径配置别名路径背景：为了避免重复造轮子，很有必要开发一个通用组件库，方便重复利用。本文是采用vue-lic3.0脚手改造而成的，使用vuepress作为演示环境。首先通过vue脚手架生产目录如下： showImg(https://seg...

freecode 2019-08-02 14:32 评论0 收藏0
前端代码风格自动化系列（五）之共同出击

摘要：我们在前面的四篇中介绍了这些工具，可以完成以最小的代价在提交到远程仓库前，格式化为统一风格的代码，大家都很熟悉这里就不列举了。下面举一个配置。这里对于项目里分别做了提交前格式化操作，对于提交规范做了校验。我们在前面的四篇中介绍了husky、commitlint、lint-staged、prettier这些工具，可以完成以最小的代价在Git提交到远程仓库前，格式化为统一风格的代码，es...

pumpkin9 2019-08-23 14:33 评论0 收藏0