前言
对于编程语言进行「语法、书写」校验,能有效「归并」不同开发者的「不同风格」,还能检验出一些语法错误。
比如 eslint 就能校验 JS 代码的「鸡肋糟粕」,css 哪些东西需要校验?单纯从代码层面来说,CSS 校验的东西其实蛮少的。
比如:属性顺序、小于 1 的小数要不要去掉 0、选择器之间要不要加空格…
不过要细细的追究,校验的东西还是挺多的,比如 List of rules 列出了好多需要校验的规则。
规范的出现就是为了让这些每个人的编程风格变得统一
安装 husky 和 lint-staged
husky
可以用于实现各种 git Hook。这里主要用到 pre-commit 这个 hook,在执行 commit 之前,运行一些自定义操作
lint-staged
用于对 git 暂存区中的文件执行代码检测
1 | npm i husky lint-staged -D |
Prettier 配置
根目录下创建 .prettierrc.js
文件
1 | module.exports = { |
Eslint 配置
安装
1 | npm i eslint eslint-plugin-html eslint-plugin-vue babel-eslint -D |
根目录下创建 .eslintrc.js
文件
1 | module.exports = { |
Stylelint 配置
stylelint-config-standard
是 stylelint 的推荐配置
stylelint-order
css 属性排序插件(先写定位,再写盒模型,再写内容区样式,最后写 CSS3 相关属性)
stylelint-config-recess-order
stylelint-order 插件的第三方配置
安装依赖
1 | npm i stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order -D |
根目录新建一个 .stylelintrc.js
文件
1 | module.exports = { |
Commitlint 配置
@commitlint/cli
可以检查提交信息
@commitlint/config-conventional
是提交规范的配置包
安装
1 | npm i @commitlint/cli @commitlint/config-conventional -D |
根目录下新建 commitlint.config.js
文件
1 | /* |
配置 lint-staged 规则
在 package.json
里 添加
1 | "lint-staged": { |
配置 husky 检验钩子
在 package.json
里 添加
1 | "husky": { |
这个时候来试下随便提交个 commit 看会发生什么
1 | git add . |
上面那个 commit 不符合提交规范 所以报错了
1 | husky > commit-msg (node v14.16.0) |
现在在来提交一个符合规范的 commit
1 | git add . |
出现这些信息就表示已经通过校验并提交了
1 | husky > commit-msg (node v14.16.0) |
这通流程跑下来后,你的项目就可以支持提交时校验 commit 信息、eslint/stylelint 规范提示、提交前自动校验&格式化代码了
备注
本文使用的依赖版本号如下:
1 | { |
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=i8itw1rv0in8