【vue eslint】報(bào)錯(cuò)Component name “xxxxx“ should always be multi-word.eslintvue解決方案

報(bào)錯(cuò)代碼

image

原因：

新手在組件命名的時(shí)候不夠規(guī)范，根據(jù)官方風(fēng)格指南，除了根組件（App.vue）外，自定義組件名稱(chēng)應(yīng)該由多單詞組成，防止和html標(biāo)簽沖突。而最新的vue-cli創(chuàng)建的項(xiàng)目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names規(guī)則，所以在編譯的時(shí)候判定此次錯(cuò)誤。

解決方案：

關(guān)閉命名規(guī)則校驗(yàn)

在根目錄下找到 .eslintrc.js 文件，同樣如果沒(méi)有則新建一個(gè)（注意文件前有個(gè)點(diǎn)），代碼如下

添加一行:

"vue/multi-word-component-names":"off",

文件內(nèi)容：

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中添加自定義規(guī)則
     //關(guān)閉組件命名規(guī)則
     "vue/multi-word-component-names":"off",
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

以上是關(guān)閉命名規(guī)則，將不會(huì)校驗(yàn)組件名，官方建議設(shè)置是根據(jù)組件名進(jìn)行忽略
下面是忽略個(gè)別組件名寫(xiě)法

// 添加組件命名忽略規(guī)則
    "vue/multi-word-component-names": ["error",{
       "ignores": ["index"]//需要忽略的組件名
    }]

————————————————

版權(quán)聲明：本文為CSDN博主「wally94」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/u013078755/article/details/123581070