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

作为前端开发工程师的你，是不是很难忍代码中因为配置了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:''
    }  

2. 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）则正常
   ​
   

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

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

   //bad
   
       
   
           {{ item }}
       
   
   
       
   
         {{ item }}
       
   
   ​
   //good
   
       
   
           {{ item1 }}
       
   
   
       
   
         {{ item }}
       
   
   

4. 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'
         
   

5. 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()
   })
   或者你去掉禁止的配置，使用第一种
   

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

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

   {{a>1?2:1}}
   

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

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

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

   {{ (a < 1) ? 2 : 1 }}
   

   方法二：v-text

7. 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;}
           }
   

8. 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
好啦，大概就写这么多了，还有别的问题可以在评论区下方提出来哦！