本セッションの登壇者
セッション動画（YouTubeチャンネル登録もお願いします。）
太田です。よろしくお願いします。
eslint-plugin-vueでより質の高い<script setup>を実装する というテーマで発表させていただきます。
太田と申します。Vue.jsのコアメンバーで、eslint-plugin-vueのメンテナンスを担当しています。Stylelintというチームにも所属しています。フューチャーで働いています。もし、転職を考えている方は、エンジニア採用を行っているのでぜひ検討してみてください。
<script setup>とは
<script setup>とは、Vue.jsのバージョン3.2から正式導入された単一ファイルコンポーネントの構文です。
ESLintでできること
ESLintはJavaScriptのソースコードをチェックするツールです。すべてのルールはON/OFF可能で、プラグインを追加することも可能です。Checkルールによっては、自動修正してくれる場合もあります。
eslint-plugin-vueを導入することで、Vueの単一ファイルコンポーネント.vueもチェックできるようになったり、新しいルールも追加されたりします。
「最近だと型チェックはTypeScriptで、フォーマットはPrettierでできるのでESLint、必要なんですか?」という話もあったりしますが、ESLintを使用することで、より多くの問題を解決をチェックすることができます。
また、チームの方針に合わせたチェックもできます。たとえば、正規表現のReDoSの脆弱性があるかのチェックや、チームの方針で文字列結合するときに+演算子の代わりにテンプレートリテラルを使うなど、統一することができます。Prettierでは解決できないフォーマットを統一することもできます、templateでコンポーネントを記述する際に、パスカルケースでの記述か、ケバブケースでの記述かを統一することもできます。
さらに、プラグインの追加により、チェックを増やすこともできます。たとえば、アクセシビリティの対応のチェックをしたいときは、それ用のプラグインを入れることができます。
つまり、ESLintを扱うことで、より質の高いソースコードを維持できたり、レビューコストを最小限にできるということです。
<script setup> × eslint-plugin-vue
「<script setup>にも対応していますか？」について、はい、対応しています。
eslint-plugin-vueを導入することで、<script setup>をチェックすることができます。eslint-plugin-vueは、Vue３.xおよび２.xの両方をサポートしています。<script setup>、Composition API、Options APIもサポートしています。
typescriptもさらに構成追加することで追加できたり、最近ではPugtemplateもチェックできるものも誕生しているようです。
<script setup>で便利だと思うルールを、比較的マイナーなものからいくつか紹介します。
・no-undef-components
<script setup>の構文で、コンポーネントをテンプレートで使うときにimportしていないコンポーネントをチェックしてくれます。グローバルコンポーネントを登録しているときに、importしていないコンポーネントを使用できる場合がありますが、チェックの設定でチームの方針に合わせてより正確にチェックすることができます。
・no-undef-properties
前述ではコンポーネントでしたが、こちらはプロパティの話です。こちらも、グローバルの問題もありますが、チームに合わせて設定することで正確にチェックすることができます。
ほかにもいろいろなルールがあります。
eslint-plugin-vueの今後
eslint-plugin-vueの今後ですが、現在 バージョン9を計画作業中です。<script setup>で設定が面倒な箇所が改善される予定です。
まとめ
<script setup>を使用しても、eslint-plugin-vueを使用してより質の高いソースコードを維持でき、レビューコストを最小限にできます。eslint-plugin-vue単体で200を超えるルールを持っているので、ぜひチェックしてほしいと思っています。きっとあなたのチームで使えるルールが見つかるのではないかと思うので、ぜひ見てみてください!
以上です。ご清聴ありがとうございました。
