Is there a way to prevent single word view names in Vue3 from getting errors from ESLint?
Every time I run ESLint, I get the 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 ." }, ... }
For those who are still experiencing this issue, please add the following under the rules in the
.eslintrc.js
fileOption 1: Disable globally
To disable rules in all files (even files in
src/components
):Option 2:
Override
src/views/in the ESLint configuration in
To only configure the rule configuration file of
src/views/**/*.vue
Disable rules, please specifyoverrides
Configuration :Note: If you are using VS Code with the ESLint extension, restart the ESLint server (via the Command Panel a>'s
>ESLint: Restarting the ESLint Server
command) or restarting the IDE may require reloading the configuration.Option 3: Directory-level configuration of
src/views/
You can also use src/views/**/*.vue" rel="noreferrer">
.eslintrc.js
file in this Table of contents: