eslint-plugin-gridsomeを作った
VueのSFCのカスタムブロックに何も当たらない
以前こんな記事を書くぐらいGridsomeに魅了されたわけですが、一つ気になることがありました。
それはESlintのfix、もしくはPrettierがカスタムブロックに効かないということです。
著者はVSCodeでVeturを使用しSFCでVueを書いています。
Gridsomeは<page-query>や<static-query>といったGridsome独自のカスタムブロックにGraphQLを書き、Dataを拾ってきます。
このカスタムブロックは現状Vue公式が正式に認めたブロックではないので、公式が作成しているeslint-plugin-vueがもちろん対応しているわけもなく、最近Vueに対応したPrettierもこの独自ブロックに対応しているわけでもありません。
脱線しますが、Veturはカスタムブロックのシンタックスハイライトが定義可能です。詳しくはこちらを御覧ください。
現状graphqlという項目がありませんが、こちらのissueで取り上げられています。
Gridsomeにissueを立てる
既にこのことに関して構想があるかもしれないので、issueを立てました。
しかし反応が全然ありませんでした。
「もうこの際自分で作ってみて提案するか。駄目だったとしてもいい経験になるし」という考えから、自分で作ってみることにしました。
ESlintのルール作成
PrettierかESlintか
Prettierにはpluginがいくつかありますが、それはPrettierが現在対応していない言語の開発用パッケージ（後に本体に組み込まれる）という認識でした。 現段階ではどっちにしようか決めかねてましたが、Prettierのプラグインではなさそうかも？？って思ってました。
ESlintのルールの作り方を調べる
ESlintの公式には開発者向けのページが存在します。
その中でも著者はRuleを作りたいわけですので、こちらのページを眺めました。
挫折
というわけで、全く理解ができませんでした。
そもそもASTがわかってなかったわけです。
eslint-jpにてissueを立てる
途方に暮れているとこちらの記事を発見しました。
早速質問させていただきました。
同時にこちらの記事を参考にルールの作り方もざっくり理解しました。
Toru Nagashimaさんには、全く理解が追いついていない著者に対してとても親切丁寧にアドバイスをしていただきました。本当にありがとうございます。
また、こちらのイベントでゆうてんさんにASTとはなにか、ゆうてんさんが作っているmarkuplintを参考にしながらlintが適用されていく過程、著者がESlintで何をしたいのかの整理を手伝っていただきました。ありがとうございます。そしていつもありがとうございます。
作っていることを発信する
同時進行でTwitterでの情報の発信も行いました。
殴り書いた #はてなブログ #gridsome
— チャンカツ@ほうれん草 (@tyankatsu5) 2018年11月28日
eslint-gridsomeを作ってみている【殴り書き】 - tyankatsu’s bloghttps://t.co/5ujoGXQ0Cw
この内容がGridsomeコアメンバーの目に留まり、以前投げたissueの返事が来ました。 試したいということだったので、ユニットテストも書き終えていたので、パッケージを公開し、試してもらいました。
公式のDiscordを覗くと、著者が試行錯誤していたリポジトリが取り上げられていました。
現状
まだ返事待ちの状態ですが、公式のリポジトリに含まれたらいいなーという感じです。
最後に
OSSの良いところは、簡単に要望や質問を投げられるところです。 運営者の目に止まらないところでやんややんや言うのも良いですが、直接意見を投げてみると進展があったりすると思いますので、著者は今後も情報発信をしてみたいです。
2018/12/09 追記
こうなりました。
