web-types: IDEA实现vue-directive自定义指令的提示(以Ruoyi为例)

2 阅读1分钟

Jetbrains的IDE提示需要通过web-types.json来实现

我已经通过这个mr github.com/yangzongzhu…
实现了对ruoyi-vue自定义指令的提示

  1. v-hasPermi
    image.png
  2. v-hasRole
    image.png
  3. v-copyText
    image.png
  4. v-copyText:callback
    image.png

其他的自定义指令,可以参照github.com/zl7261/web-… 这个web-types.json里面的实际用法进行提示

vue自定义指令的定义在"vue-directive"
属性名称:

  1. name 指令名称
  2. modifier 指令的修饰符 比如v-model.lazy
  3. argument 指令的参数 比如ruoyi自定义指令 v-hasPermi="[system:user:list]"

代码实现

需要在package.json中引入

    "web-types": "./web-types.json"
{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "framework": "vue",
  "js-types-syntax": "typescript",
  "description-markup": "markdown",
  "framework-config": {
    "enable-when": {
      "file-extensions": ["vue"]
    }
  },
  "contributions": {
    "html": {
      "vue-directives": [
        {
          "name": "hasPermi",
          "description": "菜单权限.",
          "doc-url": "https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html#%E6%9D%83%E9%99%90%E4%BD%BF%E7%94%A8",
          "attribute-value": {
            "type": "string[]"
          }
        },
        {
          "name": "hasRole",
          "description": "角色权限.",
          "doc-url": "https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html#%E6%9D%83%E9%99%90%E4%BD%BF%E7%94%A8",
          "attribute-value": {
            "type": "string[]"
          }
        },
        {
          "name": "copyText",
          "description": "复制文本指令.",
          "doc-url": "./src/directive/common/copyText.js",
          "attribute-value": {
            "type": "string",
            "description": "要复制的文本内容.",
            "required": false
          },
          "argument": {
            "pattern": "callback",
            "description": "复制成功后的回调.",
            "required": false
          }
        }
      ]
    }
  }
}

已知问题

  1. IDEA不会正确提示自定义指令的value类型,尽管已经在web-type.json中定义好了
  2. IDEA不会正确统计自定义指令的引用,删除时safe delete不会统计代码是否被引用