关于vue关闭eslint校验

问题描述

在刚开始写我的个人博客的时候，控制台老是报错，报错原因也很奇怪

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
    }
  },

另外也可以到官网文档上查询规则具体信息

---

最后我觉得能不关还是不要关比较好，习惯了之后就觉得没什么了，而且还可以提示自己代码的规范性

---

说在最后

安全申明：本人才疏学浅，若有任何谬误，欢迎指正

我的博客：ひかりの博客
csdn主页：csdn博客主页