Open6

eslint-plugin-vueについて調べる

Vue.js
tapontapon

どんなルールがあるのか

ルールのページ
https://eslint.vuejs.org/rules/

ルールを見るときにマークが記されている、意味はそれぞれ下記の通り（翻訳ツール使っているので変な日本語かも）

マーク 意味
🔧 --fixオプションを使って報告された問題のいくつかを自動的に修正できるもの
💡 報告された問題の一部がエディタの提案によって手動で修正可能であるもの
⚠️ コード内の可能性のあるロジックエラーに関連するもの
🔨 別の方法を提案するもの
💄 コードがどのように実行sれるかよりも、コードがどのように見えるかに注意を払うもの

ルールにもいろんな種類がある

ルール分類 翻訳
Base Rules (Enabling Correct ESLint Parsing) 基本ルール（ESLintの正しい解析を可能にするためのルール）
Priority A: Essential (Error Prevention) 優先度 A: Essential (エラー防止)
Priority B: Strongly Recommended (Improving Readability) 優先度 B: 強く推奨 (可読性の向上)
Priority C: Recommended (Potentially Dangerous Patterns) 優先度C：推奨（潜在的に危険なパターン）
Uncategorized 未分類
Extension Rules 拡張ルール
Deprecated 廃止予定
Removed 削除済み

細かいルールは後で見よう

tapontapon

ルールの設定方法とプリセット

https://eslint.vuejs.org/user-guide/

設定方法

ChatGPTに聞いてみたところ、2つの設定方法がありそう。

eslint.config.js は比較的新しい「フラット構成（flat config）」方式
.eslintrc は従来の「階層構成（eslintrc-style config）」方式です。
項目 .eslintrc 系（旧構成） eslint.config.js（新構成）
対象形式 .eslintrc, .eslintrc.js, .eslintrc.json など eslint.config.js
形式 階層的・継承ベース（extends） フラット（配列でルールを明示的に定義）
柔軟性 やや限定的（extends中心） 非常に柔軟（条件分岐やファイル単位設定も可能）
初心者向け わかりやすい やや複雑だが強力
ESLintバージョン v8以前から使用可能 v8.21.0以降で正式サポート

使うなら新しい方で良いかなと思う

プリセット

eslint.config.js（新構成）の場合

プリセット 説明
*.configs["flat/base"] ESLintによる正しい構文解析を可能にする設定とルール
*.configs["flat/essential"] base に加え、エラーや意図しない挙動を防ぐルールを含みます
*.configs["flat/strongly-recommended"] 上記に加えて、コードの可読性や開発体験を大幅に向上させるルールを追加
*.configs["flat/recommended"] 上記に加えて、コミュニティで一般的とされる主観的なデフォルトルールを導入し、一貫性を確保
tapontapon

コンポーネントを検出する仕組み

以下のいずれかの条件を満たすコードに対してルールが適用される

  • Vue.component()
  • Vue.extend()
  • Vue.mixin()
  • app.component()
  • app.mixin()
  • createApp()
  • defineComponent()
  • .vue や .jsx ファイル内の export default {}
tapontapon

ルールの無効化

.vue ファイルの <template> 内やブロックレベルで特定の ESLint ルールを一時的に無効にしたい場合は、 というような HTMLコメント風の記述で無効にすることができる

<template>
  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
  <div a="1" b="2" c="3" d="4">
  </div>
</template>
tapontapon

エディタ統合

Visual Studio Code

公式には、Microsoft が提供する dbaeumer.vscode-eslint 拡張機能を使用する
この拡張機能はデフォルトでは *.js や *.jsx ファイルのみを対象としているため、.vue ファイルも ESLint によってチェックさせるには、eslint.validate オプションを設定する必要がある

例：.vscode/settings.json

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

Vetur を使用している場合：
.vue ファイルの <template> に対する Vetur のデフォルトバリデーションを避けるために、以下のように設定してください：

"vetur.validation.template": false

他のエディタ統合についても書いてある

https://eslint.vuejs.org/user-guide/#editor-integrations