問(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版本羞延，but要再學(xué)習(xí)一套語(yǔ)法，而且我的代碼都是ts寫(xiě)的脾还，但很多好的公共庫(kù)不是啊伴箩。
使用flow: 由于網(wǎng)絡(luò)的原因，這個(gè)環(huán)境真的難配鄙漏，同時(shí)也是要學(xué)習(xí)一些新的語(yǔ)法嗤谚。
我們的選擇：vscode + typings + eslint
vscode: 宇宙最強(qiáng)IDE家族的最新產(chǎn)品
typings: 基于typescirpt的接口文件
eslint: 代碼靜態(tài)檢查砂客，技能檢測(cè)低級(jí)的語(yǔ)法錯(cuò)誤，又能規(guī)范代碼格式和應(yīng)用最佳實(shí)踐
編輯器：?vscode
必裝和推薦的插件如下：
plugin
注：
點(diǎn)擊各個(gè)插件呵恢，會(huì)有對(duì)應(yīng)的詳細(xì)的說(shuō)明
vscode和插件的更新頻率還是比較快的，推薦及時(shí)更新
vscode的插件安裝很簡(jiǎn)單媚创，左側(cè)最下面那個(gè)按鈕就是擴(kuò)展面板渗钉，直接搜索插件名字，點(diǎn)擊安裝即可
全局安裝typings:
1npminstalltypings -g
安裝react和react-native的接口說(shuō)明文件：
1
2
3
typingsinstalldt~react--save
typingsinstalldt~react-native--save
等待安裝完成后（會(huì)取決于包的數(shù)目和網(wǎng)絡(luò)狀況）鳄橘，在項(xiàng)目的根目錄下會(huì)有一個(gè)typings目錄和typings.json配置文件:
typings-files
完成后重啟一下code , 或者使用reload命令，現(xiàn)在react-native和react相關(guān)的代碼就有提示說(shuō)明了芒炼，效果如下：
方法智能提示：
tip3
顯示方法的參數(shù)：
tip1
hover時(shí)顯示說(shuō)明：
tip2
注： 對(duì)于其他的第三方包瘫怜，可以用類(lèi)似的方法，或者借助于上面提到的插件本刽。
對(duì)于規(guī)范的模塊化js代碼鲸湃，vscode可以自動(dòng)建立聯(lián)系并提示的，我們只需要寫(xiě)好注釋即可子寓。
我們的代碼是要發(fā)布給其他同學(xué)用的暗挑，則需要我們?cè)诎l(fā)布時(shí)提供相應(yīng)的.d.ts接口文件。
默認(rèn)是包根目錄下index.d.ts文件斜友，否則需要在package.json配置中指明typings項(xiàng)（類(lèi)似main)炸裆。
如何編寫(xiě)接口文件：?文檔
代碼靜態(tài)借助于?eslint，它由CLI和配置文件（規(guī)則）組成鲜屏。
vscode中安裝了對(duì)應(yīng)插件后烹看，就可以實(shí)時(shí)在編輯器上看到檢測(cè)結(jié)果，不用自己運(yùn)行CLI洛史。
注：本文會(huì)涉及eslint-cli的參數(shù)惯殊，一般開(kāi)發(fā)用不到，在寫(xiě)自動(dòng)化腳本命令時(shí)查下文檔也殖。
先安裝eslint cli和相關(guān)插件靠胜，項(xiàng)目package.json中開(kāi)發(fā)依賴(lài)增加（這是比較流行的RN配置）：
1
2
3
4
5
6
7
8
"devDependencies": {
"eslint":"^3.3.1",
"babel-eslint":"^6.1.2",
"eslint-config-airbnb":"^10.0.1",
"eslint-plugin-import":"^1.14.0",
"eslint-plugin-jsx-a11y":"^2.1.0",
"eslint-plugin-react":"^6.1.2"
}
然后運(yùn)行npm install安裝。
配置文件.eslintrc.js（這里我們采用了js格式毕源，因?yàn)榭梢约幼⑨尷四？蛇xjson格式）
這里可以用eslint init啟動(dòng)向?qū)梢粋€(gè)霎褐。
我們可直接使用現(xiàn)成的（好處是和團(tuán)隊(duì)其他項(xiàng)目保持一致）址愿，在項(xiàng)目根目錄新建一個(gè).eslintr.js文件，內(nèi)容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
module.exports= {
parser:'babel-eslint',
? parserOptions: {
sourceType:'module'
? },
extends:"airbnb",
? plugins: [
"react",
"jsx-a11y",
"import"
? ],
? rules: {
// 0 = off, 1 = warn, 2 = error
// FB配置參考：
// https://github.com/facebook/react-native/blob/8baaad9b0fbda2b02bb1834452aa63cac7910dc5/.eslintrc
"global-require":0,
"no-use-before-define":0,// disallow use of variables before they are defined
"max-len":0,// specify the maximum length of a line in your program (off by default)
"no-console":0,// disallow use of console (off by default in the node environment)
"no-undef":2,// disallow use of undeclared variables unless mentioned in a /*global */ block
"no-unused-vars":0,
"block-scoped-var":0,// treat var statements as if they were block scoped (off by default)
"complexity":0,// specify the maximum cyclomatic complexity allowed in a program (off by default)
"consistent-return":0,// require return statements to either always or never specify values
// allow async-await
'generator-star-spacing':0,
"no-return-assign":1,// disallow use of assignment in return statement
"react/jsx-filename-extension":0,
"react/self-closing-comp":1,
"react/jsx-closing-bracket-location":0,
"react/prop-types":0,// 避免redux等注入屬性的情況
? },
// 這里設(shè)置可能用到的全局變量
"globals": {
"window":true,
"fetch":true,
"__DEV__":true,
"__APP__":true,
"__ANDROID__":true,
"__IOS__":true
? }
};
這里主要配置了插件和檢測(cè)規(guī)則冻璃，一些說(shuō)明：
規(guī)則后面的 0 代表關(guān)閉响谓， 1 代表顯示警告损合， 2 代表顯示錯(cuò)誤。有些規(guī)則可以配置參數(shù)娘纷，具體看上面的規(guī)則列表文檔
有一些簡(jiǎn)單錯(cuò)誤嫁审，vscode是可以自動(dòng)修復(fù)的（如果出現(xiàn)小燈泡的icon，就是可以自動(dòng)修復(fù)）
這里的規(guī)則基本都是實(shí)踐總結(jié)的js代碼編寫(xiě)的最佳實(shí)踐赖晶，遇到檢測(cè)錯(cuò)誤時(shí)律适，直接搜索規(guī)則，并閱讀說(shuō)明遏插。
不要隨便就關(guān)閉捂贿。
安裝vscode的eslint插件后：
eslint
What’s more:
可以使用pre-commit工具，在每次提交之前運(yùn)行eslint監(jiān)測(cè)代碼胳嘲，如果失敗厂僧，則禁止提交。
vscode安裝了react-native-tools插件后了牛，可以代替chromDevTools調(diào)試代碼颜屠。
更接近原生的調(diào)試方式。
我們常使用的方式是：
在終端開(kāi)啟package server
vscode選擇鹰祸，dbug, attach to packager
在終端上汽纤，調(diào)出調(diào)試菜單，選擇 Debug JS Remotly
img
工欲善其事必先利其器福荸，折騰是值得的蕴坪。
好的開(kāi)發(fā)環(huán)境提交提供效率，同時(shí)保障質(zhì)量敬锐。
好的開(kāi)發(fā)體驗(yàn)背传，可以讓你快樂(lè)coding。
