はじめに
こんにちは、がんがんです。
GitHub Copilot、Cline、Devinなど、生成AIを活用したコード生成・開発効率向上は日々進化しています。MCP、A2Aなどに始まり、普段利用しているツールのアップデート情報を追えなくなるくらいには進化が早いなと思っています。
そんな中
- AIが生成したコードが本当に合っているのか
- AIが生成したコードはFWが推奨する正しい実装なのか
を判断する必要性が2024年以前よりもさらに高まっていると感じています。
AIによるコード生成 + Linterによる静的解析で開発効率・精度を最大化するフェーズがすぐに来そうですね。
そこで本記事ではVue.js / NuxtにフォーカスしESLintプラグインを整理していきたいと思います。
ESLint plugins
eslint-plugin-vue: Vue.js ユーザーのためのESLintプラグイン
Vue.jsのESLintプラグインといえばeslint-plugin-vueです。Vue.js v2時代からお世話になっています。
2日前の04月30日に v10.1.0 がリリースされました。2025年3月にv10.0.0がリリースされており更なる進化に期待が高まります。
eslint-plugin-vuejs-accessibility: Vue.js + A11yのためのプラグイン
近年のWebフロントエンドで注目が集まっているアクセシビリティ(a11y)、こちらに対応するためのVue.js用プラグインです。
類似プラグインにeslint-plugin-vue-a11yがあります。こちらは現在メンテされていません。
eslint-plugin-vuejs-accessibilityについてはyamanokuさんが入門記事を執筆されています。こちらも合わせてご覧ください。
eslint-plugin-vue-scoped-css: <style>ブロックのためのプラグイン
eslint-plugin-vueは<template>、<script>がスコープ対象であり<style>プロックは静的解析してくれません。
そこで eslint-plugin-vue-scoped-css を利用します。
こちらのプラグインはeslint-plugin-vueを開発されているota-meshiさんが開発されているものです。
eslint-plugin-vue同様に開発・メンテありがとうございます。
eslint-plugin-vue-i18n: Vue.js + i18nのためのプラグイン
Vue I18n向けのプラグインとして eslint-plugin-vue-i18n があります。
こちらはIntlify organizationで管理されておりvue-i18nとセットで使いたいプラグインです。本プラグインが紹介されている記事をほとんど見たことないです。
Vue I18nまたはNuxt I18nユーザーは合わせての利用が推奨です。
eslint-plugin-jsoc: jsonファイルもESLintで静的解析したい
Vue.jsおよびNuxtのアプリ開発を行なっているとpackage.jsonを始めとした多くのjsonファイルを扱う機会もあります。
せっかくならjsonファイルもESLintで静的解析を行いたいものです。そんな時は eslint-plugin-jsonc が利用できます。
本プラグインもota-meshiさんが開発されています。頭が上がらないです。
jsonファイルのESLint pluginといえば2024年10月にESLint公式が以下のようなブログを公開しました。
ESLint公式がjson、markdownをサポートするというブログです。
CSSなどもサポートされつつありESLint公式の今後の展開も楽しみです。
では、ESLint公式がメンテしているeslint/jsonとの違いはどこでしょうか。
eslint-plugin-jsonc公式ドキュメント以下のように言及されています。
eslint-plugin-jsonc was created 4 years before [@eslint/json] and it has more rules than [@eslint/json].
@nuxt/eslint module: Nuxt + ESLintといればこれを使えば大丈夫
NuxtアプリユーザーであればNuxt公式が提供する Nuxt ESLint を利用することをオススメします。
Nuxt ESLintはVite、UnoCSS、Nuxt、ESLint Config Inspecterなどなどの多くのツール開発者であるAnthony Fuさんが主導で開発されています。
前述のeslint-plugin-vueや @typescript-eslintの設定が事前に提供されておりZero-configに近い形で利用できます。
Nuxt v2ユーザーであれば @nuxtjs/eslint-config、@nuxtjs/eslint-config-typescript、eslint-plugin-nuxtを目にしたことがあると思います。こちらのNuxt v3版です。
Nuxt ESLint については長くなってしまうため別途記事を展開予定です。
設定時に気になった点
Q. <i18n> カスタムブロック内はどのように解析すれば良いのか
Vue.jsが提供するSFC構文仕様にはカスタムブロックと呼ばれるものがあります。例えば以下のようにコンポーネントと文言を近い場所で管理することが可能になります。
<script setup lang="ts">
// 以下はNuxt I18nの利用例です。Vue I18nの場合は適宜読み替えてください
const { t } = useI18n();
</script>
<template>
<div>
<p>{{ t('title') }}
</div>
</template>
<i18n lang="yaml">
ja:
title: こんにちは
en:
title: Hello
</i18n>
カスタムブロックの例としてVue.js公式ドキュメントでは<ghq>や<i18n>が紹介されています。
ではこの<i18n>ブロック内はどのように静的解析すれば良いのでしょうか。eslint-plugin-vue-i18nのドキュメントには以下のように書かれていました。
More lint on JSON and YAML in <i18n> block
You can install eslint-plugin-jsonc and eslint-plugin-yml. These 2 plugins support Vue custom blocks.You can also use jsonc/vue-custom-block/no-parsing-error and yml/vue-custom-block/no-parsing-error rules to find JSON and YAML parsing errors.
前述したeslint-plugin-jsoncやeslint-plugin-ymlで解析可能とのことです。eslint-plugin-ymlもota-meshiさんが開発されています。
<i18n>カスタムブロックについては以前別の記事を書いています。合わせてご覧ください。
おわりに
本記事ではVue.js・Nuxtユーザー向けのESlintプラグインを整理しました。
生成AIによるコード生成需要に合わせてLintingの重要度はさらに上がっているように感じています。
「eslint-plugin-vueは利用しているがそれ以外はあまり使っていない」というユーザーも多いのではないかと思います。私もその一人でした。
この機会にご自身のESLint設定を見直してみてはいかがですか？
他にオススメのプラグインがあれば是非コメントで教えて欲しいください🙏
Discussion