---
# System prepended metadata

title: React Note - 寫程式以外的檔案、環境設定
tags: [React]

---

# 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 是程式碼格式化工具
- 統一全境程式碼風格
- 可以設定存檔就自動修正格式
- 會幫你自動修正多餘程式碼

