How to disable vue/multi-word-component-names eslint rule for just one .vue file?

user_2052752 0
Viewed 32920

I am using the Vue ESLint plugin and it has a rule for not allowing single word component names.

However, I am also using Nuxt, and to set a default Layout in Nuxt you need a .vue component named default.vue which throws the ES Lint rule errors.

I can't seem to get it to just disable in that one .vue file that is actually pretty small...

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

But if I disable the rule in my .eslintrc.js then it works.

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

Is there a way to disable the rule for just one Vue file?

eslintrc vuejs2 nuxt.js eslint vue.js
7 Answers
user_51903860

rules: { 'vue/multi-word-component-names': 0 } try this way

user_50765980

Just the below line the vue.config.js file:

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

You should have eslintConfig in package.json.

You need just set vue/multi-word-component-names to 0

rules: { 'vue/multi-word-component-names': 0 }

user_196403310

In your case, you can replace

vue.config.js

with:

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

  1. Go to the vue.config.js file

  2. Add lintOnSave:false to the file.

user_169602630

Step1 - Run Command (npm install standardx --global).

Step2 - In vue.config.js, add lintOnSave:false.

Step3 - In App.vue inside template, add div as parent element and wrap your image and component that you are using in that.

user_200004140
Related