最新REACT項目設置 - nextjs, vscode, eslint, prettier

[梵总]

這裡想介紹一下我的React新項目設置

輕裝上陣

React很酷，但是要維護一堆的packages不是一件容易的事。我看好多開發人員是乾脆不理會outdated的packages，能用就行。
如果你有更新慾望症，那麼或許可以試試NextJS，建立一個簡單的App，只需要這些packages：

  "dependencies": {
    "isomorphic-unfetch": "^3.0.0",
    "next": "^9.0.5",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },

工具統一

這幾年VSCODE很火，微軟的開源貨可以說可圈可點。之前我用webstorm，其一不是免費，其二不見比VSCODE要好，其三我搞不定如何使用formatting/fix on save. 所以已經被我放棄。
我建議一個團隊使用統一的工具，IDE、Plugins、配置等等。
VSCODE下必須的三個插件：

• Eslint
• Prettier - Code formatter
• GitlLens
  記得把ESlint的 Auto Fix On Save的選項選上

項目下的ESlint安裝 （nextjs)

網上教程很多，（也很亂！！！）用下面這個簡單版（不含airebnb，如果你真的那麼崇拜airebnb，請留言，我可以抽空加上）

npm i --save-dev babel-eslint
npm i --save-dev eslint
npm i --save-dev eslint-plugin-react

在根目錄下創建.eslintrc, 寫入下面內容：

{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "globals": {
    "React": "writable"
  }
}

接下來，你可能會碰到Eslint報錯，比如missing prop validation console is not definded,等，你在根據需要來在代碼或者eslintrc裡調整。
注意：不用裝eslint-prettier，vscode的prettier好像可以take care這些。記住不用選“integrate with eslint” 新版的prettier (2.2.2) 好像連這個選擇都沒了。