如何为自定义HTML属性配置跨编辑器的预定义值代码提示

要实现自定义flower属性（带rose/sunflower/lavender预定义值）的跨编辑器代码提示，通用方案是借助JSON Schema——主流编辑器（IntelliJ、VSCode等）都原生支持通过它扩展HTML的属性提示能力，完全不依赖特定编辑器插件。

具体步骤 #

1. 编写自定义属性的JSON Schema #

创建一个html-custom-attrs.schema.json文件，定义flower属性的枚举值和关联规则：

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "flower": {
      "type": "string",
      "enum": ["rose", "sunflower", "lavender"],
      "description": "自定义花卉属性，可选值：玫瑰、向日葵、薰衣草"
    }
  },
  "targets": {
    "html": {
      "attributes": {
        "flower": true
      }
    }
  }
}

2. 关联Schema到编辑器 #

VSCode配置

在项目根目录的.vscode/settings.json中添加配置，让VSCode加载这个Schema：

{
  "html.customData": ["./html-custom-attrs.schema.json"]
}

IntelliJ（IDEA、WebStorm等）配置

1. 打开设置（Windows/Linux：File → Settings；Mac：IntelliJ IDEA → Settings）
2. 进入Languages & Frameworks → Schemas and DTDs → JSON Schema Mappings
3. 点击+新增映射，选择刚才创建的JSON Schema文件
4. 在File pattern输入*.html，将Schema关联到所有HTML文件

3. 验证提示效果 #

在HTML文件中给任意元素添加flower属性（比如<div flower="">），编辑器会自动弹出包含预定义值的下拉列表，选中即可自动填充。

注意事项 #

• 该方案是编辑器层面的提示增强，不会修改HTML语法规范，代码兼容性不受影响
• 若要扩展更多自定义属性，直接在Schema的properties节点下添加对应枚举配置即可
• 所有支持HTML自定义数据或JSON Schema映射的编辑器都能适配，无需额外插件

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