無星的RN學習之旅（九）-ESLint引入

剛剛從簡書遷移，結果不知道怎麼批量上傳文件，有知道的老哥麻煩私信告訴我一下。。。簡書的文章都下到本地了不知道怎麼批量上傳到掘金。。。

這篇是寫給原生老哥們看的，畢竟若是是作js的老哥確定是不用說了。。。

背景：你們代碼寫的格式都不同，但願統一塊兒來，因此引入ESLint

這東西是啥應該不用我多說，至於怎麼引入，說實話，看了官網教程，也看了各類博客，反正最後我是搞得一團糟。。。。萬幸最後引入仍是成功了。

我是打算每一個項目的標準都不一樣（由於有的是rn，有的是h5），因此我都是局部引入，沒有全局引入。因此我接下來講的都是局部引入，會讓你卸掉全局的，想全局引入的同窗本身注意一小下，有些步驟就不要照作了。 目前airbnb的標準是最受推崇的，我就引入它了

環境和工具：Mac，webstrom，npm，yarn

1、檢查本地是否全局安裝過相關的包

打開終端

npm ls -g --depth 0
複製代碼

看看全局是否安裝過ESLint相關的包，若是有，卸載掉。

2、進入項目根目錄

npm info "eslint-config-airbnb@latest" peerDependencies
複製代碼

查看目前最新的airbnb標準

好，那目前你看到了這些庫，沒錯，這都是要加入的庫=。= （我比較喜歡多敲點命令，其實有一步操做，可是我不想作=。=）

接下來你要作的就很蠢了，一步步把這些庫都加進去。 注意，這個自己只是開發要用的輔助工具，所以沒有必要加到正式環境上去，記得加--dev

yarn add --dev eslint@^4.19.1 || ^5.3.0
yarn add --dev eslint-plugin-import@^2.14.0
yarn add --dev eslint-plugin-jsx-a11y@^6.1.1
yarn add --dev eslint-plugin-react@^7.11.0
複製代碼

3、這時候你的ESLint就裝好了，並且是局部的

開始新建你的標準

./node_modules/eslint/bin/eslint.js --init
複製代碼

接下來就是一大堆問題，這一大堆問題想必大夥都能看得懂，像我就是選了繼承自airbnb標準的，各位也能夠選別的或者按本身項目來。 最後確定就在項目根目錄生成了.eslint的js或json之類的文件。

4、開始檢查

./node_modules/eslint/bin/eslint.js  xx.js
複製代碼

由於你是局部引入的，因此必定要用項目的eslint才能識別 例如：

很明顯。。。錯誤比較多。。。不過問題不大，慢慢改就完事了，不會影響項目的正常運行

5、給webstrom設置檢查

好了，如今你的項目應該是能夠生效了，不過你確定仍是不爽，由於你發現cmd+alt+l格式化並不能幫助你適應eslint定下的規則。因此我會告訴你如何讓webstrom幫助你快速完成這件事。

Edit-Macros-Start-Marcos-Recording
複製代碼

開始錄屏

隨便選中一個你要修復的文件

前面的步驟會讓你的webstrom的右鍵中多了一個eslint fix的快捷鍵，這裏只須要選中它，修復當前文件 中止錄屏之後，輸入這段錄屏操做，並取個名字，例如：ESlint-Fix

爲它設置一個快捷鍵，而後點擊ok，之後這個快捷鍵就會爲你進行代碼縮進換行方面的格式化修復了，能夠用這個替代你的代碼格式化。

6、快速檢查全部文件

你能夠在你的

package.json-scripts
複製代碼

中寫入快捷命令，例如個人js文件都在src文件夾下，因此我要檢查的文件也就這些。

"lint": "eslint --ext .js src"
複製代碼

因此我要執行檢查命令也只須要輸入

npm run lint
複製代碼

各位能夠適當改動一下，使得其能檢查大家的文件，畢竟能少敲一些代碼是一些=。=