When creating a new Vue project, you often need to configure eslint to format the code, but you will encounter various problems during use, such as: Component name “Home” should always be multi-word.eslintvue/multi-word-component -names
is actually eslint's verification of naming, which should be 多词组件名称
named to prevent conflicts with existing and future HTML elements.
How to solve it, as follows:
The first way > Configure the .eslintrc.js file (*recommended)
Find the file in the root directory eslintrc.js
and configure the verification of the closed name. In this file, find rules
the configuration, as follows:
// 关闭名称校验
'vue/multi-word-component-names': 'off'
As shown in the figure:
This method can be solved by pro-testing. There is also a more standardized method, but it is a bit troublesome, and the specified file is not processed.命名规则校验
The second way > Ignore the specified file
Only the specified file is ignored, and others continue to be verified, as in the following code:
// 忽略指定组件命名
'vue/multi-word-component-names': ['error', {
ignores: ['Home'] // 在数组中放入组件的名称
}]
As shown in the picture:
The third way > turn off the verification of eslint, very rude (not recommended)
Also find eslintrc.js
the file and add the following code to its configuration:
// 关闭eslint校验
lintOnSave: false
As shown below: