1. 程式人生 > >React Native 程式碼智慧提醒WebStorm開發工具

React Native 程式碼智慧提醒WebStorm開發工具

       在做React Native開發時,最常用的開發工具有 webStorm ,sublime ,appcode等,很多人都希望開發工具有智慧提醒功能,然而我們使用上述開發工具進行React Native開發時並沒有較好的提示功能。今天給大家介紹一款外掛Webstrom live template  使webStrom支援React Native開發智慧提醒。

下面進入正題

       外掛下載地址https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
       下載方法:使用git下載 ,在終端輸入git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
       安裝方法:在終端輸入 file -> import settings -> ReactNative.jar

使用方法

       通用方法   直接輸入元件 或 Api 名稱的首字母, 比如想要 View ,只要輸入 V自動提示程式碼裡就會看到 View
       StyleSheet屬性提示
       首先 按下 command + J , 然後輸入屬性名的 首字母

       如: 輸入 f ,會自動提示 fontSize,fontStyle


相關推薦

React Native 程式碼智慧提醒WebStorm開發工具

       在做React Native開發時,最常用的開發工具有 webStorm ,sublime ,appcode等,很多人都希望開發工具有智慧提醒功能,然而我們使用上述開發工具進行React

webstormReact native程式碼智慧提示設定

做Reacty native開發,webstorm是開發利器,跳出智慧程式碼提示,需要匯入設定檔案,做法如下: 1 開啟webstorm,然後File ---> Import Setting 2 選中ReactNative.jar檔案(不需要解壓) 3 重啟web

webstorm開發微信小程序代碼提醒(webstorm開發工具)

簡書 配置 dea imp image www 技術 XML shu 使用了微信提供的開發工具是真心難用,卡頓厲害、中英文切寫註釋換相當不爽、還沒辦法多開窗口,相信大家也遇到過這種現象。 下邊我們介紹下webstorm來開發微信小程序的一些配置: 1.首先FileTyp

WebStorm開發工具設定React Native智慧提示

 最近在做React Native開發的時候,相信大家一般會使用WebStorm,Sublime,Atom等等開發工具。二之前搞前端的對WebStorm會很熟悉,WebStorm最新版是WebStor

React Native電商項目實戰混合APP開發 React Native實戰 混合APP實戰開發

mp4 實戰 nav 部分 ati nic 購物 獲取 面數據 React Native 和 angular+ionic 是目前網絡上最火的混合APP開發語言,其功能強大能夠開發出安卓和IOS程序! ------------------課程目錄--------------

React Native 程式碼規範自動格式化 eslint+prettier

在多人開發的過程中,保持程式碼的規範格式化很重要,有時候每個人開發習慣不同格式各種各樣看著很難受,因此我們這裡使用eslint+prettier來做自動格式化,可能做前端的同學對這兩個工具很熟悉。 下面介紹一下在WebStorm的環境裡怎麼配置這些外掛 es

React Native 程式碼片段

一. Upload Image – fetch export function postData (url, params, fileURL) { let data = new Fo

React Native入門——佈局實踐:開發京東客戶端首頁(二)TabBar的構建

上篇文章講到構建京東客戶端首頁的搜尋欄,本篇我們一起來學習TabBar的構建。根據之前的調研,在構建TabBar的方式上,我推薦使用國外大神James Ide(https://github.com/ide)釋出在Exponent上的react-native-tab-navig

React Native 十萬個為什麼(開發問題整理)

掃碼加入react-native技術交流群。定期會分享react native 技術文章,移動技術乾貨,精彩文章技術推送。歡迎各位大牛, React Native技術愛好者加入交流!在ScrollView中切換輸入框<TextInouput>,為什麼需要點選兩次才

React Native bundle 打包、拆包工具之moles-packer

oles-packer 是由攜程框架團隊研發的,與攜程moles框架配套使用的React Native 打包和拆包工具,同時支援原生的 React Native 專案。 安裝 從npm倉庫中安裝 npm install -g moles-packer 獲取幫助資訊 m

react-native整合超級強大的圖表工具native-echarts

閒話不多說,先到上動態圖讓大家看看。使用起來超級簡單,完美適配ios和android chart.gif 簡單介紹一下: 1.蘋果 橘子 這個可以根據legend這個屬性來設定,可一個可多個。具體參考程式碼 2.可以是單獨的一種圖形,也可以是多種切換 3.圖形的顏

使用WebStorm開發React-native之基礎

ttr regexp 渲染 hang reg 路徑 tostring png text 配置問題: (1)找不到SDK路徑,或者沒有SDK對應的版本:SDK必須是android-23才可以(更新SDK) 解決方法:環境變量,必須設置Android_HOME

使用WebStorm開發React Native除錯Android專案

React-Native自帶的列印log的命令 android : react-native log-android ios : react-native log-ios android studio除錯習慣了,然後在webstorm除錯react-native找到了一個除錯外掛:r

react-native系列(4)入門篇:在VSCode中配置ESLint(程式碼檢測工具)

ESLint是一套javascript程式碼檢測工具。要記住,程式碼也是寫給人看的,所以一定要注意程式碼的編寫規範。ESLint可以根據自己設定的規則實現對程式碼的檢測,從而規範了程式碼的風格。本篇內容主要介紹如何在VSCode中使用ESLint。 ESLint的官網地址是:https://

攝像機檢視 react-native-camera 手機開發工具

https://github.com/lwansbrough/react-native-camera react-native-camera 是 React Native 的攝像頭 viewport。這個模組應用於開發的早期階段,它支援攝像頭的轉換和基本圖片捕捉。 使

我的 React Native 技能樹點亮計劃 の 程式碼風格統一工具 EditorConfig

@author ASCE1885的 Github 簡書 微博 CSDN 知乎 本文由於潛在的商業目的,不開放全文轉載許可,謝謝! 在本系列前面一篇文章《React Native 開發 IDE 選型和配置》1中我們介紹了 React Nati

【轉】WebStorm設定React Native智慧提示

 最近在做React Native開發的時候,相信大家一般會使用WebStorm,Sublime,Atom等等開發工具。二之前搞前端的對WebStorm會很熟悉,WebStorm最新版是WebStorm2016.2.1,react Native預設不能智慧提示程式碼,githun有一個開源的外掛:Rea

React Native開發學習筆記——WebStorm執行專案

如何在webStorm上進行真機除錯?下邊以執行Android為例。ios有不同的地方。   除錯分兩步: debug配置。 執行。 debug配置 點選Edit Config

React Native使用WebStorm 2016.3程式碼自動補全

首先下載兩個JavaScript Libraries:在WebStorm中開啟File–>Setting–>Languages & Frameworks–>JavaScript–>Libraries,點選右邊的Download按鈕

react-native 開發常用第三方 工具

ReactNative 開發常用第三方:   樓主在 reactNative 開發中,經常會碰到自定義元件的問題,原生元件不夠用,經常需要我們自定義元件。或者需要npm使用第三方已經寫好的 工具,