最近在維護幾個月前的專案時build的時候遇到了一個錯誤訊息:
error 'defineEmits' is not defined no-undef
而緣由是早先使用defineProps及defineEmits的時候都會從vue import進來,但其實在setup scope中,是沒有必要的,,所以就趁著這次一起把所有import defineProps及defineEmits的code都修掉。
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
url: {
type: String,
default: () => ''
}
})
const emit = defineEmits({
'changeSize': (_key: number) => true
})
</script>
而開開心心修掉所有多餘的code覺得自己很棒的時候,build的時候就出現了這個錯誤。
經過幾番搜尋還調整eslint 版本後,又降回原本版本,才發現只要調整.eslintrc.js 這支檔案即可;只要在rules的地方加上’no-undef’: ‘off’就大功告成了。
module.exports = {
rules: {
'no-undef': 'off',
}
}
而eslint 中no-undef 又是做什麼用的呢?
詳情可以看這裡,簡單來說就是: 此規則可幫助你檢查漏寫的參數名;所以以往會import defineProps及defineEmits ,eslint 可以判斷是從哪邊引用的,由於後面都省略了這個部分,所以eslint會覺得你憑空生出了defineProps及defineEmits,所以加以警告。
不過關閉no-undef就衍生出另一個問題了,假如你真的忘記先宣告某些參數就使用它,也就不會再提醒了,所以這方面要自己小心;只能再等待相對應的解法出來了。