几步让你的Vue组件获得语法高亮和属性说明

先安利一下我们最近发布的Vue3移动端组件库, 希望大家多多支持，多多star。

仓库地址 文档地址

我们近期会给大家介绍一些书写Vue组件的一些小技巧或是大家在开发中经常忽视的小细节。 不知道你在使用第三方组件库的时候有没有注意到这样一个细节，在你正在编写组件的属性时会得到这样的提示...

又或者是这样的提示...

这样的高亮和属性描述会使我们的开发效率和体验大幅提高，尤其是在企业内部有共享的组件库或是自定义的业务组件的时候，这样的语法高亮很大程度上起到提示作用。这里教大家如何实现这样的效果。

vscode

首先确保你的小组成员的vscode都安装了vetur插件，然后编写如下格式的组件声明json文件。

// attributes.json 声明组件属性的类型和描述
{
  "var-button/type": {
    "type": "string",
    "description": "类型， 可选值为 `default` `primary` `info` `success` `warning` `danger` 默认值：default"
  },
  "var-button/size": {
    "type": "string",
    "description": "尺寸， 可选值为 `normal` `mini` `small` `large` 默认值：normal"
  }
}

// tags.json 声明组件名和属性名
{
  "var-button": {
    "attributes": [
      "type",
      "size"
    ]
  }
}

webstorm

webstorm不仅支持属性高亮还支持事件和插槽的高亮，体验相当好。

// web-types.json
{
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
  "framework": "vue",
  "version": "1.0.0",
  // 组件库名称
  "name": "VARLET",
  "contributions": {
    "html": {
       // 使用ts类型
      "types-syntax": "typescript",
      "tags": [
        {
          // 组件名
          "name": "var-button",
          "attributes": [
            {
              "name": "type",
              "description": "类型， 可选值为 `default` `primary` `info` `success` `warning` `danger`",
              "default": "default",
              "value": {
                // 属性类型 和ts一致
                "type": "string",
                "kind": "expression"
              }
            },
            {
              "name": "size",
              "description": "尺寸， 可选值为 `normal` `mini` `small` `large`",
              "default": "normal",
              "value": {
                "type": "string",
                "kind": "expression"
              }
            }
          ],
          "events": [
            {
              "name": "click",
              "description": "点击按钮时触发， 在 `loading` 或 `disabled` 状态为 `true` 时不触发"
            }
          ],
          "slots": [
            {
              "name": "default",
              "description": "按钮内容"
            }
          ]
        }
      ]
    }
  }
}

在package.json中声明

如果你的组件希望上传到npm，在即将发布的npm包的package.json中声明json文件位置。 如果你是在项目模板中，在项目根目录下的package.json中声明即可。 我这里新建了一个highlight文件夹保存这些json文件

{
  "name": "@varlet/ui",
  // vscode
  "vetur": {
    "tags": "highlight/tags.json",
    "attributes": "highlight/attributes.json"
  },
  // webstorm
  "web-types": "highlight/web-types.json"
}

然后你就可以得到模板语法高亮，类型提示开始快乐的编码了......

写在后面

在我们的组件库Varlet也使用了这样的技巧，因为组件数量和属性很多，我们是通过直接编译开发文档的属性表格生成的json文件。但对于平时的业务开发，或者自定义的业务组件来说，就算是手写json文件也不会耗费多少时间，收益是很高的，祝大家编码愉快。