gridsome-helper-json を作っている

  • #Gridsome
  • #Vetur

殴り書き

Veturという VS Code 向けの拡張機能がある。
Vue.js の開発を助ける拡張機能で、公式から引用すると、

  • Syntax-highlighting
  • Snippet
  • Emmet
  • Linting / Error Checking
  • Formatting
  • Auto Completion
  • Debugging

を提供している。
動画スライドで説明がある。

helper-json はこのAuto Completionの部分の拡張をするものに当たる。

Vetur で Auto Completion を出すには

Auto Completion(suggest とも言うかもしれないが)は、日本語で言うところの自動補完で、コードを書くときにコードの提案をしてくれる機能である。
例えばこんな感じ
スクリーンショット 2019-02-24 22.24.49

この部分ってどうやって拡張するのかなと気に似合っていたところ、次の issue がヒットした。

octref 氏は Vetur の作者で、Nuxt 用に Auto Completion を実装したというもの。
詳細はこのリポジトリを見ると良い。

ということは、Gridsome 向けに Auto Complete の実装が可能ではないのか。

helper-json は他にもある

現在多数の snippet が登録されているようである。
ここにこれを追加したい

今のところ個人リポジトリで管理しているが、いずれ公式に譲渡するつもり。
PR はこれ

helper-json の構成

概要に関してはここに書いてある。
残念ながら、どのようなファイルの中をどのようなことを書けば良いのかまでは書いていないようであった。
なので、既存の helper-json を見ながら真似て作った。

たぶん、ここで json ファイルを読み込んで処理してると思うけど、コード読めてない。

tags.json

template内で autocomplete したいタグの定義を書く。

{
  "g-link": {
    "attributes": [
      "to",
      "replace",
      "append",
      "tag",
      "active-class",
      "exact",
      "event",
      "exact-active-class"
    ],
    "defaults": [":to"],
    "description": "Component for routing. Same as <router-link> now."
  },
  ...
}

attributesには、そのタグ内で使用する属性
defaultsには、そのタグが補完されたら自動でセットされる属性
descriptionには、そのタグの説明を書く

他にも項目があると思うけど、分からなかった。

attributes.json

属性の定義を書く。

{
  "to": {
    "type": "string | object",
    "description": "Denotes the target route of the link. When clicked, the value of the to prop will be passed to router.push() internally, so the value can be either a string or a location descriptor object."
  },
  ...
}

typeには、属性の型
descriptionには、属性の説明

npm に公開

これらを npm publish して Vetur は読み込むので、k の2つの json ファイルを含んだパッケージを publish する。

Vetur でパッケージを取り込む

コードを紹介しておくので、詳細はここを参照して欲しい。

最後に

以上で紹介は終わり。
今は PR が止まっているので、進展待ち。