Vue SFC(.vue)を使ってコンポーネントに分割し疎結合にすることでコードの見通しを良くし負債化を抑制できますが、適切なタイミングで分割できずコンポーネントが大きくなりすぎると見通しが悪くなり負債になってしまうので行数とかでエラーにできないかなと思って調べていたところeslint-plugin-vueで簡単に検知できそうだったのでメモ📝
やり方は以下のようにvue/max-lenの設定をruleに入れて上げるだけです。
{ ... "rules": { "vue/max-len": ["error", { "code": 150 }], ] }, }
上記の設定だと150行を超えるとeslint実行時にエラーとなります。
他にもtemplateやscriptだけ行数を制限したりできるようです(便利✨ 詳しくは以下の公式ドキュメントをご確認ください。
意外とplugin:vue/vue3-recommendedでデフォルトで設定されてないけど設定しておくと良さそうなRule結構ありそう。
追記(2023/09/24)
以下で公式でtemplate,script,styleの行数を指定できるruleが追加された 🎉
