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

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

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，新版本不需要了
    ]
 }

2. 配置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 

2. 配置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.json中type:module(如果删除了，不行就用上面的方法) 

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

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

4. 执行操作

git add . git status //查看暂存修改的文件 
git commit -m 'fix: 配置'//冒号后面必须加空格再进行文字描述 

不正确的提交报错

常用 commit 类型说明：