VS Code智能提示

为了提高开发效率和质量,介绍一下VS Code的打造RN开发环境的代码智能提示。

问题

  1. 代码没有提示:
    许多刚接触RN开发的非前端同学,都会问“哪个编辑器有智能提示?”。。。而对于前端同学来说,现在的日子已经好很多了,要什么自行车。
  2. 低级代码错误:
    这里的错误是指类似拼写错误,符号错误等。写完代码,跑起来各种报错,有时候费死劲的找,最后发现是个中文的分号问题。

解决办法

可选的方案大概有:

  1. 使用typescript: 直接使用有静态类型支持的js版本,但是要再学习一套语法,而且我的代码都是ts写的,但很多好的公共库不是啊。
  2. 使用flow: 由于网络的原因,这个环境真的难配,同时也是要学习一些新的语法。

我们的选择:vscode + typings

  • vscode: 微软家族,定义为轻量级文本编辑器
  • typings: 基于typescirpt的接口文件

插件

安装React Native Tools插件


image.png

代码智能提示

对于第三方包,要安装react-native:

全局安装typings:

npm install typings -g

安装react和react-native的接口说明文件:

typings install dt~react --save

typings install dt~react-native --save

等待安装完成后(会取决于包的数目和网络状况),在项目的根目录下会有一个typings目录和typings.json配置文件:

完成后重启一下code , 或者使用reload命令,现在react-native和react相关的代码就有提示说明了,效果如下:

方法智能提示:

显示方法的参数:

hover时显示说明:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容