ESlint常见警告解决及配置讲解

yezi__626

已于 2023-06-13 22:39:44 修改

阅读量1w

点赞数 3

文章标签：前端

于 2021-10-30 15:43:47 首次发布

本文链接：https://blog.csdn.net/yezi__6/article/details/121051951

版权

作为前端开发工程师的你，是不是很难忍代码中因为配置了eslint后，又配置了自动修复eslint问题但是还是无法避免eslint警告⚠️和报错呢？？看着一行行红色的警告错误提示是不是很难受啊！但是有些问题确不知道要怎样改呢？

那如何查自己的项目中自己的命令呢？

npm run lint

你就可以看到下面的报错总数：

如果你也有这样的困扰，那看这个准没错，后续有的eslint问题处理也会继续发出来。当然如果打家有更好的解决办法，请在下方评论区赐教哦！

项目中eslint配置导致的警告点解决

1.props传参报错点：

//bad
show: {
      type: Boolean
    },
//导致eslint报错：Prop 'show' requires default value to be set

//good
正确形式：
show: {
      type: Boolean,
      value:false
    },
    
//bad
value: {
      type: String|Number
    },
//导致eslint报错：The "value" property should be a constructor

//good
value: {
      type: [String, Number],
      default:''
    }

obj.hasOwnProperty(key)报错：

//bad
!obj.hasOwnProperty || obj.hasOwnProperty(key)

//good
Object.prototype.hasOwnProperty.call(obj, key)

err:Do not access Object.prototype method ‘hasOwnProperty’ from target object

注意：在写代码时，不要直接从obj上读取hasOwnProperty，因为不确定到底有没有这个属性或者这个对象可能不存在。
用 call 改变指向调用
Object.prototype.hasOwnProperty.call(obj, key)
ESlint使用了禁止直接调用的Object.prototypes的内置属性开关，也就是ESlint配置文件中的“extends”:"eslint:recommended"属性启用了此规则。

今天用对象的属性hasOwnProperty，去判断对象是否包含该值，我这里主要判断对象是否为空，出现了以上错误，之前也遇到过类似的错误，如parseInt（‘24.5’），必须要给转换的进制类型，改为parseInt（‘24.5’，10）则正常

一个template中有多个v-for,item在行内重复定义

报错：warning Variable ‘item’ is already declared in the upper scope

//bad
<div>
    <div v-for="item in info.sysAccountTag.split(',')">
        <span v-if="item" :key="item" >{{ item }}</span>
    </div>
</div>
<div>
    <div v-for="item in info.sysAccountTag.split(',')">
      <span v-if="item" :key="item" >{{ item }}</span>
    </div>
</div>

//good
<div>
    <div v-for="item1 in info.sysAccountTag.split(',')">
        <span v-if="item1" :key="item1" >{{ item1 }}</span>
    </div>
</div>
<div>
    <div v-for="item in info.sysAccountTag.split(',')">
      <span v-if="item" :key="item" >{{ item }}</span>
    </div>
</div>

error Expected to return a value in “headerList” computed property

switch语句中没有default,因此如果都无法匹配的话，那就没有返回值。

//It's bad
switch (type) {
          case '1':
            return 'type_1_menu'
          case '2':
            return 'type_2_menu'
          case '3':
            return 'type_3_menu'
      }
//It's ok

switch (type) {
          case '1':
            return 'type_1_menu'
          case '2':
            return 'type_2_menu'
          case '3':
            return 'type_3_menu'
          default:
            return 'increase_fans'

eslint配置了：“extends”: “eslint:recommended”，这个规则禁止了使用异步的Promise executor函数。

err：Promise executor functions should not be async

//bad
return new Promise(async(resolve, reject) => {
const res = await $getdata()
})

//good
return new Promise((resolve, reject) => {
const res = $getdata()
})
或者你去掉禁止的配置，使用第一种

error Parsing error: invalid-first-character-of-tag-name

这个错误是代码中使用了三元运算符
```
<p>{{a>1?2:1}}</p>
```
代码可以正常运行，但是eslint会报错，eslint检测会认为是被包起来的标签。如果想要不报错则可以使用下面两种方式：

方法一：使用Html的转义符来进行对<或>号替换

Html原始码显示结果
< <
> >
```
{{ (a &lt; 1) ? 2 : 1 }}
```
方法二：v-text
```
<p v-text="(a >1) ? 2 : 1"></p>
```

Html原始码	显示结果
<	<
>	>

Unexpected lexical declaration in case block

“extends”: "eslint:recommended"同时也禁止声明（let、const、function和class）在case或者default中。因为词法声明在 switch语句块中是可见的，但是只有运行到它定义的 case 语句时，才会进行初始化操作。

所以为了保证词法声明语句只在当前case中有效，应该将子句包裹在块中“{}”。

//bad
switch (foo) {
    case 1:
        let x = 1;
        break;
    case 2:
        const y = 2;
        break;
    default:
        let x = 1;
        break;
        }
        
//good
switch (foo) {
    case 1:{
        let x = 1;
        break;}
    case 2:{
        const y = 2;
        break;}
    default:{
        let x = 1;
        break;}
        }

Keys starting with with ’ ’ are reserved in ’ businessTags’ group

这个警告是因为在vue将以_和$开头的属性或者data中的变量认为是vue的保留成员，禁止这样使用，以防止与Vue内部发生冲突。
```
//bad
<div>{{_text}}</div>
data(){
  return{
    _text:'111'
  }
}
//good
<div>{{text}}</div>
data(){
  return{
    text:'111'
  }
}
```
项目中常见的eslint配置介绍

“prefer-const”:1, //禁止使用let var等声明变量，只使用const

“accessor-pairs”: 1,//禁止创建一个只有setter属性的对象，没有getter，就无法被使用

“no-alert”: 0, //禁止使用alert confirm prompt

‘arrow-spacing’: [1, {

‘before’: true,

‘after’: true

}], //箭头的前后必须要有一个或者多个空格

“no-console”: 2, //禁止使用console

“no-debugger”: 2, //禁止使用debugger

“for-direction”: 2, //禁止for无限循环

“no-multi-spaces”: 1, //不能有多余的空格

“no-var”: 0, //禁用var，用let和const代替

“no-redeclare”: 2, //禁止变量重复声明

“camelcase”: 2, //要求命名必须是驼峰法

“no-dupe-args”: 2, //禁止在函数或表达中出现重名参数

“no-extra-semi”: 2, //禁止不必要的分号

“require-await”: 2, //禁止使用不带 await 表达式的 async 函数

还想了解更多的eslint配置规则，可以点击这个链接

[云社区eslint配置规则] https://cloud.tencent.com/developer/section/1135636
好啦，大概就写这么多了，还有别的问题可以在评论区下方提出来哦！

yezi__626

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
ESlint常见警告解决及配置讲解

作为前端开发工程师的你，是不是很难忍代码中因为配置了eslint后，又配置了自动修复eslint问题但是还是无法避免eslint警告⚠️和报错呢？？看着一行行红色的警告错误提示是不是很难受啊！但是有些问题确不知道要怎样改呢？那如何查自己的项目中自己的命令呢？npm run lint你就可以看到下面的报错总数：如果你也有这样的困扰，那看这个准没错，后续有的eslint问题处理也会继续发出来。当然如果打家有更好的解决办法，请在下方评论区赐教哦！项目中eslint配置导致的警告点解决1.props
复制链接

扫一扫