在前端編碼時(shí),為了規(guī)范每個(gè)成員的代碼風(fēng)格以及避免低級(jí)的錯(cuò)誤,我們可以使用Eslint來制定規(guī)則.這套機(jī)制同樣適用于React Native的團(tuán)隊(duì)開發(fā).
下面將介紹如何在React Native中使用Eslint
得到一個(gè)React Native 項(xiàng)目
通過命令:
react-native init EsLintTestProject
新建一個(gè)項(xiàng)目.并用命令進(jìn)入該文件夾
安裝Eslint
有兩種安裝方式,全局安裝或本地項(xiàng)目安裝.(推薦 本地項(xiàng)目安裝)
本地項(xiàng)目安裝命令:
npm install eslint --save-dev
初始化Eslint 步驟
首先使用命令:
eslint --init
按了Entry鍵后,控制臺(tái)會(huì)讓你輸入一些選項(xiàng).
本人的步驟是這樣的:
使用上下鍵可以切換方式.這第一步問你需要如何配置Eslint.
這里一共有三種方式:(1).詢問項(xiàng)目的風(fēng)格;(2).使用流行風(fēng)格;(3).檢查代碼
這里我選的是第一個(gè),直接按
Entry進(jìn)入下一題.
這就是其后的選擇結(jié)果.當(dāng)這些都選擇完畢后,會(huì)在項(xiàng)目的根目錄生成一個(gè).eslintrc.js文件.這就是配置項(xiàng),就算之前選錯(cuò)了也可以在此進(jìn)行更改.
到這一步就可以嘗試運(yùn)行指令了:
eslint index.android.js
如無意外,控制臺(tái)肯定會(huì)報(bào)各種錯(cuò)誤.
這里面也就兩個(gè)類型的錯(cuò)誤,第一個(gè)是no-unused-vars(沒有用到的變量),第二個(gè)是indent(排版縮進(jìn)).
接下來需要將這些不該報(bào)錯(cuò)的地方消除掉.
首先解決縮進(jìn)問題,找到.eslintrc.js文件的indent對(duì)象,將tab字段改成2.
然后再運(yùn)行:
eslint index.android.js
發(fā)現(xiàn)錯(cuò)誤僅剩下3個(gè)了.
再該解決no-unused-vars的問題.這是因?yàn)閑slint檢查的問題,我們需要增加額外的插件支持.
運(yùn)行命令:
npm install eslint-plugin-react --save-dev
找到.eslintrc.js文件的extends.
將
"extends": "eslint:recommended",
替換成
"extends": ["eslint:recommended", "plugin:react/recommended"],
接著再次運(yùn)行eslint index.android.js.所有不該出現(xiàn)的錯(cuò)誤都消失啦.
接著一切安裝官網(wǎng)的Rule,配置代碼的規(guī)范
http://eslint.org/docs/rules/
