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