Property ‘$q‘ does not exist on type ‘CombinedVueInstance＜{ ... }Record＜never, any＞& Vue ...Vetur
阿新 • • 發佈：2020-10-22
最近接觸了一個vue UI框架 Quasar，維護團隊非常活躍，有望成為今後UI框架的扛把子，推薦大家可以去看看。
根據官方文件建立了一個專案，使用VS Code開啟專案（這裡要誇一下Quasar團隊，把VS Code配置項都列出來了，很貼心)。
官方配置地址：Quasar 配置VS Code
一、問題描述
按照官方Eslint配置配置好後，開啟專案，發現 vue<template>中$q出現紅色下劃線，雖然專案能正常執行，但這個提示一直在，強迫症必須要幹掉它。如下圖：
二、解決辦法
經過查閱，發現是VS Code語法校驗規則引起的，這裡修改下VS Code中的配置。
依次點選：檔案 → 首選項 → 設定（英文版:File → Preferences → Settings），在搜尋欄中輸入validation
Vetur，把 Vetur › Validation: Interpolation對勾去掉，操作步驟如下圖：
三、原因分析
可能是因為Vetur 版本問題，新版統一使用TypeScript語言驗證<template>區域中的程式碼，去掉驗證即可。