关于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博客主页

你可能感兴趣的:(踩坑记录,vue.js,前端)