eslint语法报错解决
Posted 苦海123
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)
)
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海
以上是关于eslint语法报错解决的主要内容,如果未能解决你的问题,请参考以下文章
解决:使用 Vue 3 Script Setup 时 ESLint 报错 ‘defineProps‘ is not defined