Vue 3 的 Script Setup 語法引入了 defineProps、defineEmits、defineExpose、withDefaults 的編譯器宏。然而某些情況下,ESLint 會報錯以上編譯器宏函數未定義。
本文將介紹兩種解決方案來解決這個問題(假定你的項目使用 Vue-Cli 進行初始化)。
Step 1. 檢查 eslint-plugin-vue 的版本
npm list eslint-plugin-vue
若版本在 v8.0.0 以上,跳轉到 Step 2,否則直接到 Step 3 的內容。
Step 2. 版本為 v8.0.0+
打開 .eslintrc.js 文件并修改如下:
env: {
node: true,
// The Follow config only works with eslint-plugin-vue v8.0.0+
"vue/setup-compiler-macros": true,
},
Step 3. 版本為 v8.0.0 以下
打開 .eslintrc.js 文件并修改如下:
// The Follow configs works with eslint-plugin-vue v7.x.x
globals: {
defineProps: "readonly",
defineEmits: "readonly",
defineExpose: "readonly",
withDefaults: "readonly",
},
若你的 eslint-plugin-vue 版本在 v8 以下,不建議貿然升級版本(尤其是在使用了大量 ts 依賴時)。