Report an error code
vue-cli creates a new project and creates a component and reports an error, with the following error:
VScode red mark prompt:
Component name "index" should always be /multi-word-component-names
npm run serve / yarn serve error:
ERROR Failed to compile with 1 error afternoon6:02:08
C:\Users\wally\Desktop\vscode\vue\seal\seal_web\src\views\home\
1:1 error Component name "index" should always be multi-word vue/multi-word-component-names✖ 1 problem (1 error, 0 warnings)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in
C:\Users\wally\Desktop\vscode\vue\seal\seal_web\src\views\home\
1:1 error Component name "index" should always be multi-word vue/multi-word-component-names✖ 1 problem (1 error, 0 warnings)
webpack compiled with 1 error
reason
Novice are not standardized enough when naming components. According to the official style guide, in addition to root component (), custom component names should be composed of multiple words to prevent conflicts with html tags.
The latest project created by vue-cli uses the latest vue/cli-plugin-eslint plug-in. After vue/cli-plugin-eslint v7.20.0, the vue/multi-word-component-names rule is referenced, so the error is determined during compilation.
Solution
Plan 1
Rename change
Modify the component name to multiple words, use the big camel naming method or use "-" to connect words. However, sometimes the name cannot be changed due to some reasons. This plan is not good, so look at the following two plans.
Plan 2:
Close verification
Find the file in the root directory (if not, create a new one), add the following code
lintOnSave: false
Example of file after adding:
const { defineConfig } = require('@vue/cli-service')
= defineConfig({
transpileDependencies: true,
//Close eslint verification lintOnSave: false
})
This solution treats symptoms but not root causes, but does not report errors during compilation. If you use vscode+eslint, it will indicate red on the file header. Obsessive-compulsive disorder cannot be tolerated at all, and the official does not recommend turning off the verification directly, so it is recommended to use solution 3
Plan 3 (recommended)
Close naming rules verification
Find the . file in the root directory. If there is no, create a new one (note that there is a dot in front of the file). The code is as follows
Add a line:
"vue/multi-word-component-names":"off",
File content:
= {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': .NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': .NODE_ENV === 'production' ? 'warn' : 'off',
//Add custom rules in rules //Close component naming rules "vue/multi-word-component-names":"off",
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}The above is the closing naming rule, and the component name will not be verified. The official suggests that the setting is to be ignored based on the component name.
Ignore individual component names
// Add component naming to ignore rules "vue/multi-word-component-names": ["error",{
"ignores": ["index"]//Component name that needs to be ignored }]
Plan 4 (recommended):
The third solution is to close and ignore component name rules, but sometimes the team still needs to have a common specification that cannot be closed. At the same time, when the file name may be inconsistent with the component name, for example, I need the entry of each page to be MyHome, but the component name is MyHome. It may be necessary to add index and MyHome at the same time by ignoring the component name, which is very stupid. Or I need to ignore the routing component, but not the non-routing component, so how can I modify the rules in this case be more useful? So I found the fourth way. The third solution is to ignore the component name. This solution is to close the rules based on the file, which is more applicable.
Close verification of a file naming rule
Find the . file in the root directory. If there is no, create a new one (note that there is a dot in front of the file). The code is as follows
Add the following code to the overrides of the file:
{
files: ['src/views/','src/views/**/'], // Match the views and the secondary directory rules: {
'vue/multi-word-component-names':"off",
} //Specify rules for the above matching files}
The files: [] are used to match files, and the * number represents all files. It can also be changed to *.vue, which is to match all vue files in the directory
File content:
= {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': .NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': .NODE_ENV === 'production' ? 'warn' : 'off',
},
overrides: [
// Here is the added code {
files: ['src/views/','src/views/**/'], // Match the views and the secondary directory
rules: {
'vue/multi-word-component-names':"off",
} //Specify rules for the above matching files
},
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}In fact, it is basically the same as the three plan, but the placement is different
Summarize
This is the article about the 4 solutions of vue eslint error report: Component name “xxxxx” should always be . For more related vue eslint error report, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!