Vue.JSのカスタムdirectiveをIntelliJ(WebStorm)で補完が効くように

概要

Vue.JS のカスタム directive をプラグインとして IntelliJ で開発していると、補完が効かないし、利用部分で警告がでますよね。
これを解決する方法です。

下記のように警告がでる：

解決方法

1. package.json

package.json に下記追加

  "web-types": "./web-types.json"

2. web-types.json

package.json と同じ階層に web-types.json 追加。

web-types.json

{
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/v2-preview/web-types.json",
  "name": "プロジェクト名",
  "framework": "vue",
  "version": "1.0.0",
  "contributions": {
    "html": {
      "vue-directives": [
        {
          "name": "hoge"
        }
      ]
    }
  }
}

• "name": "hoge" のところで v-hoge というカスタム directive を登録しています。

これだけ！

参考

• JetBrains/web-types
• web-types example
• Vue3 directives registered through the plug-in method cannot be recognized