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

Question

我正在使用Vue ESLint 插件，它有一条不允许使用单字组件名称的规则。

但是，我也在使用 Nuxt，要在 Nuxt 中设置默认布局，您需要一个名为的 .vue 组件default.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 文件禁用该规则？

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

Answer 2

rules: { 'vue/multi-word-component-names': 0 } 试试这个方法

Answer 3

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

甚至更好： "vue/multi-word-component-names": 0

就像这样：

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