為了提高開(kāi)發(fā)效率和質(zhì)量辽故，介紹一下VS Code的打造RN開(kāi)發(fā)環(huán)境的代碼智能提示山孔。
問(wèn)題
- 代碼沒(méi)有提示：
許多剛接觸RN開(kāi)發(fā)的非前端同學(xué)，都會(huì)問(wèn)“哪個(gè)編輯器有智能提示？”乎芳。敛滋。烦味。而對(duì)于前端同學(xué)來(lái)說(shuō)苍凛，現(xiàn)在的日子已經(jīng)好很多了，要什么自行車(chē)粮彤。 - 低級(jí)代碼錯(cuò)誤：
這里的錯(cuò)誤是指類(lèi)似拼寫(xiě)錯(cuò)誤根穷，符號(hào)錯(cuò)誤等。寫(xiě)完代碼导坟，跑起來(lái)各種報(bào)錯(cuò)缠诅，有時(shí)候費(fèi)死勁的找，最后發(fā)現(xiàn)是個(gè)中文的分號(hào)問(wèn)題乍迄。
解決辦法
可選的方案大概有：
- 使用typescript: 直接使用有靜態(tài)類(lèi)型支持的js版本，但是要再學(xué)習(xí)一套語(yǔ)法士败，而且我的代碼都是ts寫(xiě)的闯两，但很多好的公共庫(kù)不是啊。
- 使用flow: 由于網(wǎng)絡(luò)的原因谅将，這個(gè)環(huán)境真的難配漾狼，同時(shí)也是要學(xué)習(xí)一些新的語(yǔ)法。
我們的選擇：vscode + typings
- vscode: 微軟家族饥臂，定義為輕量級(jí)文本編輯器
- typings: 基于typescirpt的接口文件
插件
安裝React Native Tools插件
image.png
代碼智能提示
對(duì)于第三方包逊躁，要安裝react-native:
全局安裝typings:
npm install typings -g
安裝react和react-native的接口說(shuō)明文件：
typings install dt~react --save
typings install dt~react-native --save
等待安裝完成后（會(huì)取決于包的數(shù)目和網(wǎng)絡(luò)狀況），在項(xiàng)目的根目錄下會(huì)有一個(gè)typings目錄和typings.json配置文件:
完成后重啟一下code , 或者使用reload命令隅熙，現(xiàn)在react-native和react相關(guān)的代碼就有提示說(shuō)明了稽煤，效果如下：
方法智能提示：
顯示方法的參數(shù)：
hover時(shí)顯示說(shuō)明：
