nuxt常用组件库html-validator应用解析

html-validator

主要用于自动验证nuxt服务器呈现的HTML(SSR和SSG),以检测可能导致水合错误的HTML常见问题,有助于减少水合错误,检测常见的可访问性错误。

安装

npx nuxi@latest module add html-validator

配置

若自动更新nuxt.config.ts配置文件失败,可手动添加下面代码:

nuxt3

defineNuxtConfig({
   modules: [
                '@nuxtjs/html-validator',
                //其他配置项
            ]
 })

nuxt2.9+

 export default {
   buildModules: ['@nuxtjs/html-validator']
 }

nuxt2

 export default {
   // Install @nuxtjs/html-validator as dependency instead of devDependency
   modules: ['@nuxtjs/html-validator']
 }

使用

html-validator有四个选项

1.usePrettier允许更美观地打印源代码,以便在上下文中显示错误。 


如果使用的是TailwindCSS,请考虑不要启用此功能,因为在开发模式下,prettier将难以处理解析HTML的大小。

2.logLevel设置详细信息为verbose、warning或error。在dev中默认为verbose,在生成时为warning。 


您可以使用此配置选项来关闭控制台日志记录的No HTML validation errors found for…消息。

3.如果生成的页面有任何验证错误,failOnError将在运行nuxt generate后抛出一个错误。

 
在持续集成中很有用。

4.Options允许您传入html-validate选项,这些选项将与默认配置合并 


更多关于配置 html- validate 的信息,可以参考 官方文档。

默认配置

{
  htmlValidator: {
    usePrettier: false,
    logLevel: 'verbose',
    failOnError: false,
    /** A list of routes to ignore (that is, not check validity for). */
    ignore: [/\.(xml|rss|json)$/],
    options: {
      extends: [
        'html-validate:document',
        'html-validate:recommended',
        'html-validate:standard'
      ],
      rules: {
        'svg-focusable': 'off',
        'no-unknown-elements': 'error',
        // Conflicts or not needed as we use prettier formatting
        'void-style': 'off',
        'no-trailing-whitespace': 'off',
        // Conflict with Nuxt defaults
        'require-sri': 'off',
        'attribute-boolean-style': 'off',
        'doctype-style': 'off',
        // Unreasonable rule
        'no-inline-style': 'off'
      }
    }
  }
}


规则参考

html语法和概念

与HTML语法和概念相关的规则。

attr-delimiter 禁止属性键和值之间有空格
attr-spacing 要求属性之间用空格分隔
close-attr 禁止结束标记具有属性
close-order 要求元素按正确顺序关闭
element-name 禁止使用无效的元素名称
form-dup-name 要求表单控件具有唯一的名称
map-dup-name 要求‘ ’是唯一的
map-id-name 要求name和id在元素上匹配
no-dup-attr 禁止重复属性
no-dup-class 禁止重复的类
no-raw-characters 禁止使用未转义的特殊字符
no-redundant-for 禁止对属性使用冗余标签
script-type 要求‘

你可能感兴趣的:(vue.js)