前端企业级项目代码规范工具

代码规范格式化工具

ESLint和Prettier

作用：实现高亮显示不规范代码以及保存时自动规范代码
ESLint：

• 作用：检查代码质量与代码风格的工具，配置一套规则，能检查出代码中不符合规则的地方。主要是解决代码质量的问题。
• 配置文件：.eslintrc.js或.eslinttrc.json以及package.json中eslintConfig的配置项
• 配置的规则：默认规则见 ESLint规则 需要禁用或覆盖默认规则时在配置文件下的rules配置项中编写。
  Prettier:
• 作用：代码格式化工具，不关注代码质量潜在问题的检查，倾向于团队代码风格的规范和统一，可以对多种语言进行代码格式化例如HTML，Vue，CSS等，不仅仅针对JavaScript。
• 配置文件：.prettierrc.js或prettierrc.cjs或prettierrc.json
• 配置的规则：配置项参考 Prettier配置项 ，需要更改的配置项在配置文件中更改，标明注释。
  由于ESLint和Prettier都涉及一些代码风格的检查，规则重叠部分可能会引起冲突。可以选择安装以下两个插件解决：
• eslint-config-prettier //解决和Prettier冲突的ESLint配置项
• eslint-plugin-prettier
  以及：
• 在.eslintrc.cjs文件的’extends’配置项末尾放语句：'plugin:prettier/recommended '，实现当两者规则冲突时以prettier的规则为主。

husky、lint-stage和commitlint

作用：规范git提交的代码风格以及提交信息
husky:

• 作用：是一个Git钩子工具，能够在Git版本控制的不同阶段去触发自定义脚本，例如在代码提交，代码推送等操作前后执行特定的命令或脚本。此处需要在代码提交前执行代码格式化工具来保证代码风格统一。
  lint-staged:
• 作用：在Git暂存区中检查被修改的文件，针对这些文件进行lint操作。将lint-staged配置为husky的pre-commit钩子的一部分，在提交代码前进行代码检查，主要是检查ESLint规定的代码质量方面的错误。
  commitlint:
• 作用：是一个规范化提交消息的工具，统一团队项目提交信息的格式和内容。不符合提交格式的提交命令将被阻止。
• 配置文件：commitlint.config.*
• 提交格式：git commit -m “type: message”
• type类型定义（可以在配置文件中自定义）：
  • feat：增加新功能
  • fix：修复bug
  • del：删除功能
  • update：更新功能
  • docs：文档相关的改动
  • style：不影响代码逻辑的改动，例如修改空格，缩进等
  • build：构造工具或者相关依赖的改动
  • refactor：代码重构
  • test：增加或修改测试
  • perf：提高性能的改动
  • chore：修改src或者test的其余修改，例如构建过程或辅助工具的变动
  • ci：ci配置，脚本文件等改动