【vue eslint】報錯Component name “xxxxx“ should always be multi-word.eslintvue解決方案
報錯代碼
image
原因：
新手在組件命名的時候不夠規范，根據官方風格指南，除了根組件（App.vue）外，自定義組件名稱應該由多單詞組成，防止和html標簽沖突。而最新的vue-cli創建的項目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names規則，所以在編譯的時候判定此次錯誤。
解決方案：
關閉命名規則校驗
在根目錄下找到 .eslintrc.js 文件，同樣如果沒有則新建一個（注意文件前有個點），代碼如下
添加一行:
"vue/multi-word-component-names":"off",
文件內容：
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/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',
//在rules中添加自定義規則
//關閉組件命名規則
"vue/multi-word-component-names":"off",
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
以上是關閉命名規則，將不會校驗組件名，官方建議設置是根據組件名進行忽略
下面是忽略個別組件名寫法
// 添加組件命名忽略規則
"vue/multi-word-component-names": ["error",{
"ignores": ["index"]//需要忽略的組件名
}]
————————————————
版權聲明：本文為CSDN博主「wally94」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u013078755/article/details/123581070
