eslint+prettier+husky+lint-staged

92 阅读1分钟

前端代码编程规范,可以分为两个部分

代码格式规范

对于代码格式规范,通过Eslint + Prettier + Vscode 配合来进行处理,可以实现在保存代码时,自动规范化代码格式的目的。

Eslint

eslint是一个javascript代码检测工具,主要检测的是以下这些问题

  • 变量声明未使用
  • 未定义的变量
  • 比较时使用全等
  • 禁止不必要的括号等

Prettier

prettier是一个代码格式化的工具,主要作用是格式化,并不关心代码语法的问题。常见的格式问题有:

  • 代码紧缩
  • 单引号与双引号
  • tabs 空格长度
  • 每行代码后面是否加上;等

代码提交规范husky+commitlint

对于代码提交规范,我们通过使用husky来监测git hooks钩子,可通过以下插件完成对应的配置

commitlint

用于检测提交信息的

主要的gitHooks钩子

  • commit-msg

    在代码提交前检查commit信息是否符合规范

    例如:git commit -m 'chore: /fix:/update:/ test:/ '

  • pre-commit

    在代码提交前检查代码是否符合规范(eslint+prettier规则),不符合规范将不可被提交

    例如: 声明变量未使用

lint-staged

自动修复暂存区的代码格式错误

参考文档

eslint官网

prettier是什么

详细配置文档

\