如何针对单个.vue文件禁用vue/multi-word-component-names eslint规则？

Question

我正在使用Vue ESLint插件，其中有一个规则不允许单个词组件名称。

然而，我也在使用Nuxt，在Nuxt中设置默认布局需要一个名为default.vue的.vue组件，这会引发ES Lint规则错误。

我似乎无法仅在那个非常小的.vue文件中禁用它...

<template>
    <div>
        <Header/>
        <Nuxt/>
    </div>
</template>

但如果我在我的 .eslintrc.js 中禁用这个规则，它就能工作。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier',
  ],
  plugins: [],
  // add your custom rules here
  rules: {
    'vue/multi-word-component-names': 'off',
  },
}

有没有一种方法可以仅针对一个Vue文件禁用规则？

- Carson Wood

---

这个回答解决了你的问题吗？如何针对特定文件关闭eslint规则 - Estus Flask

就我所知，这个规则完全不切实际，可以永久禁用。 - Estus Flask

这被标记为必要的：https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential - kissu

Answer 1

在您的情况下，您可以进行替换

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

带有：

'vue/multi-word-component-names': ['error', {
  'ignores': ['default']
}]

这将为名为“default”的所有文件设置规则以“允许”的方式。

您可以在此处阅读更多相关信息：https://eslint.vuejs.org/rules/multi-word-component-names.html

- Ahmad Ibrahim

---

谢谢，它正在工作。 - Titus Sutio Fanpula

我收到了错误信息“未找到规则'vue/no-reserved-component-names'的定义 vue/no-reserved-component-names”。 - ikreb

在哪里找到它？ - Mira

Answer 2

规则: {'vue/multi-word-component-names': 0} 尝试这种方式

- HJW

---

这个功能不是和现有的答案等价吗？ - Jeremy Caney

@JeremyCaney 和哪一个一样？它是0而不是关闭。 - HJW

这对我有用。谢谢。 - Titus Sutio Fanpula

这个对我有用。谢谢。上面Ahmad Ibrahim的答案没有起作用。 - DevNik

Answer 3

前往 package.json，在 eslintConfig 对象中添加以下规则："vue/multi-word-component-names": "off"

或者更好的方法是： "vue/multi-word-component-names": 0

就像这样：

- Gass

Answer 4

您可以覆盖规则，仅适用于特定文件。

以下是.eslintrc.js的配置

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier',
  ],
  plugins: [],
  overrides: [
    {
      files: ['src/components/default.vue'],  // Change this to default.vue path
      rules: {
        'vue/multi-word-component-names': 'off',
      }
    }
  ]
}

- nnfans

Answer 5

您应该在package.json中设置eslintConfig。

您只需要将vue / multi-word-component-names设置为0即可

规则： 'vue / multi-word-component-names'：0 }

- Levan Gogoladze

Answer 6

只需在vue.config.js文件中添加以下行：

module.exports = defineConfig({
  ....
  lintOnSave: false
})

- Rehan Syed

Answer 7

1. 前往 vue.config.js 文件。

2. 在文件中添加 lintOnSave:false。

- Kürşat Yıldırım

Answer 8

1. 运行命令 npm install standardx --global。

2. 在 vue.config.js 中添加 lintOnSave:false。

3. 在 App.vue 模板中添加 div 作为父元素，并将您正在使用的图像和组件包装在其中。

- Aditi

Answer 9

以下是解决此问题的两种方法。

1 使用CamelCase最少两个单词来命名组件名称。

export default {
name: "HeaderComponent" // Header to HeaderComponent
}

2 将以下代码添加到 package.json:eslintConfig.rules 中以禁用此规则。

"vue/multi-word-component-names": 0

3.从node_modules中删除eslint包。

$ npm remove @vue/cli-plugin-eslint

- HamzaMushtaq

Answer 10

我尝试了上面所有关于名为"Header.vue"的组件的答案，但都没有起作用。最后，我添加了一个注释来禁用eslint中的规则，就像这样，

从：

<script lang="js">
    export default {        
        name: 'Header',
    };
</script>

给：

<script lang="js">
    export default {
        // eslint-disable-next-line
        name: 'Header',
    };
</script>

- Latin Warrior