如何使用HTMLHint及VS Code扩展配置检测HTML属性拼写错误？

当然可以！HTMLHint完全能够检测HTML属性的拼写错误——比如你把required写成reqiured这种情况，它会对照W3C标准的HTML属性列表，判断输入的属性是否合法并给出提示。

下面具体说说它的能力和VS Code里的配置方法：

1. HTMLHint原生支持属性合法性检查 #

HTMLHint自带一个核心规则valid-attribute（默认已启用），它会验证属性对于所在元素是否合法。这自然就覆盖了拼写错误的场景：如果你输入了reqiured这种不存在的属性，HTMLHint会立即抛出警告，提示该属性对当前元素无效。

同时，它也能识别符合标准的自定义属性（比如以data-开头的data-user-id），不会误判这类合法属性。

2. VS Code中HTMLHint扩展的配置 #

如果你使用VS Code的HTMLHint扩展，配置非常简单：

• 首先确保你已经安装了HTMLHint扩展（在VS Code扩展市场搜索即可找到）。
• 默认情况下，valid-attribute规则已经开启，所以你输入错误的属性名时，编辑器会直接显示警告（比如红色波浪线）。
• 如果你需要调整规则（比如禁用某条规则或添加自定义例外），可以这样操作：
  1. 按下Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置面板。
  2. 搜索htmlhint.options，点击「在settings.json中编辑」。
  3. 要显式启用valid-attribute规则（或调整其行为），在配置中添加：

     "htmlhint.options": {
       "valid-attribute": true
     }
     

• 举个例子，当你写出<input type="text" reqiured>时，VS Code会在reqiured下方显示红色波浪线，并提示该属性对input元素无效。

这样就能轻松避免HTML属性的拼写错误啦！

内容的提问来源于stack exchange，提问作者Jordy