vue.jsのvue/multi-word-component-namesエラーの対処法

4086 回閲覧されました

公開日 : 2023年4月8日
最終更新日 : 2024年9月1日

みなさんこんにちは、jonioです。

多分vue.jsのバージョン2ではなかった気がするのですがバージョン3を初めてインストールしてコンポーネントを使おうとしたら↓のエラーになりました。

	ERROR in [eslint]
	/Users/hayatakyouhei/mouse-stalker/src/components/Mousestalker.vue
	1:1 error Component name "Mousestalker" should always be multi-word vue/multi-word-component-names

	1 problem (1 error, 0 warnings)

view raw エラー hosted with

by GitHub

ネットを調べると「vue/multi-word-component-names」のエラーの対処法が見つかったのですが次に同じ状況になった時の対処法としてこの記事を残します。

私のパソコン環境はMacbookです。

目次 [隠す]

1 vue/multi-word-component-namesの原因
2 .eslintrc.jsの編集

vue/multi-word-component-namesの原因

Vue.jsをインストールした時に「ESLint」の設定をしている場合に起きるのだと思いますが「vue/multi-word-component-names」というルールがあり将来的に他のコンポーネントを使った時に同じ名前のバッティングを防ぐためにコンポーネント名に複数の名称を使いましょうという物です。

だからコンポーネント名を「Super」とか「Power」とかの1語にせず「SuperPower」みたいな2語以上を繋げればいいのですが私は「MouseStalker」で今回のエラーになりました、、

だから対処法を調べました。

.eslintrc.jsの編集

.eslintrc.jsは隠しファイルになっているのですが「shift + command + .（キーボードの「る」）」を押すと表示されます。

.eslintrc.jsをエディタで開くと↓が表示されます。

	module.exports = {
	root: true,
	env: {
	node: true
	},
	'extends': [
	'plugin:vue/vue3-essential',
	'eslint:recommended'
	],
	parserOptions: {
	parser: '@babel/eslint-parser'
	},
	rules: {
	'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
	'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
	}
	}

view raw eslintrc.js hosted with

by GitHub

↓の様にコードの追加をします。

	module.exports = {
	root: true,
	env: {
	node: true
	},
	'extends': [
	'plugin:vue/vue3-essential',
	'eslint:recommended'
	],
	parserOptions: {
	parser: '@babel/eslint-parser'
	},
	rules: {
	'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
	'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
	'vue/multi-word-component-names': 'off' //この行を追加
	}
	}

view raw コードの追加 hosted with

by GitHub

これでエラーがなくなります。