有沒有辦法阻止 Vue3 中的單字 view 名稱從 ESLint 取得錯誤?
每次執行 ESLint 時,我都會收到以下訊息:
1:1 error Component name "About" should always be multi-word vue/multi-word-component-names
我目前有這樣的設定:
檔案結構:
├── 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 ." }, ... }
P粉4652875922024-03-26 14:56:05
對於仍遇到此問題的用戶,請在 .eslintrc.js
檔案中的規則下新增以下內容
rules: { ... 'vue/multi-word-component-names': 0, }
P粉8506803292024-03-26 13:56:45
要停用所有檔案中的規則(甚至是 src/components
中的檔案):
///.eslintrc.js module.exports = { ⋮ rules: { 'vue/multi-word-component-names': 0, }, }
在 src/views/
的 ESLint 配置中覆寫
要只對src/views/**/*.vue
停用規則,請指定 overrides
設定:
///.eslintrc.js module.exports = { ⋮ overrides: [ { files: ['src/views/**/*.vue'], rules: { 'vue/multi-word-component-names': 0, }, }, ], }
注意:如果將VS Code 與ESLint 擴展,重新啟動ESLint 伺服器(透過命令面板 a> 的>ESLint:重新啟動ESLint Server
指令)或重新啟動IDE 可能需要重新載入設定。
src/views/
的目錄級配置也可以使用 src/views/**/*.vue 的規則設定檔" rel="noreferrer">.eslintrc.js
檔案在該目錄:
///src/views/.eslintrc.js module.exports = { rules: { 'vue/multi-word-component-names': 0, }, }