亲宝软件园·资讯

展开

vue eslint报错解决

wally94 人气:0

报错代码

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
      }
    }
  ]
}

其实和方案三基本一致,只是放的位置不同

总结

加载全部内容

相关教程
猜你喜欢
用户评论