在Visual Studio Code中的React Native專案設定ESLint與Prettier

2020/7 註:請參考這個儲存庫中的更動: react-env

React Native 專案並沒有內建 eslint 模組,所以需要在專案建立後手動進行設定。有很多種設定的方式,這裡是使用 react-app 的設定值(Create React App 使用的)為基礎,以及針對 Visual Studio Code 編輯器的設定,其它設定方式可再參考最後的參考資料中的設定。

步驟

步驟一: 建立新的專案

以 expo 或其它建立方式建立專案。

步驟二: 安裝 VS Code 擴充

安裝以下兩個 VS Code 擴充:

  • ESLint
  • Prettier

註: Prettier 的擴充有好幾套,請先安裝下載量最多的即可,除非有不能使用的情況再安裝別套。

步驟三: 安裝模組

在終端機裡,對應專案的根目錄,輸入以下的指令(選擇其中一種即可,如果已經有安裝 yarn 建議使用上面這個):

yarn add -D eslint-plugin-prettier prettier eslint-config-react-app eslint-plugin-import eslint-plugin-react eslint-plugin-flowtype eslint-plugin-jsx-a11y babel-eslint eslint eslint-plugin-react-hooks

npm install --save-dev eslint-plugin-prettier prettier eslint-config-react-app eslint-plugin-import eslint-plugin-react eslint-plugin-flowtype eslint-plugin-jsx-a11y babel-eslint eslint eslint-plugin-react-hooks

註: 每個專案都要安裝一次,這是安裝到專案中的模組 注意: 最好不要把 eslint 與相關模組安裝到全域中

步驟四: 更新 VS Code 設定

請將以下的設定加到你的 VSCode 使用者設定之中(在選單 -> 喜好設定 -> 設定,然後點按右上角有個{}的圖示,直接貼到右邊的視窗中的花括號內即可):

"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"prettier.disableLanguages": ["js"],
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"files.autoSave": "onFocusChange",

註: 這個只需要設定一次,之後所有專案都可以使用

步驟五: 加入 eslint 與 prettier 設定檔案

手動建立兩個 .eslintrc.prettierrc 的設定檔到專案的根目錄。內容如下節內容,最好是先建立好,之後每個專案直接拷貝即可。

eslint 與 prettier 設定檔案內容

.eslintrc

{
"env": {
"node": true,
"browser": true,
"es6": true,
"jest": true
},
"extends": "react-app",
"parser": "babel-eslint",
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}

.prettierrc

{
"singleQuote": true,
"trailingComma": "es5",
"semi": false
}

註: 風格可依個人喜好設定,請參考 prettier 選項文件,以上設定為"字串使用單引號"、"物件字面定義統一加上最後逗號"、"不使用分號作為語句結尾"

故障排除

eslint 不會正常檢查

使用以下的指令來除錯,看有什麼錯誤訊息,然後到網路中搜尋:

eslint --debug App.js

再次重頭檢查所有的相關設定,可能會包含以下幾個:

  • vscode 的版本是不是有升級到最新版本
  • vscode 裡擴充是否有安裝
  • vscode 裡的喜好設定是否有正確,或出現錯誤的訊息
  • 專案裡是否正確安裝所需模組(看 package.json 裡)
  • 是否有安裝到全或的 eslint 模組,有可能造成衝突

參考資料