はじめに
初めて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のルールを無視する設定を行うため、下記の記述を追加しました。
"rules": {
"vue/multi-word-component-names": "off"
}
プロジェクトのルートディレクトリーに設定ファイルを利用する
今回はこちらの方法を利用しませんでしたが、.eslintrc.jsなどのファイルをルートディレクトリに作成し、記述を追加することでESlintの設定を管理できます。
'rules': {
'vue/multi-word-component-names': 'off'
}
あとがき
今回ハマってしまった原因は、package.json内の設定を変更する必要があった（プロジェクトを作成する際に.eslintrcを参照する形にしていなかった）ことに気づくのが遅かったことです。公式ページを見ればすぐに解決する事案だっただけに悔しい...
初めて触る言語などは公式ページなどをしっかり確認しつつ進めることが大事ですね...!