ESLint Vue 多字组件

Question

有没有办法阻止 Vue3 中单字视图名称的 ESLint错误？

\n

每次运行 ESLint 时，我都会收到以下消息：

\n

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

\n

我目前有这样的设置：

\n

文件结构：

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 npm\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 logo.svg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Menu.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 env.d.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 router\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 About.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Home.vue\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite.config.ts\n

\n

.eslintrc：

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 npm\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 logo.svg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Menu.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 env.d.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 router\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 About.vue\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Home.vue\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite.config.ts\n

\n

包.json

\n

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

\n

Answer 1

选项 1：全局禁用

\n

要禁用所有文件中的规则（甚至是 中的文件src/components）：

\n

// <projectRoot>/.eslintrc.js\nmodule.exports = {\n  \xe2\x8b\xae\n  rules: {\n    \'vue/multi-word-component-names\': 0,\n  },\n}\n

\n

选项 2：overrides在 ESLint 配置中src/views/

\n

要仅禁用规则src/views/**/*.vue，请指定overrides配置：

\n

// <projectRoot>/.eslintrc.js\nmodule.exports = {\n  \xe2\x8b\xae\n  overrides: [\n    {\n      files: [\'src/views/**/*.vue\'],\n      rules: {\n        \'vue/multi-word-component-names\': 0,\n      },\n    },\n  ],\n}\n

\n

注意：如果将 VS Code 与ESLint Extension一起使用，则可能需要重新启动 ESLint 服务器（通过Command Palette的命令）或重新启动 IDE 来重新加载配置。>ESLint: Restart ESLint Server

\n

选项 3：目录级配置src/views/

\n

还可以禁用该目录中文件src/views/**/*.vue的规则：.eslintrc.js

\n

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

\n

Answer 2

.eslintrc.js对于仍然遇到此问题的用户，请在文件中的规则下添加以下内容

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

Answer 3

有一个简单的解决方案。您需要使用多个单词来定义您的组件名称，正如它所指出的那样。应为 PascalCase，如下所示；

例如：AboutPage.vue