入坑 React Native 之编码工具WebStorm配置

写代码,好的编码工具是必不可少的.经做web前端的同事推荐选用WebStorm，WebStorm是jetbrains公司旗下一款JavaScript开发工具.被广大中国JS开发者誉为"Web前端开发神器".但是好像要收费的,可以考虑下破解版.

配置之前,先把之前创建好的HelloWord项目导入.(未创建项目可以参考上一篇:入坑 React native 之开发环境搭建)

---

jsx语法设置

JSX (Javascript XML syntax transform) 是使用XML语法编写Javascript的一套解析工具；

X代表XML；也可以理解为扩展(eXtension)，因为实现JSX功能本身就是使用Javascript；

File->Default Settings

Languages&Framworks->JavaScript

然后Apply/OK jsx配置完成。

代码自动补全功能配置

点击 WebStorm->Preferences 

快捷键:command+,

进入后Libraries->Download 进行选择需要插件

下载插件

我们就选择react-DefinitelyGTyped,react-native-DefinitelyTyped 即可

下载并安装

Apply/OK 补全代码功能配置完成。

react-native运行方案配置

WebStorm这个IDE直接完成编码+运行项目工作.这样就可以不用打开Xcode了.

npm 基本配置

Edit Configurations

进入配置画面点击+号并选择npm

npm

配置npm, command 写入 help

配置npm

点击 RunExternal tool

添加运行工具

配置信息后 Apply / OK 即可.

配置运行工具

Name:运行按钮的名字, 随便起一个就可以了.

Program: react Native的路径,一般都是  /usr/local/bin/react-native (终端命令:which react-native)

Parameters: run-ios

working directory: 先点击右边的insert macro,选择"ProjectFileDir - The directory of the project file."

运行

点击运行,出现如下画面运行成功.

运行成功

配置已完成

WebStorm 配置完成!