526互联

解放VSCode+Vue的完整组件库智能提示（包括ant-design-vue、element-plus等）

发布时间 2023-11-21 10:13:05作者: Cinea

解放VSCode+Vue的完整组件库智能提示

最近因为一些原因从WebStrom转回VS Code，首先感受到的就是组件库没有智能提示了：

这能忍吗？根本不可能！接下来，我带你花三分钟找回遗失的智能提示～

首先，本篇文章适用于通过unplugin-vue-components自动引入组件的项目；也就是说，在你的vite.config.js里应当有类似这样的部分：

  1. 首先，确认自己的项目目录下有components.d.ts：这是由unplugin-vue-components自动生成的，如果没有的话，请在vite的config文件中加上dts: true（如上一张图中所示）

  2. 接下来，进入tsconfig.json，加入这一条：

    {
  "files": ["./components.d.ts"],
}

    回到vue代码处，看看有没有生效了；按理来说，到这一步就可以生效，获得组件的类型提示；不过，如果你也像我一样没有生效，可以试试后面的步骤：

  3. 遵照Vue官方的说明，关闭内置的Typescript支持（可选）

  4. 切换Typescript版本至工作区版

现在，大功告成！去看看有没有出现类型提示和自动补全吧～

这种方法的缺点：对于从来没有使用过的组件，是不会触发组件名称的补全的：

解决方法是手动将组件库的typing.d.ts添加到tsconfig.json中——不过我个人认为，这种做法有点不太优雅；毕竟工具都帮你生成好components.d.ts了。具体加不加组件库的完整类型定义，读者见仁见智。