react native學習筆記1——webstorm安裝與配置

工欲善其事必先利其器,選擇一個趁手的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-DefinitelyTypedreact-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 為項目所在目錄

配置完保存后,右上角就會出現運行按鈕

點擊三角按鈕,然后靜靜的等待...

大功告成!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容