前言

使用 VSCode 开发 React-Native 是个不错的选择，因为这个编辑器十分简洁、流畅，并且微软官方提供了 React Native Tools 插件，支持代码高亮、debug 以及代码提示等十分强大的功能，并且 VSCode 本身的代码跳转十分优秀。但是我下载了此插件，发现其他功能正常，唯独代码没法正确提示，右下角也没有显示 salsa 。经过我的不懈 Google 以及查看官方文档：JavaScript in VS Code，最终找到了替代解决方案。

解决方案

一、配置 Typescript

1.全局安装 typescript

npm install typescript@next -g

当我们重启 VSCode 会得到提示：全局安装的typescript 与 VSCode 所指向的版本号不一致，所以我们要进行下一步操作。

2.配置用户设置 settings.json，通过 文件>首选项>用户设置 即可打开。

指定 typescript 的 lib 文件夹的路径，这个路径在安装完成时如上图所示，根据我的安装路径，对用户设置添加如下更改：

"typescript.tsdk":"C:/Users/XX/AppData/Roaming/npm/node_modules/typescript/lib"

重启后你的 VSCode 的下方会显示出 Typescript 的版本号。

有了以上的设置，我们从 react-native 包中引入组件模块时就会有相应的提示，我们还可以进行进一步的设置

二、配置 TypeScript Definition Files (Typings)

官方对其是这样解释的：

You get VS Code IntelliSense for third-party libraries and modules with type definition *.d.ts files. TypeScript definition files are written in TypeScript so they can express the data types of parameters and functions, allowing VS Code to provide a rich IntelliSense experience.

大体意思就是通过 Typings 能对第三方库例如咱们所使用的 react-native 进行其变量及方法的提示。

1.全局安装 typings

npm install typings --global

2.在当前项目根目录安装相应的 typings 包

可以在 VSCode 中通过快捷键 Ctrl+Shift+C 打开控制台并定位到当前项目的根目录，然后全局安装：

typings install dt~react-native --save --global

并且你的 VSCode 的根目录下会多一个 typings.json 文件。

至此配置完以后编写代码就会可以自动提示补全

并且鼠标移过去还能有相应的文档提示了

插件推荐

为了开发的便捷，我还推荐以下插件：

  • Auto Close Tag 自动闭合标签

  • Auto Rename Tag 自动重命名标签，配合上面的插件使用，基本上能赶上IntelliJ IDEA系的功能了

  • Reactjs code snippets react的代码提示，如 componentWillMount 方法可以通过 cwm 直接获得

  • Path Intellisense 文件路径提示补全

, ,