---
tags: Note
---

# Prettier & ESLint

## Prettier
- 格式化 JSX、CSS、HTML、JSON 等等文件，更多可參考[官方文件](https://prettier.io/docs/en/index.html
- 常見用法
- `semi: true, // 句尾新增分號`
- `singleQuote: false, // 使用單引號代替雙引號`
### 使用原因

- 高效統一協作編寫風格。
- ESLint 程式碼格式化有盲區，只針對 JS、JSX、TS、TSX，像 HTML、SASS 等等就沒有。

### 開始
1. `npm install prettier`

---

## ESLint
- 格式化 JSX、CSS、HTML、JSON 等等文件，更多可參考[官方文件](https://prettier.io/docs/en/index.html
- 常見用法
- `semi: true, // 句尾新增分號`
- `singleQuote: false, // 使用單引號代替雙引號`
### 使用原因

- Prettier 只處理程式碼格式，使用 ESLint 避免一些常見的低階的錯誤

### 開始
1. `npm install esLint`

---

## 資料來源
[VSCode-Prettier和ESLint如何和睦共處?](https://iter01.com/584437.html)