实现vue ui组件代码提示

如何让使用element ui 组件有代码提示呢？又或者自己编写组件如何让使用者用起来有代码提示呢？如下图使用element ui所示(组件提示、属性提示、描述提示、枚举值提示):

使element ui组件有代码提示

以element ui组件为例，如何使组件有代码提示呢？ 如下

• 第一步安装vscode插件vetur
• 第二步再项目安装 yarn add element-helper-json --dev
• 第三步把安装的element-helper-json引入项目，再当前项目package.json中添加如下：

{
 "vetur": {
    "tags": "element-helper-json/element-tags.json",
    "attributes": "element-helper-json/element-attributes.json"
  }
}

• 第四步ctrl + shift + p 选择Reload window重新加载下窗口。

element-helper-json 代码分析，学习如何组件代码提示

element-helper-json 是官方出的大家可以放心使用,也是vetur推荐使用的。

单看起来就是引入了element-helper-json里面的俩文件element-tags.json和element-attributes.json,那么咱们简单分析下他里面都有啥？怎么个规则给到vetur生成组件代码提示的呢？

element-tags.json 如下：

// element-tags.json
{
  "el-row": {
    "attributes": ["gutter", "type", "justify", "align", "tag"],
    "subtags": ["el-col"],
    "description": "A row in grid system"
  },
  "el-button": {
    "attributes": ["type", "size", "plain", "loading", "disabled", "icon", "autofocus", "native-type", "round", "circle"],
    "defaults": ["type"],
    "description": "Commonly used button."
  },
  "el-radio": {
    "attributes": ["label", "disabled", "border", "size", "name"],
    "defaults": ["label"],
    "description": "Single selection among multiple options."
  },
  "el-radio-group": {
    "attributes": ["size", "fill", "text-color", "change"],
    "defaults": ["v-model"],
    "subtags": ["el-radio"]
  },
   "el-select": {
    "attributes": ["multiple", "disabled", "value-key", "size", "clearable", "collapse-tags", "multiple-limit", "name", "auto-complete", "placeholder", "filterable", "allow-create", "filter-method", "remote", "remote-method", "loading", "loading-text", "no-match-text", "no-data-text", "popper-class", "reserve-keyword", "default-first-option", "popper-append-to-body", "change", "visible-change", "remote-tag", "clear", "blur", "focus"],
    "defaults": ["v-model", "placeholder"],
    "subtags": ["el-option"],
    "description": "When there are plenty of options, use a drop-down menu to display and select desired ones."
  }
}

上面是拿了几个示例，有一下几个特征： 键

• el-row、el-button组件名是json的key。

值

• subtags是子组件的名字。
• description是组件的描述，如顶部截图可以看到组件提示信息的。
• attributes是组件的所有属性。
• defaults是组件的默认需要有的值。

想要有组件提示就在该json中定义组件名，想有组件属性提示就定义attributes,想有组件信息提示就定义description。

element-attributes.json如下：

// element-attributes.json
{
  "size": {"options": ["medium", "small", "mini"]},
  "page-size": {"description": "item count of each page, default: 10"},
  "total": {"description": "total item count"},
  "el-row/align": {"options": ["top", "middle", "bottom"], "description": "vertical alignment of flex layout"},
  "el-row/offset": {"description": "number of spacing on the left side of the grid"},
  "el-button/type": {"options": ["primary", "success", "warning", "danger", "info", "text"], "description": "button type"},
   "el-button/round": {"version": ">=2.0.0", "type": "boolean", "description": "determine whether it's a round button, default: false"},
}

上面是拿了几个示例，有一下几个特征：

键：

• 全局size、page-size,就是element-tags.json组件的attributes里面有size属性就可会被用到。
• el-row/align、el-row/offset、el-button/type,el-row、el-button组件的属性align、offset、type属性定义。

值：

• options 属性的枚举值。
• description属性的描述信息。

需要有组件属性提示信息就再element-attributes.json下创建对应的属性。

定制组件组件的代码提示，让使用者都说好！！！

开发组件的时候不只是有README文件了，还需要有个vetur文件夹了，这个样让使用者不光有使用文档说明，还在使用者再开发的时候有代码提示！！！

例如下面一个组件:

<template>
  <div>...</div>
</template>

<script>
export default {
  name: 'CustomButton',

  props: {
    style: {
      type: String,
      default: () => ({}),
      requried: false,
    },

    type: {
      type: String,
      default: 'primary',
      required: false,
    },
  }
}
</script>

这个时候再组件项目根目创建vetur文件夹（这个文件夹名字随便命名，这里只是举例）分别创建tags.json和attributes.json如下：

tags.json

{
 "custom-button": {
   "description": "定制按钮组件",
   "attributes": ["style", "type"]
 }
}

attributes.json

{
  "custom-button/type": {
    "options": ["primary", "success", "warning", "danger", "info", "text"], 
    "description": "定制按钮的type属性"
  },
  "custom-button/style": {
    "description": "定制按钮的样式属性"
  }
}

再当前CustomButton组件的package.json中引入（这个时候直接携带发布就不用使用者去引入了）：

{
 "vetur": {
    "tags": "vetur/tags.json",
    "attributes": "vetur/attributes.json"
  }
}

使用效果如下：

如上所示使用者再开发阶段就很舒服了！！！