今天第一次体验unplugin-vue-components,遇到了代码提示的问题(VS Code),如下:

VSCode飘红

这里明显是由于Volar插件没有解析到RouterLink是何方神圣导致的。当然这不是Volar的问题,只是我没有配置好。

解决方案

其实作者本人在Readme.md里已经提示过这个问题了,只是我没有仔细去看。

Github下的README.md

那么问题就基本上解决了。上面已经说了如果说typescript(应该指的是npm包)安装后,dts的配置项就会自动生效,所以这里我们只需要关心下面说的tsconfig.json。在"include"字段下(这里我不知道为什么作者写的是includes,或许是版本不一样) 添加"components.d.ts",如:

1
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts"]

这前面都是默认生成的配置项,新添加的只是最后一项。

之后再次启动npm run dev,等待片刻(它需要响应时间),我这里就正常提示了。

现在VSCode成功解析了

补充

如果使用框架如navie ui,还有一个配置项可以更好的让Volar给出提示。

naive ui为例,在tsconfig.json"compilerOptions"中添加:

1
"types": ["naive-ui/volar"]

大功告成。