工欲善其事必先利其器,選擇一個趁手的IDE,碼起來代碼來是事半功倍。
本人由于也是初學RN,對各個前端IDE其實并沒多少接觸,之前只用過Sublime,對我而言Sublime更像是個文本編輯器,但它確實比較輕便。而本文要介紹的webstorm選擇它作為RN的開發工具原因有兩個:
- 好多人推薦都推薦, 不過確實挺方便的,自動補全,調試都很方便;
- 與IntelliJ IDEA很像,本人是做Android開發的,所以用起這個來,還挺順手的。
閑話扯到這,開始進入正題,
1.官網下載安裝
https://www.jetbrains.com/webstorm
不過比較坑的是這個軟件是收費的,還好該軟件的破解還算比較方便。建議不要下載綠色版的,捆綁軟件太惡心,還有可能帶病毒。
安裝過程挺簡單,選擇要安裝的目錄,根據提示一直點下一步就可以。
2.激活破解
土豪請忽視本節,本人激活是參考的這篇文章里的第二條。http://blog.csdn.net/it_talk/article/details/52448597
我的webstorm的版本是2017.2
運行WebStorm,程序會彈出如下圖的注冊對話框。
選擇
license server
然后輸入:http://idea.imsxm.com/
,即可激活使用。
3.配置WebStorm
設置.js文件默認以jsx的語法打開
在沒有進行設置的情況下,每次打開WebStorm的時候打開包含jsx語法的.js文件都會有以下提示:
設置方法,File->Default Settings->Languages&Frameworks->JavaScript->React JSX
設置.js文件中支持react-native語法高亮
設置方法,File->Settings->Languages&Frameworks->JavaScript->Libraries->Download
在列表中找到react-DefinitelyTyped
和react-native-DefinitelyTyped
,Download and Install, 如紅框選中,點擊OK。
設置React Native智能提示
github有一個開源的插件:ReactNative-LiveTemplate,先下載或clone到本地。
然后添加ReactNative.jar
如下圖就有提示了
4.運行配置
在最上面找到Run菜單選擇當中的Edit Configurations...
點擊加號并選擇React Native,
右側
- Name 名字隨便取
- React native package選擇react-native-cli所在目錄
- Working directory 為項目所在目錄
配置完保存后,右上角就會出現運行按鈕
點擊三角按鈕,然后靜靜的等待...
大功告成!