vscode的代码提示和自动导入功能

3,730 阅读2分钟

先说说我这边的场景,我司的脚手架库中包含了react、redux、webpack等等一系列库,使得项目本身的package.json中的依赖十分简单,上述这些都没有。 这导致了vscode在开发时体验十分不好,甚至打出useCall之后都没有代码自动完成和自动import。

如果你也跟我一样,又或是即使在package.json中声明了也没有提示,那么你可以试试我的办法。

image.png

如果想要达到上图这样有代码提示。

且如下图这样,按下tab之后import中自动加入useCallback的导入。

我来提供一种方法。

image.png


首先要明白,这个功能是vscode自带的功能。编辑器依靠typescript内置或安装的types定义实现(你一定见过@types/***这样的依赖,他们是一样的)。

而即使有内置的类型定义,也不一定会被应用。就像我司这种情况,react是内置的但依然没有应用。原因在于,编辑器首先会读取你的package.json,必须让他发现你有这个依赖,才会应用内置的types定义。

所以,首先应该将其添加在package.json中,让编辑器知道你有依赖它。

如果你想要应用该功能的库没有内置在ts中,亦或是不想在package.json中添加冗余依赖?

可以选择手动下载@types/***(如果有的话),这样相当于告诉vscode,使用我下载的类型定义做提示!

总结一下:

  1. package.json中添加依赖
  1. 如果无效,安装@types/***(你想要提示的库)
  1. 如果该库没有@types/***,你也可以选择自己写一个简单的,放在项目中或是参与社区共建直接提交给他们。当然那属于ts的细分知识,不在这里讲。