【eslint-plugin-vue】配置后,不允许使用index.vue这种命名

目前安装的 eslint版本及插件:

    "eslint": "^8.46.0",
    "eslint-config-standard-with-typescript": "^37.0.0",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-n": "^16.0.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.16.1",

目前 .eslintrc.cjs 的配置如下:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['plugin:vue/vue3-strongly-recommended', 'standard'],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/no-mutating-props': 'off'
  },
  overrides: [
    {
      files: ['src/api/**/*.ts'],
      rules: {
        camelcase: 'off'
      }
    }
  ]
}

我使用的 vite+vue3, 安装了eslint-plugin-vue这个插件。

问题:

当我创建组件的时候,习惯性的写 index.vue
在这里插入图片描述
eslint-plugin-vue提示:
https://eslint.vuejs.org/rules/multi-word-component-names.html
在这里插入图片描述

Rule Details
This rule require component names to be always multi-word, except for root App components, and built-in components provided by Vue, such as <transition> or <component>. This prevents conflicts with existing and future HTML elements, since all HTML elements are single words.

规则详情
此规则要求组件名称始终为多个单词,除了根组件 App 和由 Vue 提供的内置组件,例如 或 。这样可以避免与现有和未来的 HTML 元素发生冲突,因为所有 HTML 元素都是单个单词。


解决方案:

1. 关掉这个规则:

需要在.eslintrc.cjs中rule中新增如下:

'vue/multi-word-component-names': 'off'

在这里插入图片描述

2. 按照配置的规则来:

把home文件下的index.vue 改成 HomeIndex.vue 或者 home-index.vue

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值