前端代码检查工具之HTMLHint使用指南

作为前端开发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文件想组内成员进行共通即可

发布了69 篇原创文章 · 获赞 6 · 访问量 1882

猜你喜欢

转载自blog.csdn.net/weixin_40073115/article/details/103819884
今日推荐