eslint语法报错解决

今天将之前一个项目加入了eslint,发现很多变报错,但是反复检查自己代码是没有错误的,根据报错信息可知是某些api在eslint语法中使用不规范导致,大概总结如下:

1.setup中接收props

报错:Getting a value from the props in root scope of setup() will cause the value to lose reactivity

之前写法:

 setup(props) {
    const { option } = props
 }

eslint写法

setup(props) {
    const { option } = {
    	...props
    }
 }

2.遍历操作某个数组(forEach代替map),map要求有返回值

报错:Array.prototype.map() expects a return value from arrow function array-callback-return
之前写法:

row.childrens.map((pit) => {
  pit.childs.map((cit, ci) => {
    if (cit.n_id === item.n_id) {
      pit.childs.splice(ci, 1)
    }
  })
})

eslint写法:

row.childrens.forEach((pit) => {
  pit.childs.forEach((cit, ci) => {
    if (cit.n_id === item.n_id) {
      pit.childs.splice(ci, 1)
    }
  })
})

3.空格修正

之前项目可能在缩进上面不符合eslint语法,此时只需 npm run lint 对代码进行自动修正即可,之前项目拿到手里建议先npm run lint,之后在修改其他语法报错,这样你会发现语法报错会少很多,便于查找修改。

4.解构赋值

eslint中推荐解构赋值,部分需要使用结构赋值的方式拿到变量,如:
之前写法:

const data = props.data

eslint中写法

const { data } = props

5.switch-case条件语句中加default

在最后一个条件中加default

之前写法:

switch (sease) {
  case '1':
  case '2':
  case '3':
      console.log('春季')
      break;
  case '4':
  case '5':
  case '6':
     console.log('夏季')
     break;
  case '7':
  case '8':
  case '9':
     console.log('秋季')
     break;
  default:
  	console.log('冬季')
  	break;
}

6.最后一个import导入后留空行

报错:.Expected 1 empty line after import statement not followed by another import import/newline-after-import

之前写法:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

eslint写法:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

7.模板字符串代替拼接字符串

报错:Unexpected string concatenation prefer-template

之前写法:

<p>{{info.day + '天'}}<p>

eslint写法:

<p>{{`${info.day}`}}<p>

8.不使用for循环

之前写法:

for (let i = 0;i < arr.length; i++) {
	console.log(arr[i])
}

eslint写法:

arr.forEach((item) => {
	console.log(item)
})

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:[email protected]联系笔者 删除。
笔者:苦海

你可能感兴趣的:(javascript,vue,javascript,vue.js,前端)