团队代码规范管理整理

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

写在前面

前段时间和 PHP 同学合作，为了协同最大效率，部分简单的前端页面交给他们完成。这个时候问题出现了，他们更习惯之前的 PHP 代码规范，写出来的代码后期我们帮忙改总是不爽。再加之考虑后续新前端同学进入，所以决定配置一套前端规范。

写代码

1. ESLint 检测代码格式
   .eslintrc.js 配置对应规则
   .eslintignore 配置忽略文件
   rules 内可配置自定义属性对应的错误级别 off | warn | error

   module.exports = {
     root: true,
     env: {
       node: true
     },
     extends: ['plugin:vue/essential', '@vue/standard'],
     rules: {
       'vue/require-v-for-key': 0,
       'space-before-function-paren': 0,
       'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
       'no-debugger': process.env.NODE_ENV === 'production' ? 'off' : 'off'
     },
     parserOptions: {
       parser: 'babel-eslint'
     }
   }
   

2. Stylelint 检查样式代码格式
   .stylelintrc 配置对应规则
   .stylelintignore 配置忽略文件
   scss 检查需要配置 stylelint-config-recommended-scss
   rules 优先级大于 extends

   {
       "extends": [
           "stylelint-config-standard",
           "stylelint-config-recommended-scss"
       ],
       "plugins": [
           "stylelint-scss"
       ],
       "rules": {
           "indentation": 4,
           "rule-empty-line-before": "never",
           "at-rule-empty-line-before": "never",
           "no-descending-specificity": null, // 禁止特异性较低的选择器在特异性较高的选择器之后重写
           "selector-pseudo-class-no-unknown": null,
           "property-no-unknown": null,
           "font-family-no-missing-generic-family-keyword": null,
           "at-rule-no-unknown": [true, {"ignoreAtRules" :[
             "mixin", "extend", "content", "include"
           ]}] // 支持 SCSS 语法中的 mixin、extend、content
       }
   }
   

3. Prettier 代码格式化
   prettier.config.js 配置对应规则（semi 分号，trailingComma 末尾逗号...
   VSCode 装好对应插件，勾选保存时自动格式化文件

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

4. VSCode 设置文件
   .vscode > settings.json 配置工作区公用设置

   {
       "editor.codeActionsOnSave": {
   	"source.fixAll.eslint": true,
   	"source.fixAll.stylelint": true
       }
   }
   
   

在以上这些配置下就可实现代码保存自动格式化，从而保证代码开发过程中的格式一致性。（当然错得离谱还是要手动调一调）

提代码

1. 规范 约定式提交
   工具 commitizen cz-customizable
   配置 .cz-config.js
   git cz

2. Git Hooks
   pre-commit、commit-msg、 commitlint .husky > pre-commit + lintstagedrc.js
   lnit-staged 尝试自动修复
   这块还没有完全实现，实现了后续再完善吧。😂😂😂