代码提交规范和代码格式化配置

一、依赖插件

• Prettier
• ESLint
• Commitlint
• husky

二、配置过程

1.创建项目

• 执行创建命令, 并完成创建项目过程

vue create demo

2. 配置 Prettier

作用：对代码进行格式化

• 在项目根目录下创建 .prettierrc.js 文件，并配置

module.exports = {
  tabWidth: 2,
  singleQuote: true,
  semi: false,
  trailingComma: 'none',
  bracketSpacing: true,
}

• 常用的配置项；其他请参考Prettier

类型	描述
printWidth	一行的字符数，如果超过会进行换行，默认为80
tabWidth	一个tab代表几个空格数，默认为80
useTabs	是否使用tab进行缩进，默认为false，表示用空格进行缩减
singleQuote	字符串是否使用单引号，默认为false，使用双引号
semi	行位是否使用分号，默认为true
trailingComma	是否使用尾逗号，有三个可选值"<none
bracketSpacing	对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
parser	代码的解析引擎，默认为babylon，与babel相同

3. 安装以下依赖包

1. @commitlint/config-conventional： 制定提交规范
2. @commitlint/cli： 制定提交规范
3. husky：对 git commit 操作进行校验

• 安装依赖

npm i @commitlint/config-conventional @commitlint/cli husky -D
或
yarn add @commitlint/config-conventional @commitlint/cli husky -D

4. 配置代码规范

1. 在根目录下创建 commitlint.config.js 文件，并配置

 module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'bug',
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'merge'
      ]
    ]
  }
 }

类型	描述
bug	此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
feat	新功能（feature）
fix	修补bug
docs	仅仅修改了文档，比如README, CHANGELOG, CONTRIBUTE等等;（documentation）
style	仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑
refactor	代码重构，没有加新功能或者修复bug
perf	优化相关，比如提升性能、体验
test	测试用例，包括单元测试、集成测试等
chore	改变构建流程、或者增加依赖库、工具等
revert	回滚到上一个版本
merge	合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址

2. 执行以下命名,生成.husky文件夹

npm set-script prepare "husky install"

package.json

{
    "scripts": {
      "prepare": "husky install" 
      ...
    },
    ...
}

3. 执行命令以下命名, 在 .husky 文件夹下生成 commit-msg 文件

npx husky add .husky/commit-msg

• 在 .husky/commit-msg 文件中写入如下代码

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit

4. 执行命令以下命名, 在 .husky 文件夹下生成 pre-commit 文件

npx husky add .husky/pre-commit

• 在 .husky/pre-commit 文件中写入如下代码

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

5. 配置 package.json 文件

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

到此已完成了代码规范的配置

希望可以帮助到大家！如果小伙伴们觉得本次分享的内容还不错，请点点赞！您的点赞是我的动力源；如果觉得写的不好的请小伙伴们见谅！

谢谢