?原文鏈接
本文翻譯自：Configure TypeScript, TSLint, and Prettier in VS Code for React Native Development
前言
我本身是做Android和iOS開(kāi)發(fā)的擒权，一直想做混合開(kāi)發(fā)，但是一旦工作，再加上自己喜歡偷懶，這事就總是擱淺了抠蚣。有幸進(jìn)入了新公司，老大給了不少時(shí)間和機(jī)會(huì)學(xué)習(xí)贫橙。特別感謝捍歪！
翻譯這篇文章的目的很簡(jiǎn)單，因?yàn)樵趯W(xué)習(xí)React Native的這兩個(gè)月里恨狈，爬了不少坑疏哗，走了不少?gòu)澛罚@篇文章一步步詳細(xì)的寫了出來(lái)禾怠。
之前用的是Flow返奉，主要看是Facebook自己維護(hù)的贝搁，應(yīng)該是不二之選。但是Flow這玩意兒剛用的時(shí)候感覺(jué)挺好的芽偏，幾乎沒(méi)有學(xué)習(xí)成本雷逆，但是用到后面總是會(huì)出現(xiàn)莫名奇妙的問(wèn)題，F(xiàn)low也不會(huì)給出詳細(xì)的解決方案污尉，再者很多類型莫名其妙的變成了any膀哲，慌的一匹。更被提自動(dòng)導(dǎo)入被碗、代碼補(bǔ)全提示了某宪。當(dāng)然以上吐槽未必準(zhǔn)確，很大的可能性是自己的能力不足锐朴。翻了『TypeScript VS Flow』之類的文章兴喂，最終選擇TypeScript。
對(duì)著VSCode大把的插件包颁，一時(shí)會(huì)淚流滿面瞻想，此等神器，我以前為什么沒(méi)發(fā)現(xiàn)娩嚼？蘑险！驚喜之后就成了，臥槽岳悟，用哪個(gè)佃迄？臥槽，怎么用贵少？臥槽呵俏，啥時(shí)候用？自己糊糊涂涂配置下來(lái)貌似也能行呀滔灶，就擼代碼吧普碎。問(wèn)題是，代碼在別人VScode打開(kāi)之后录平，就全線爆紅麻车。好在現(xiàn)在是單打獨(dú)斗，但是后面肯定會(huì)有新同事的斗这，這絕對(duì)不行动猬！
正如該文章講的『提供一致、可重用的開(kāi)發(fā)工作流程』表箭，哈哈哈赁咙，一級(jí)棒！
簡(jiǎn)介
這篇簡(jiǎn)短的文章為新創(chuàng)建或已有的React Native項(xiàng)目提供一致、可重用的開(kāi)發(fā)工作流程彼水。你在代碼質(zhì)量上付出越多的努力崔拥，在調(diào)試上花費(fèi)的時(shí)間就越少。你能夠通過(guò)統(tǒng)一的開(kāi)發(fā)流程來(lái)提高代碼質(zhì)量猿涨，減少調(diào)試時(shí)間握童。在這篇文章中，我將會(huì)向你展示怎樣設(shè)置VSCode叛赚，處理代碼格式化、分析以及類型檢測(cè)稽揭。
Testing不在該篇文章講述范圍之內(nèi)俺附，但是強(qiáng)烈推薦。
怎樣使用TypeScript也不在該文章的講述范圍之內(nèi)溪掀。
開(kāi)始
我們從創(chuàng)建新項(xiàng)目開(kāi)始事镣。如果你正在處理已有項(xiàng)目，可以直接跳到TypeScript設(shè)置揪胃。一起來(lái)初始化項(xiàng)目吧璃哟！這篇文章我們使用的是React Native CLI.
$ react-native init SweetApp &&cdSweetApp
使用VS Code打開(kāi)SweetApp工程。
$ code .
打開(kāi)VSCode之后在Activity Bar中點(diǎn)擊Extensions按鈕喊递，安裝以下擴(kuò)展：
TypeScript設(shè)置
受限在終端中鍵入以下命令為React Native APP安裝和設(shè)置TypeScript随闪。（我使用Yarn包管理器）
yarn add --dev typescript react-native-typescript-transformer@types/react@types/react-native
$ yarn tsc --init --pretty --jsx react
$ touch rn-cli.config.js
我們做了一下工作：
TypeScript作為開(kāi)發(fā)依賴庫(kù)添加到我們的項(xiàng)目中
React Native TypeScript Transformer作為開(kāi)發(fā)依賴庫(kù)安裝到我們的項(xiàng)目中，使TypeScript和React Native無(wú)縫鏈接骚勘；
創(chuàng)建了一個(gè)空的TypeScript配置文件铐伴，我們接下來(lái)配置它。
創(chuàng)建了一個(gè)空的TypeScript Transformer配置文件俏讹，我們馬上會(huì)配置它当宴。
為React和React Native安裝了typings，允許TypeScript對(duì)React Native進(jìn)行類型檢查泽疆。
配置TypeScript
以下是我設(shè)置允許的/不允許的户矢，在起始的時(shí)候，我建議你和我一樣的做法殉疼。當(dāng)你熟悉了TypeScript梯浪，有了更多經(jīng)驗(yàn)后，你可以根據(jù)自己的喜好修改這個(gè)文件（tsconfig.json）株依。
你想要允許或者不允許某選項(xiàng)驱证，簡(jiǎn)單的不注釋或者注釋對(duì)應(yīng)該行的代碼即可。
在『Module Resolution Options』分組中我啟用了下面三個(gè)選項(xiàng)：
"allowSyntheticDefaultImports":true,"esModuleInterop":true,"resolveJsonModule":true
在『Module Resolution Options』分組中修改必要的設(shè)置恋腕，和下面的代碼一致：
"noImplicitAny":true,"strictFunctionTypes":true,"noImplicitThis":true,"alwaysStrict":true
注意:?我更喜歡把『target』屬性設(shè)置為"ES2015",目的是在沒(méi)有Promise聲明的情況下使用async / await抹锄。
配置React Native TypeScript Transformer
打開(kāi)我們之前創(chuàng)建的『rn-cli.config.js』文件，粘貼以下代碼，保存伙单、關(guān)閉获高。
module.exports= {? getTransformModulePath() {returnrequire.resolve('react-native-typescript-transformer')? },? getSourceExts() {return['ts','tsx']? },}
TypeScript遷移
把工程中的『App.js』文件名修改為『 App.tsx』。
注意： index.js文件需要使用.js后綴
所有包含JSX的新文件需要使用?.tsx?后綴吻育，純js文件使用?.ts?后綴念秧。
現(xiàn)在是瀏覽現(xiàn)有.tsx和.ts文件并修復(fù)任何TypeScript錯(cuò)誤的好時(shí)機(jī)。
TSLint安裝設(shè)置
首先布疼，安裝TSLint以及我個(gè)人在React Native development喜歡的TSLint擴(kuò)展摊趾。
$ yarn add --dev tslint tslint-config-prettier tslint-config-standard tslint-react
安裝tslint-config-prettier后，?TSLint?和?prettier在代碼格式化規(guī)則上就不會(huì)有沖突了游两。
現(xiàn)在項(xiàng)目中砾层，你應(yīng)該能看到一個(gè)tslint.json的文件。（我沒(méi)看到贱案，哈哈哈肛炮，自己創(chuàng)建了一個(gè)）。
打開(kāi)ts.json文件宝踪，像下面一樣配置：
{"defaultSeverity":"error","extends": ["tslint:recommended","tslint-config-standard","tslint-react","tslint-config-prettier"],"jsRules": {},"rules": {"ordered-imports":false,"object-literal-sort-keys":false,"member-ordering":false,"jsx-no-lambda":false,"jsx-boolean-value":false},"rulesDirectory": []}
rules分組是我的偏好侨糟，你可以隨意地使用自己的規(guī)則。
Lint你的代碼
打開(kāi)項(xiàng)目根目錄中的package.json文件瘩燥，在scripts分組中添加下面的lint腳本秕重。
現(xiàn)在你就可以從終端執(zhí)行yarn lint命令。你喜歡修復(fù)linter錯(cuò)誤颤芬，你懂的悲幅！
$ yarn lint
Prettier設(shè)置
Prettier在它自己的規(guī)則基礎(chǔ)上自動(dòng)格式化代碼。
Prettier很贊.如果你從未使用過(guò)站蝠，就像在HDTV上看了TV之后再回來(lái)在non-HDTV上看TV一樣汰具。一旦用了Prettier，你再也不會(huì)回過(guò)來(lái)再格式化自己的代碼菱魔。
安裝Prettier留荔。
$ yarn add --dev prettier
接下來(lái)我們想在保存文件后讓『VSCOde』使用Prettier擴(kuò)展格式化代碼。
如果在Mac上澜倦，按快捷鍵CMD+,打開(kāi)VS Code Workspace Settings,添加以下內(nèi)容：
"editor.formatOnSave":true,"javascript.format.enable":false
現(xiàn)在來(lái)創(chuàng)建一個(gè)prettier配置文件聚蝶，該文件包含了你的prettier代碼格式化偏好。
$ touch .prettierrc
使用我的prettier規(guī)則或者依據(jù)個(gè)人偏好規(guī)則藻治。這里是我的Prettier偏好碘勉。沒(méi)錯(cuò)，我所在的團(tuán)隊(duì)不使用分號(hào)桩卵。
"semi":false,"singleQuote":true,"trailingComma":"es5"
Prettier代碼格式化
不管何時(shí)你保存了文件验靡，Prettier根據(jù)你的喜好自動(dòng)格式化你的代碼倍宾。
打開(kāi)app.js文件添加一個(gè)數(shù)值數(shù)組。把這個(gè)數(shù)組賦值給一個(gè)test變量胜嗓。把數(shù)組中的數(shù)值格式化打亂高职。
現(xiàn)在保存文件并查看Prettier的神器效果。
現(xiàn)在test數(shù)組被完美格式化了辞州！
?? 一切都搞定了! ??
希望這個(gè)指南節(jié)省了你大量時(shí)間怔锌，不管現(xiàn)在還是將來(lái)都是一份很棒的參考指南。
編程快樂(lè)变过！??
