vue.jsvue-routereslintvuejs3vite

ESLint Vue multiword components


Is there a way to stop getting error from ESLint for single word view name in Vue3?

Every time I run ESLint, I get following message:

  1:1  error  Component name "About" should always be multi-word  vue/multi-word-component-names

I currently have this setup:

file structure:

├── index.html
├── node_modules
├── npm
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.svg
│   ├── components
│   │   └── Menu.vue
│   ├── env.d.ts
│   ├── main.ts
│   ├── router
│   │   └── index.ts
│   └── views
│       ├── About.vue
│       └── Home.vue
├── tsconfig.json
└── vite.config.ts

.eslintrc:

{
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "rules": {}
}

package.json

{
...
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .ts,vue --ignore-path .gitignore ."
  },
...
}

Solution

  • Option 1: Disable globally

    To disable the rule in all files (even those in src/components):

    // <projectRoot>/.eslintrc.js
    module.exports = {
      ⋮
      rules: {
        'vue/multi-word-component-names': 0,
      },
    }
    

    Option 2: overrides in ESLint config for src/views/

    To disable the rule only for src/views/**/*.vue, specify an overrides config:

    // <projectRoot>/.eslintrc.js
    module.exports = {
      ⋮
      overrides: [
        {
          files: ['src/views/**/*.vue'],
          rules: {
            'vue/multi-word-component-names': 0,
          },
        },
      ],
    }
    

    Note: If using VS Code with the ESLint Extension, restarting the ESLint Server (through Command Palette's >ESLint: Restart ESLint Server command) or restarting the IDE might be needed to reload the configuration.

    Option 3: Directory-level config for src/views/

    It's also possible to disable the rule for src/views/**/*.vue with an .eslintrc.js file in that directory:

    // <projectRoot>/src/views/.eslintrc.js
    module.exports = {
      rules: {
        'vue/multi-word-component-names': 0,
      },
    }