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 ."
},
...
}
overrides in ESLint configSpecify an overrides config for src/views/**/*.vue to disable that rule:
// <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.
ESLint supports configuration per directory, so you could disable that particular rule just for the src/views directory with its own .eslintrc.js:
// <projectRoot>/src/views/.eslintrc.js
module.exports = {
rules: {
'vue/multi-word-component-names': 0,
},
}