トップ/記事一覧
Template 内で未使用の変数を return している場合に警告する eslint（Nuxt Composition API）
Nuxt Composition API で、 setup 関数から return した変数が template 内で使える仕様になりました。僕たちのプロダクトもこれを使ってプロダクションコードを書いています。Composition API を導入して半年ほどプロダクトを運用してきたのですが、コードが徐々に肥大化してきているという現状です。
今日僕がリファクタを実施したファイルで、 template 内で使用していないのに、 setup 関数内で定義され、 return されている変数が存在するファイルだったので、ノイズになるので除去しようと、ファイル内で検索をかけて（実際の操作的には Cmd + D で選択していって）、template 内でヒットするものがなければ削除する、みたいな行程を踏んでリファクタを実施しました。
でもこれって人間がいちいち調べなくてもさすがに機械的に検知できるやろ、ということでツイートしてみたところ、eslint-plugin-vue にそのようなオプション（vue/no-unused-properties）があることを教えてもらいました（ありがとうございます）
自分たちのプロダクトに早速導入しようかなと思ったのですが、バージョンがもろもろ古く（eslint-plugin-vue v7.0.0 から導入されたっぽい）、ぱっとは導入できなかったかったので、まずは最小構成のプロジェクトを使って試してみることに（あとからもろもろバージョン上げて導入できた）
無事動いたので、自分たちのプロダクトの eslint-plugin-vue （正確にはこのプラグインをラップしている Nuxt のパッケージ）をバージョンアップして、無事動かすことができました。
JavaScript
rules: { 'vue/no-unused-properties': [ 'error', { groups: ['props', 'setup'], }, ], },
使用していない変数を警告してくれるようになってハッピーになりました。めでたしめでたし。
🌴 教えてくれた tagucch さんのブログ記事
https://random.tagucch.dev/posts/2021-09-29
🌴 最小構成リポジトリ