【Bug记录】defineEmits 在 TS 项目报错
前言
单文件组件 <script setup> 是 Vue3.2 版本后非常流行的写法。
但是在开发过程中，按照官网使用 defineEmits ，结果项目报错，无法运行。
错误截图
Unexpected newline between function name and paren func-call-spacing
错误翻译：函数名与括号function -call-spacing之间的意外换行符
vscode 错误
浏览器错误
官网使用截图
明明完全按官方文档方式使用，居然报错了，踩到大坑。
原因归因
- 项目使用了 EsLint
- defineEmits 代码换行了
解决方案（提供三种）
报错代码
- 按照官网提示，结果代码运行报错
import { defineEmits } from 'vue-demi'
// Unexpected newline between function name and paren.(eslintfunc-call-spacing)
const emit = defineEmits<{
(event: 'change'): void
(event: 'update', id: number): void
}>()
方案1：代码不换行
- 定义 defineEmits 注解的时候不换行。
import { defineEmits } from 'vue-demi'
// 注意添加分号 ;
const emit = defineEmits<{(event: 'change'): void; (event: 'update', id: number): void }>()
方案2. 抽离类型注解
- 把类型注解抽离出来再引用。
import { defineEmits } from 'vue-demi'
// 抽离类型注解
type Emit = {
(event: 'change'): void
(event: 'update', id: number): void
}
const emit = defineEmits<Emit>()
方案3：屏蔽 eslint 对当前规则检查（推荐）
- 自己修改 Eslint 规则，打开项目根目录下的
.eslintrc.js文件，添加规则屏蔽：
👍 这种写法不需要修改源码
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/vue3-essential",
"@vue/standard",
"@vue/typescript/recommended",
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
+ // 屏蔽错误
+ // "func-call-spacing": "off",
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
};
