vue3开发和构建中进行代码规范校验及git commit 提交规范

1,129 阅读1分钟

在开发和构建中进行代码规范校验

  1. 配置git commit hook
安装   
npx mrm@2 lint-staged 
配置   
// package.json 
"lint-staged": {     
   "*.{js,jsx,vue,ts,tsx}": [
         "npm run lint",
         // "git add" 之前的版本需要手动把 lint 过程中修改的代码手动 add,新版本不需要了
    ]
 }
  1. 配置vite-plugin-eslint
安装
npm install eslint vite-plugin-eslint --save-dev
# or
yarn add eslint vite-plugin-eslint -D
配置
// vite.config.ts/js
import { defineConfig } from 'vite'
import eslint from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [eslint(
      // 相应的配置参数
  )] 
})

git commit 提交规范

  1. 安装插件conventional-changelog(根据电脑操作系统选择)
# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli} 
# For Windows: 
npm install --save-dev @commitlint/config-conventional @commitlint/cli 
  1. 配置commitlint.config.js(项目根目录中)
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js 
注意:通过命令行生成的文件可能会导致文件生成的编码是UTF16 LE不是UTF-8,导致在提交代码校验时通不过 
解决办法:
1. 删除项目中的commitlint.config.js,通过手动创建一个commitlint.config.js文件,内容:
module.exports = {   extends: ['@commitlint/config-conventional'] }
2. 删除package.jsontype:module(如果删除了,不行就用上面的方法) 

2.png

1.png
3. 添加hook命令 在根目录中.husky中生成文件命令commit-msg

npx husky add .husky/commit-msg  "npx --no-install commitlint --edit '$1'" 
  1. 执行操作
git add . git status //查看暂存修改的文件 
git commit -m 'fix: 配置'//冒号后面必须加空格再进行文字描述 

不正确的提交报错

3.png 常用 commit 类型说明:    

4.png