VScode插件——HTMLHint插件使用指南、规则配置说明指南、如何修改HTMLHint规则

ShareJasmine

已于 2023-10-14 08:31:30 修改

阅读量2k

点赞数 2

文章标签： vscode 编辑器 html5 vue.js

于 2023-10-13 17:45:39 首次发布

本文链接：https://blog.csdn.net/ShawBurton/article/details/133814555

版权

本文针对VScode应用市场的插件HTMLHint进行说明

HTMLHint插件
平时做HTML页面demo的时候，总喜欢下载一些规则集，比如ESlint、JSlint等插件，这样有些错误就能在写代码时就能体现出来，再配合Error-Lens插件，在代码旁边显示，就能大大提高效率。

HTMLHint配合ErrorLens插件的效果↓↓↓
error-lens插件

1.HTMLHint插件简介

HTMLHint是一个用于检查HTML代码错误和潜在问题的插件。它提供了一系列的规则，用于检查HTML代码的语法、结构、标签使用等方面的问题。

说白了就是以.html后缀结束的文件，进行语法检查，方便我们及时找到代码错误

2.HTMLHint规则说明

HTMLHint总共有33条规则

**Doctype and Head 文档类型和标题**
doctype-first: //必须首先声明 Doctype。
doctype-html5: //无效的文档类型。
html-lang-require：//HTML lang 属性是必需的。
head-script-disabled：//<script>标签中不能使用标签。
style-disabled: //<style> 不能使用标签。
script-disabled: //<script不能使用标签。
title-require: //<title>必须出现在<head>标签中。

**Attributes 属性**
attr-lowercase：//所有属性名称必须为小写。
attr-no-duplication：//元素不能有重复的属性。
attr-no-unnecessary-whitespace：//属性名称和值之间没有空格。
attr-unsafe-chars：//属性值不能包含不安全字符。
attr-value-double-quotes：//属性值必须用双引号引起来。
attr-value-single-quotes：//属性值必须用单引号引起来。
attr-value-not-empty：//所有属性都必须有值。
attr-sorted：//属性应按顺序排序。
attr-whitespace：//属性值中没有前导或尾随空格。
alt-require：//元素的 alt 属性必须存在，并且区域[href]和输入[type=image]的 alt 属性必须有值。
input-requires-label：//所有的[input]标签必须有一个对应的[label]标签。

**Tags 标签**
tags-check：//允许为任何标签指定规则并验证
tag-pair：//标签必须配对。
tag-self-close：//空标签必须自动关闭。
tagname-lowercase：//所有 html 元素名称必须为小写。
tagname-specialchars：//标签名称只能包含字母、数字、“-”、“:”或“ _ ”。
empty-tag-not-self-closed：//空标签不应自行关闭。
src-not-empty：//img(script,link) 的 src 属性必须有一个值。
href-abs-or-rel：href //属性必须是绝对的或相对的。

**ID ID类属性**
id-class-ad-disabled：//id和class属性不能使用ad关键字，会被adblock软件拦截。
id-class-value：//id和class属性值必须满足指定的规则。
id-unique：//id属性的值必须是唯一的。

**Inline 内联**
inline-script-disabled: //不能使用内联脚本。
inline-style-disabled: //不能使用内联样式。

**Formatting 格式化**
space-tab-mixed-disabled：//不要混合使用制表符和空格进行缩进。
spec-char-escape：//特殊字符必须转义。

详细的文档可以访问官网：https://htmlhint.com/docs/user-guide/list-rules

3.HTMLHint规则配置

这个是个性化需求，其实默认的HTMLHint下载下来就可以使用了，但是有些HTMLHint规则配置的让人很不舒服，所以你可以对这些规则进行详细的配置，达到自己满意的效果

点击VScode的“设置”，然后搜索HTMLHint，点击setting.json
在这里插入图片描述
附上我自己使用的规则组代码，你可以根据需求进行修改

"htmlhint.options": {
        "doctype-first": false,
        "doctype-html5": true,
        "html-lang-require": true,
        "head-script-disabled": true,
        "style-disabled": false,
        "script-disabled": false,
        "title-require": true,
        "attr-lowercase": true,
        "attr-no-duplication": true,
        "attr-no-unnecessary-whitespace": true,
        "attr-unsafe-chars": true,
        "attr-value-double-quotes": true,
        "attr-value-single-quotes": false,
        "attr-value-not-empty": true,
        "attr-sorted": true,
        "attr-whitespace": true,
        "alt-require": true,
        "input-requires-label": false,
        "tags-check": true,
        "tag-pair": true,
        "tag-self-close": false,
        "tagname-lowercase": true,
        "tagname-specialchars": true,
        "empty-tag-not-self-closed": false,
        "src-not-empty": true,
        "href-abs-or-rel": true,
        "id-class-ad-disabled": true,
        "id-class-value": true,
        "id-unique": true,
        "inline-script-disabled": true,
        "inline-style-disabled": true,
        "space-tab-mixed-disabled": true,
        "spec-char-escape": true,
    }

4.问题：我遇到的问题是在setting.json中不能针对HTMLHint某一个规则进行配置，只配置其中一个规则，整个插件就失效了

所以解决方案是：需要把所有规则都粘贴进去即可

5.拓展：除了HTML文件，能否把HTMLHint加入像VUE之类的文件，这样在VUE文件中也可进行相关代码提示？

可以，仍然是在VScode的“设置”，setting.json中配置
加入以下代码

 "files.associations": {
        "*.vue": "html"
    },

解释一下：files.associations是配置文件关联，而 “*.vue”:
"html"就是把所有以.vue后缀的文件当做html文件处理，自然就能运用HTMLHint规则了

ShareJasmine

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VScode插件——HTMLHint插件使用指南、规则配置说明指南、如何修改HTMLHint规则

VScode插件——HTMLHint使用指南、规则配置说明指南、如何修改HTMLHint规则。HTMLHint是一个用于检查HTML代码错误和潜在问题的插件。它提供了一系列的规则，用于检查HTML代码的语法、结构、标签使用等方面的问题。说白了就是以.html后缀结束的文件，进行语法检查，方便我们及时找到代码错误。
复制链接

扫一扫