如何在VSCode的HTML语言模式中添加<spacer>为合法允许标签

VSCode默认的HTML校验规则只会识别W3C标准HTML标签，Foundation for Emails这类框架的专属自定义标签会被误判为非法标签，你可以通过以下任意一种方法解决：

方法一：配置VSCode内置HTML自定义标签规则 #

• 打开VSCode设置页：按下快捷键Ctrl + ,（Windows/Linux）或Cmd + ,（Mac）
• 搜索html.customData，点击搜索结果中的「在settings.json中编辑」
• 在打开的配置文件中添加如下内容：

{
  "html.customData": [
    {
      "tags": [
        {
          "name": "spacer",
          "description": "Foundation for Emails 专用间距标签"
        }
        // 后续有其他同框架自定义标签可直接在该数组中追加
      ]
    }
  ]
}

• 保存配置后，重启VSCode窗口即可生效。

方法二：配置ESLint规则（如果你使用ESLint做HTML校验） #

如果你的项目使用eslint-plugin-html做代码校验，可直接修改ESLint配置忽略该标签：

• 打开项目根目录下的ESLint配置文件（通常为.eslintrc.js、.eslintrc.json等）
• 在rules节点下添加如下配置：

"html/valid-custom-element-name": ["error", {
  "ignore": ["spacer"]
}]

• 保存配置后重启ESLint服务即可生效。

标红问题示例：

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