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

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

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

npm run lint

你就可以看到下面的报错总数:
image.png

如果你也有这样的困扰,那看这个准没错,后续有的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:''
    }  
  1. 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)则正常
    ​
    
  2. 一个template中有多个v-for,item在行内重复定义

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

    //bad
    
     
          {{ item }}  
     
        {{ item }}  
    ​ //good
     
          {{ item1 }}  
     
        {{ item }}  
  3. 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'
          
    
  4. 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()
    })
    或者你去掉禁止的配置,使用第一种
    
  5. error Parsing error: invalid-first-character-of-tag-name

    这个错误是代码中使用了三元运算符

    {{a>1?2:1}}

    代码可以正常运行,但是eslint会报错,eslint检测会认为是被包起来的标签。如果想要不报错则可以使用下面两种方式:

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

    Html原始码 显示结果
    < <
    > >
    {{ (a < 1) ? 2 : 1 }}
    

    方法二:v-text

  6. 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;}
            }
    
  7. Keys starting with with ’ ’ are reserved in ’ businessTags’ group

    这个警告是因为在vue将以_和$开头的属性或者data中的变量认为是vue的保留成员,禁止这样使用,以防止与Vue内部发生冲突。

    //bad
    
    {{_text}}
    data(){ return{ _text:'111' } } //good
    {{text}}
    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
好啦,大概就写这么多了,还有别的问题可以在评论区下方提出来哦!

你可能感兴趣的:(前端)