vue/multi-word-component-namesのエラー解消

はじめに

初めてVueを触ってみようと思い、下記の記事を参考にさせていただきました。
Vue.js を vue-cli を使ってシンプルにはじめてみる
その際のエラー解消に時間がかかってしまったので備忘録として残しておきます。

遭遇したエラー

ERROR in [eslint] 
/my-project/src/components/myheader.vue
  1:1  error  Component name "myheader" should always be multi-word  vue/multi-word-component-names

✖ 1 problem (1 error, 0 warnings)

エラーメッセージの原因

コーポネント名が単一語であるためエラーで弾かれてしまったようです。

これはスタイルガイドのvue/multi-word-component-namesにあるように、将来的に他の要素と競合しないよう設定されたルールのようです。一部を除き、コーポネント名は常に複数語で命名しなければいけません。

/* ✓ GOOD */
Vue.component('todo-item', {
  // ...
})

/* ✗ BAD */
Vue.component('Todo', {
  // ...
})

対応するか否か

本来であればエラーメッセージ通りの命名規則に従っても良いのですが、このままだと不便なことが多いと思います。
今回はvue/multi-word-component-namesのルールをオフにすることで対応することにしました。

ESLintのルールを設定する方法

ESLintの設定を作成する方法は大きく分けて、下記の２種類あるようです。

• package.json内のeslintConfigプロパティを利用する
• プロジェクトのルートディレクトリに設定ファイルを作成する

package.json内のeslintConfigプロパティを利用する

今回はプロジェクト作成時にVue3のバージョンでインストールしているので、プロジェクト直下のpackage.json内のeslintConfigプロパティに記述を行います。

エラー原因となったvue/multi-word-component-namesのルールを無視する設定を行うため、下記の記述を追加しました。

package.json

    "rules": {
      "vue/multi-word-component-names": "off"
    }

プロジェクトのルートディレクトリーに設定ファイルを利用する

今回はこちらの方法を利用しませんでしたが、.eslintrc.jsなどのファイルをルートディレクトリに作成し、記述を追加することでESlintの設定を管理できます。

.eslintrc.js

    'rules': {
      'vue/multi-word-component-names': 'off'
    }

あとがき

今回ハマってしまった原因は、package.json内の設定を変更する必要があった（プロジェクトを作成する際に.eslintrcを参照する形にしていなかった）ことに気づくのが遅かったことです。公式ページを見ればすぐに解決する事案だっただけに悔しい...
初めて触る言語などは公式ページなどをしっかり確認しつつ進めることが大事ですね...!