今天心血来潮,引入了eslint,发现以前的很多写法全部飘红,个人觉得还是校验比较严格的,不一定非要加上,看个人需求
以下,我罗列了一些比较典型的语法错误,也许我们觉得没有写法问题,但是eslint会校验出他的问题。
1.Getting a value from the props
in root scope of setup()
will cause the value to lose reactivity
错误写法
name: 'CForm',
setup(props) {
const { option } = props
const form = reactive({
...option.formModel
})
正确写法
name: 'CForm',
setup(props) {
const { option } = {
...props
}
const form = reactive({
...option.formModel
})
2.Array.prototype.map() expects a return value from arrow function array-callback-return
用forEach替代就行了,map必须返回return
3.空格的正常修复
4.解构赋值
错误写法
const data = props.data
正确写法
const { data } = props
5.Expected a default case
Switch尾部加default
case 'delete': // 删除
Modal.confirm({
title: <div>
<span class="color-warning mr1">
<ExclamationCircleOutlined />
</span>
删除确认信息
</div>,
content: '是否确认删除该零件?',
onOk() {
}
})
break
default:
break
6.Expected 1 empty line after import statement not followed by another import import/newline-after-import
最后一个import加空行,如下
import { onMounted, defineComponent, reactive } from 'vue'
import { message } from 'ant-design-vue'
const Index = defineComponent({
7.Unexpected string concatenation prefer-template
必须要用字符串模板替代字符串拼接
错误写法
<span class="pointer">
<Avatar src={headImg} />
<span class="ml1">{data.subStr(userInfo.value.realName + '')}</span>
</span>
正确写法
<span class="pointer">
<Avatar src={headImg} />
<span class="ml1">{data.subStr(`${userInfo.value.realName}`)}</span>
</span>
8.不能用for循环
错误写法
for (const key in obj) {
data[key] = obj[key]
}
正确写法
Object.keys(obj).forEach((item) => {
data[item] = obj[item]
})
网友评论