作为前端开发leader你必须要对组员开发的代码制定适合项目的开发规范,并且要做到跟踪检查,传统的做法是制定军规,比如命名方式,代码结构,注释模版,缩紧换行等等,然后通过代码review检查,但这样耗时成本太大,没有必要将团队大量时间浪费在这种代码格式的检查上,但代码格式统一对于项目开发人员至关重要,因为我们要相互承接阅读修改彼此的代码,所以自动化的代码检查约束就显得非常重要,本篇博文介绍前端产出的代码html文件的代码检查工具HTMLHint。不仅仅适用于团队,最重要的是根据通用的代码规范养成良好的编码习惯,利人利己,至少不被歧视。
安装 npm install htmlhint -g
生成.htmlhintrc文件,在项目根目录下新建.htmlhintrc文件其配置如下
{
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true,
"attr-value-not-empty": false,
"attr-no-duplication": true,
"doctype-first": true,
"tag-pair": true,
"tag-self-close": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"title-require": false,
"alt-require": true,
"doctype-html5": true,
"id-class-value": "dash",
"style-disabled": true,
"inline-style-disabled": true,
"inline-script-disabled": true,
"space-tab-mixed-disabled": "space4",
"id-class-ad-disabled": true,
"href-abs-or-rel": false,
"attr-unsafe-chars": true,
"head-script-disabled": true
}
htmlhint配置项总共只有23条,根据项目实际情况可选择配置
其对应的翻译如下
标签名必须小写
属性名必须小写
属性值必须放在双引号中
属性值一定不可为空
属性值一定不可重复
Doctype必须是 HTML 文档的第一行
标签必须成对
标签必须自封闭
特殊字符必须
ID 属性必须唯一
src 属性一定不可为空
title 属性必须出现在标签中
img 标签必须包含 alt 属性
Doctype 必须是 HTML5
ID 和 Class 的命名规则必须统一
不该使用样式标签
不该使用行内样式
不该使用行内脚本
空格和制表符一定不可混合在行前
ID 和 Class 一定不可使用广告关键词
href 必须是绝对路径或者相对路径
属性值一定不可使用不安全字符
script 标签不该使用在头部
命令行使用 htmlhint **.html
结果:
如果不输入文件名 只执行 htmlhint 则会对根目录下所有html文件进行检查
命令行方法毕竟不太实用,项目中大多我们采用直接在开发工具中安装插件,编码过程中动态实时提示,接下来我们用vs code安装插件实现
查找HTMLHint
重启vscode,此时打开html文件 就会看到提示,此处验证
“title-require”: true,
需要注意的是vscode安装htmlhint插件后也是按照项目根目录下的htmlhintrc文件中的配置进行检查的。
接下来你要做的就是将.htmlhintrc文件想组内成员进行共通即可