问题描述
在刚开始写我的个人博客的时候,控制台老是报错,报错原因也很奇怪
Component name "About" should always be multi-word
// 组件about要用多单词
原因分析:
之前学习vue时并没有问题,很奇怪于是就在网上搜索,但是没查到,
查来查去代码也没有错误,最后仔细看了下报错,发现 ERROR in [eslint]
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 [eslint]
于是就查了下eslint,发现eslint是vue脚手架创建项目时可选的一个语法检查器,用来统一规范,语法检查非常严格,对新手非常不友好。
解决方案:
使用官方提示的注解
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
但是使用起来非常麻烦,需要在代码各处加也非常不好看。
直接关闭eslint的语法检查
在vue-config.js
文件下配置lintOnSave
,直接关闭语法检查。
module.exports = defineConfig({
lintOnSave:false,
//关闭语法检查
})
但是这样感觉有点过于简单粗暴,而且为了规范代码我觉得还是开着比较好
单独关闭某条规则
首先查看报错看看自己报错的是什么规则
error Component name "About" should always be multi-word
vue/multi-word-component-names
我报错的是vue/multi-word-component-names
于是,
在package.json
配置文件中找到eslintConfig
配置项在其中新增rules
配置
规则
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {
/**
* 0表示关闭
* 1表示报warn
* 2表示报error
*/
"vue/multi-word-component-names": 0
}
},
另外也可以到官网文档上查询规则具体信息
最后我觉得能不关还是不要关比较好,习惯了之后就觉得没什么了,而且还可以提示自己代码的规范性
说在最后
安全申明:本人才疏学浅,若有任何谬误,欢迎指正