htmlhint-bia-loader

    1.2.2 • Public • Published

    htmlhint-bia-loader

    1. 打开项目路径下的build/webpack.dev.conf.jsbuild/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>标签的srcdata-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-originalsrc属性进行比对即可实现。

    4. 拼写错误

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

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

    Install

    npm i htmlhint-bia-loader

    DownloadsWeekly Downloads

    1

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    27.6 kB

    Total Files

    28

    Last publish

    Collaborators

    • zjhch123