# React Note - 寫程式以外的檔案、環境設定 ###### tags: `React` ## package.json → 套件工具包的清單（文字清單，沒有工具本體） 它是用於工具的配置中心。它也是 `npm`和 `yarn`存儲所有已安裝軟體包的名稱和版本的地方。 ## ES-module → JavaScript 模組化的套件工具包（工具本身的所在） - 不需要進版控 - module 的內容只有在第一次被 import 時會執行。 **使用方式：** Terminal 進入專案資料夾後， ```terminal npm i ``` npm 就可以依據 package.json 來下載專案所需工具到 ES-module 資料夾裡 ## webpack.config.js - 它是一個「**打包工具**」。將眾多模組與資源打包成一包檔案，並編譯我們需要預先處理的內容，變成瀏覽器看得懂的東西，讓我們可以上傳到伺服器。 - 適合用在大型的應用程式。因為大型的應用程式需要管理眾多不同類型的檔案，使用起來相對有感。 [關於 Webpack，它是什麼？能夠做什麼？為什麼？怎麼做？- freeCodeCamp 的筆記](https://askie.today/what-is-webpack/) ## ESLint - 是一個檢查 codeing style （編碼風格、程式碼排版）的工具 - 會檢查出專案中有可能會出錯、語法不正確的地方 - 統一 coding style：能夠按照個人或團隊的需要設定專屬的 coding style，在團隊內使用可以確保被提交上去的程式碼品質與一致性。 - 可高度客製化：可以使用 standard 或 ESLint 的推薦規則組，還有 airbnb、google 他們有公開的內部用的 codeing style 套件。這些套件引入後也可以自訂開關、或增加自己的設定。 - 幫你做簡單的程式碼排版 ＊這邊推薦使用 airbnb 插件 [https://github.com/airbnb/javascript](https://github.com/airbnb/javascript) ### 如何運行 ESLint 執行時會解析你每行程式碼每個字符，是否符合你設定的「規則 Rules」。 1. 幫你找出語法錯誤 沒宣告變數就拿來用、少了括號等等常見的語法錯誤 2. 確保你遵循最佳實踐 不使用全域變數、建議使用 `===` 而非 `==`、不使用 `eval` … 3. 提醒你刪掉多餘的程式碼 有些變數宣告了卻沒有使用、`import` 了沒有使用的模組、空的 class constructor … 4. 統一基本的 coding style 要不要加分號、使用單引號或雙引號、縮排使用 space 或 tab 等等 參考 [[JS] 使用 ESLint 提高程式碼品質](https://larrylu.blog/improve-code-quality-using-eslint-742cf1f384f1) ## Prettier - Prettier 是程式碼格式化工具 - 統一全境程式碼風格 - 可以設定存檔就自動修正格式 - 會幫你自動修正多餘程式碼