使用vue-cli创建完项目后，使用eslint和prettier配合解决代码格式问题

1. 在vscode插件市场下载prettier插件，然后在项目跟目录创建.prettierrc文件，文件内容如下

{
  "semi":false,  //是否语句后面加分号
  "singleQuote":true, //是否使用单引号
  "trailingComma":"none" // 多行语句后，是否在最后一个加逗号
}

2. 打开vsCode设置，找到Format On Save 配置项，打上√

3. 如果你下载了多个格式化插件，你代码区域右击选择“使用...文档格式代码”,选择prettier格式代码

4. vscode而言，一个tab默认4个空格，而eslint希望一个tab为两个空格，打开vscode设置，找到tab size，把4改为2

   5. 当你写一个函数的时候，eslint规定函数方法名和小括号之间有空格， 而prettier要求没有空格，这个冲突可以通过修改.eslintrc.js解决,在rules里面新增一条规则。

  rules: {
    'space-before-function-paren': 'off'
  }

使用Commitizen规范提交

1. 全局安装commitizen

npm i -g commitizen@4.2.4

2. 安装并配置cz-customizable

npm i cz-customizable@6.3.0 --save-dev

//添加下面配置到package.json
"config":{
    "commitizen": {
        "path": "node_modules/cz-customizable"
    }
}

3. 项目根目录下创建.cz-config.js自定义提示文件

module.exports = {
    types:[
        {value:'feat',name:'feat:新功能'},
        {value:'fix',name:'fix:修复'},
        {value:'docs',name:'docs:文档变更'},
        {value:'style',name:'style:代码格式(不影响代码运行的变动)'},
        {value:'refactor',name:'refactor:重构(既不是增加feature,也不是修复bug)'},
        {value:'perf',name:'perf:性能优化'},
        {value:'test',name:'test:增加测试'},
        {value:'chore',name:'chore:构建过程或者辅助工具的变动'},
        {value:'revert',name:'revert:回退'},
        {value:'build',name:'build:打包'},
    ],
    // 消息步骤
    messages: {
        type:'请选择提交的类型: ',
        customScope:'请输入修改的范围(可选)',
        subject:'请简要描述提交(必填)',
        body:'请输入详细描述(可选)',
        footer:'请输入要关闭的issue(可选)',
        confirmCommit:'确认要使用以上信息提交?(y/n)'
    }
    //默认长度为 72
    subjectLimit: 72,
    
    // 跳过问题
    skipQuestions:['body', 'footer']
}

4. 使用git cz 代替 git commit 使用git cz 代替 git commit，即可看到提示内容。

5. 提交前修复代码格式

安装lint-staged@9.5.0,在package.json新增配置

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