【Vue】项目搭建规范

1. 集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

1. VSCode需要安装一个插件：EditorConfig for VS Code

2. 创建 .editorconfig 文件：

   # http://editorconfig.org
   
   root = true
   
   [*] # 表示所有文件适用
   charset = utf-8 # 设置文件字符集为 utf-8
   indent_style = space # 缩进风格（tab | space）
   indent_size = 2 # 缩进大小
   end_of_line = lf # 控制换行类型(lf | cr | crlf)
   trim_trailing_whitespace = true # 去除行首的任意空白字符
   insert_final_newline = true # 始终在文件末尾插入一个新行
   
   [*.md] # 表示仅 md 文件适用以下规则
   max_line_length = off
   trim_trailing_whitespace = false
   

2. 语法检查 / 代码格式化

通过 vue-cli 创建项目，选择 eslint+prettier

eslint 配置步骤：

1. 在.eslintrc.js的rules里面新增：

   indent: 0,
   'space-before-function-paren': 0,
   

2. 然后在package.json的script里的lint后面加上–fix

   "lint": "vue-cli-service lint --fix"
   

3. 然后出现下面报错的时候跑一遍就可以修复

   

prettier 配置步骤：

1. 配置.prettierrc文件：

   {
     "useTabs": false,        // 使用tab缩进还是空格缩进，选择false；
     "tabWidth": 2,           // tab是空格的情况下，是几个空格，选择2个；
     "printWidth": 80,        // 当行字符的长度，推荐80，也有人喜欢100或者120；
     "singleQuote": true,     // 使用单引号还是双引号，选择true，使用单引号；
     "trailingComma": "none", // 在多行输入的尾逗号是否添加，设置为 `none`；
     "semi": false            // 语句末尾是否要加分号，默认值true，选择false表示不加；
   }
   

2. 创建.prettierignore忽略文件

   /dist/*
   .local
   .output.js
   /node_modules/**
   
   **/*.svg
   **/*.sh
   
   /public/*
   

3. 在package.json中配置一个scripts：

   "prettier": "prettier --write ."
   

注意：配置完.prettierrc后，一定要yarn run prettier，将所有文件格式化一下，否则会报错

3. git提交规范

通常我们的git commit会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。

但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen

1. 安装commitizen和cz-customizable

   npm install -g commitizen@4.2.4
   npm i cz-customizable@6.3.0 --save-dev
   

2. 在package.json中进行新增

   "config": {
     "commitizen": {
       "path": "node_modules/cz-customizable"
     }
   }
   

   

3. 在根目录下新建.cz-config.js文件并写入配置，之后就可以用 git cz 来代替 git commit

   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/e/h)'
     },
     // 跳过问题
     skipQuestions: ['body', 'footer'],
     // subject文字长度默认是72
     subjectLimit: 72
   }
   

4. 使用husky进行强制git代码提交规范

   npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
   npm install husky@7.0.1 --save-dev
   npx husky install
   

5. 创建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]
     }
   }
   

6. 在package.json中新增指令

   "prepare": "husky install"
   

7. 并执行

   npm run prepare
   

8. 新增husky配置文件

   npx husky add .husky/commit-msg
   

9. 往第九步生成的文件中写入

   npx --no-install commitlint --edit
   

   

10. 使用husky强制代码格式化 创建配置文件

    npx husky add .husky/pre-commit
    

11. 往第十步生成的文件中写入

    npx lint-staged
    

    

12. 把package.json文件的lint-staged修改为

    "lint-staged": {
       "src/**/*.{js,vue}": [      //src目录下所有的js和vue文件
         "eslint --fix",           // 自动修复
         "git add"                 // 自动提交时修复
       ]
     }