htmlhint-bia-loader

htmlhint-bia-loader

1. 打开项目路径下的build/webpack.dev.conf.js和build/webpack.prod.conf.js
2. 找到test: /\.html$/,所在的对象
3. 在该对象内，use数组中插入

{
  loader: 'htmlhint-bia-loader',
  options: {
      'bia-http-protocol': true,
      'bia-spell-check': true,
      'bia-lazyload-src': true,
      'bia-a-target': _param === 'h5' ? 'no-need' : 'need'
  },
},

到数组尾部

htmllint-bia-loader

• bia-http-protocol
  1. 用于检查在html的某些tag(<a>/<img>/<link>/<iframe>/<script>)中引入资源/链接的协议是否正确。
  2. 会对<img>标签的src和data-original、<link>标签的href、<script>标签的src进行检查
  3. 会对<a>标签的href检查，其中href值为(m.)you.163.com开头
  4. 如果不需要检查，可以在相应的标签内添加属性ignore-protocol来关闭，demo: <a href="http://you.163.com" ignore-protocol>主站</a>
  5. 增加对//开头的协议检查
• bia-a-target
  1. 用于检查对应开发环境(pc/h5)下，html文件中<a>标签内target属性的书写情况
  2. 不论参数传什么，都会检测href="javascript:;"的<a>是否有写target属性，如果有则一律报错
  3. 传入参数: 'need', 代表环境: pc 此时表示所有的跳转<a>标签都需要书写target="_blank"
  4. 传入参数: 'no-need', 代表环境: h5 此时表示所有的跳转<a>标签都不需要书写target="_blank"
  5. 如果不需要检查，可以在相应的标签内添加属性ignore-target来关闭，demo: pc中: <a href="http://you.163.com" ignore-target>主站</a>
• bia-lazyload-src
  1. 用于检查在html中懒加载图片时，是否有写src=""
  2. 正确demo: <img src="" data-original="https://xxxxxx">
  3. 错误demo: <img data-original="https://xxxxxx">
• bia-spell-check
  1. 用于检查在<a>中href="javascript:;"的拼写错误
  2. 正确demo: <a href="javascript:;">主站</a>
  3. 错误demo: <a href="javascrpt:;">主站</a>

htmlhint-bia-loader

1. 针对a标签target的检查

提供检查规则bia-a-target，用于检查对应开发环境(pc/h5)下，html文件中<a>标签内target属性的书写情况。

通过配置项参数对开发环境进行定义。

在规则中通过监听html tagName判断标签类型并拿到html标签值和属性，之后进行详细判断检查。

2. 针对http协议的检查

提供检查规则bia-http-protocol，用于检查在html的某些tag(<a>/<img>/<link>/<iframe>/<src>/<script>)中引入资源/链接的协议是否正确。

在规则中通过监听html tagName判断标签类型并拿到html标签值和属性，之后通过正则判断其值或属性是否满足规则

3. 针对图片懒加载的检查

提供检查规则bia-lazyload-src，用于检查在html中懒加载图片时，是否有写src=""。

获取到tagName为img的标签，并且对其data-original和src属性进行比对即可实现。

4. 拼写错误

提供检查规则bia-spell-check，用于检查在<a>中href="javascript:;"的拼写错误。

javascript:;中的ja一般不会拼错，所以程序中直接检测href为ja开头并且又不等于javascript:;的项