htmlhint-bia-loader
v1.2.2
Published
A webpack loader for htmlhint
Downloads
11
Maintainers
Readme
htmlhint-bia-loader
- 打开项目路径下的
build/webpack.dev.conf.js
和build/webpack.prod.conf.js
- 找到
test: /\.html$/,
所在的对象 - 在该对象内,
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
- 用于检查在html的某些tag(
<a>/<img>/<link>/<iframe>/<script>
)中引入资源/链接的协议是否正确。 - 会对
<img>
标签的src
和data-original
、<link>
标签的href
、<script>
标签的src
进行检查 - 会对
<a>
标签的href
检查,其中href
值为(m.)you.163.com开头 - 如果不需要检查,可以在相应的标签内添加属性
ignore-protocol
来关闭,demo:<a href="http://you.163.com" ignore-protocol>主站</a>
- 增加对
//
开头的协议检查
- 用于检查在html的某些tag(
- bia-a-target
- 用于检查对应开发环境(pc/h5)下,html文件中
<a>
标签内target
属性的书写情况 - 不论参数传什么,都会检测
href="javascript:;"
的<a>
是否有写target
属性,如果有则一律报错 - 传入参数: 'need', 代表环境: pc
此时表示所有的跳转
<a>
标签都需要书写target="_blank"
- 传入参数: 'no-need', 代表环境: h5
此时表示所有的跳转
<a>
标签都不需要书写target="_blank"
- 如果不需要检查,可以在相应的标签内添加属性
ignore-target
来关闭,demo: pc中:<a href="http://you.163.com" ignore-target>主站</a>
- 用于检查对应开发环境(pc/h5)下,html文件中
- bia-lazyload-src
- 用于检查在html中懒加载图片时,是否有写
src=""
- 正确demo:
<img src="" data-original="https://xxxxxx">
- 错误demo:
<img data-original="https://xxxxxx">
- 用于检查在html中懒加载图片时,是否有写
- bia-spell-check
- 用于检查在
<a>
中href="javascript:;"
的拼写错误 - 正确demo:
<a href="javascript:;">主站</a>
- 错误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:;
的项