vue eslint報錯:Component name “xxxxx“ should always be multi-word.eslintvue的4種解決方案

Posted on by

報錯代碼

vue-cli全新創建項目，並建立組件時提示報錯，報錯如下：

vscode標紅提示：

Component name "index" should always be multi-word.eslintvue/multi-word-component-names

npm run serve / yarn serve報錯：

 ERROR  Failed to compile with 1 error                                                                                                                                                      下午6:02:08

C:\Users\wally\Desktop\vscode\vue\seal\seal_web\src\views\home\index.vue
  1:1  error  Component name "index" should always be multi-word  vue/multi-word-component-names

✖ 1 problem (1 error, 0 warnings)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in 
C:\Users\wally\Desktop\vscode\vue\seal\seal_web\src\views\home\index.vue
  1:1  error  Component name "index" should always be multi-word  vue/multi-word-component-names

✖ 1 problem (1 error, 0 warnings)

webpack compiled with 1 error

原因

新手在組件命名的時候不夠規范，根據官方風格指南，除瞭根組件（App.vue）外，自定義組件名稱應該由多單詞組成，防止和html標簽沖突。

而最新的vue-cli創建的項目使用瞭最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之後就引用瞭vue/multi-word-component-names規則，所以在編譯的時候判定此次錯誤。

解決方案

方案一

改名

修改組件名為多個單詞，使用大駝峰命名方式或者用“-”連接單詞。但是有時候因為個別原因不能改名，此方案不好使，看下面兩個方案。

方案二：

關閉校驗

在根目錄下找到vue.config.js文件（如果沒有則新建一個），添加下面的代碼

lintOnSave: false

添加後文件示例：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //關閉eslint校驗
  lintOnSave: false
})

此方案治標不治本，隻是編譯時不報錯，如果使用vscode+eslint 會在文件頭標紅提示，強迫癥根本忍受不瞭，並且官方並不建議直接關閉校驗，所以推薦使用方案三

方案三（推薦）

關閉命名規則校驗

在根目錄下找到 .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"]//需要忽略的組件名
    }]

方案四(推薦):

方案三是關閉和忽略組件名規則，但是有時候還是需要團隊有個共同規范，不能關閉，同時文件名可能和組件名不一致時，例如我需要每個頁面入口為index.vue,但是組件名為MyHome,用忽略組件名的方式可能需要同時添加index和MyHome,就顯得很傻瓜。或者我需要路由組件忽略，非路由組件不忽略，那如何在這種情況下修改規則更好用呢？因此我找到瞭第四種方式。方案三是根據組件名忽略，此方案是根據文件進行關閉規則，更適用。

關閉某文件命名規則校驗

在根目錄下找到 .eslintrc.js 文件，同樣如果沒有則新建一個（註意文件前有個點），代碼如下

在文件的overrides中添加如下代碼：

{  
 files: ['src/views/index.vue','src/views/**/index.vue'],   // 匹配views和二級目錄中的index.vue
 rules: {
 'vue/multi-word-component-names':"off",
 } //給上面匹配的文件指定規則
}

其中的 files: [] 是用於匹配文件的，*號代表所有文件。index.vue也可以改成 *.vue，這就是匹配目錄下的所有vue文件

文件內容：

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',
  },
  overrides: [
        //這裡是添加的代碼
        { 
          files: ['src/views/index.vue','src/views/**/index.vue'],   // 匹配views和二級目錄中的index.vue
          rules: {
          'vue/multi-word-component-names':"off",
          } //給上面匹配的文件指定規則
        },
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

其實和方案三基本一致，隻是放的位置不同

總結

到此這篇關於vue eslint報錯:Component name “xxxxx“ should always be multi-word.eslintvue的4種解決方案的文章就介紹到這瞭,更多相關vue eslint報錯解決內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：