脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue commit提交代码husky+lint-staged校验

vue commit提交代码husky+lint-staged进行校验

 更新时间：2026年07月30日 09:21:27   作者：周家大小姐.  
你的项目用了eslint和prettier,但commit时还能提交不规范代码？本文教你配置husky、lint-staged和commitlint,实现在git commit前自动校验代码格式和提交信息,拒绝不规范提交,提升团队协作效率

需求

项目中用到了eslint+prettier对格式及语法校验但是commit的时候还是可以正常提交,所以需要用到一些插件来解决这个问题

需要的效果如下：

首先在搭建项目的时候选择了使用eslint;如果没有请先自行安装

npm install -D eslint eslint-plugin-vue
npm install eslint-plugin-html --save-dev

eslint-plugin-html //用于校验html中的js语法

新建.eslintrc.js配置文件

module.exports = {
  root: true,
  parserOptions: {
    "parser": "@babel/eslint-parser",
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],
  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-var': ['error'],//不能使用var
    // 尾随逗号规则
    // 'comma-dangle': [
    //   'error',
    //   {
    //     arrays: 'always',
    //     objects: 'always',
    //     imports: 'never',
    //     exports: 'never',
    //     functions: 'never',
    //   },
    // ],
  },
  'overrides': [
    {
      'files': ['*.vue'],
      'rules': {
        'indent': 'off'
      }
    }
  ],
  "plugins": [
    "html",//识别.vue文件里的JavaScript代码
    'vue'
  ]
};

新建.eslintignore指定eslint忽略文件和目录

node_modules
static
dist

安装prettier开发环境

npm install -D prettier eslint-plugin-prettier eslint-config-prettier

新建.prettierrc.js配置文件（仅做参考，自行补充）

module.exports = {
  "semi": true,//分号
  "singleQuote": true,//单引号
  "tabWidth": 2//tab采用两个空格
};

安装husky开发环境

npm install husky --save-dev

启动hooks

npx husky install

添加prepare指令

通过npm设置preapre指令

npm set-scrip prepare "husky install"

运行prepare指令

npm run prepare

添加commit-msg的hook到husky中

git commit执行前

可用于将消息规范化为某种项目标准格式。

还可用于在检查消息文件后拒绝提交。

简单说：可以用来规范化标准格式，并且可以按需指定是否要拒绝本次提交

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

  1. 执行 commit-msg 钩子，进行提交信息的校验

生成 pre-commit 文件

git commit执行前

它不接受任何参数，并且在获取提交日志消息并进行提交之前被调用。脚本git commit以非零状态退出会导致命令在创建提交之前中止。

简单说：会在提交前被调用，并且可以按需指定是否要拒绝本次提交

 npx husky add .husky/pre-commit

在当前项目的 .husky 文件夹中创建了一个 pre-commit 文件 (执行pre-commit 钩子进行代码格式校验)

修改 pre-commit 文件

把pre-commit文件中的undefined改为npx lint-staged

在package.json文件中增加节点（仅做参考，自行补充）

"scripts": {
    "lint": "eslint --fix src",
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

安装 lint-staged

lint-staged 是文件过滤器，它只会校验你提交或者说你修改的部分内容

npm install lint-staged --save-dev

配置 package.json

 "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },

当commit 后报以下错误的时候需要安装@commitlint/config-conventional @commitlint/cli插件

解决方法

commitlint 工具检查提交描述是否符合规范要求 ( 用于检查提交信息)

npm install --save-dev @commitlint/config-conventional @commitlint/cli

根目录创建commitlint.config.js文件

将下列代码加入刚才创建的文件中

module.exports = {
    // 继承的规则
    extends: ['@commitlint/config-conventional'],
    // 定义规则类型
    rules: {
        // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
        'type-enum': [
            2,
            'always', [
                'feat', // 新功能 feature
                'fix', // 修复 bug
                'docs', // 项目文档或注释变更
                'style', // 仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑
                'refactor', // 代码重构，没有加新功能或者修复bug
                'perf', // 优化相关，比如提升性能、体验
                'test', // 增加测试
                'chore', // 改变构建流程、或者增加依赖库、工具等
                'revert', // 回滚到上一个版本
                'build', // 部署版本
            ],
        ],
        // subject 大小写不做校验
        'subject-case': [0],
    },
}

这里的git提交规范要在type-enum中所有提交方式

git commit -m "test: 测试错误代码"

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论