# สอนติดตั้ง Prettier บน Visual Studio Code

Prettier จะช่วยเราจัด Code ของเราให้สวยงามได้ภายในพริบตา วันนี้ผมจะสอนทุกคนติดตั้ง Prettier extension บน Visual Studio Code ไปด้วยกันครับ

## 🛠 วิธีการติดตั้ง Prettier

### 1\. ติดตั้ง Visual Studio Code

หากใครยังไม่ได้ติดตั้งสามารถดูวิธีการติดต้ังได้จาก [ลิ้งค์นี้](https://blog.coding-beaver.com/visual-studio-code-installation-guide) ได้เลยครับ

### 2\. เปิด Visual Studio Code

![Screen Shot 2564-12-28 at 20.54.41.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640699699638/AxbEGepLJ.png align="left")

### 3\. ไปที่สัญลักษณ์ Extension ด้านซ้าย

![Screen Shot 2564-12-28 at 20.32.08.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640698360305/bwZAReEvBAj.png align="left")

### 4\. Search คำว่า `prettier` ลงไปที่ช่อง Search

![Screen Shot 2564-12-28 at 20.34.05.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640698451034/7Zr5cziPH.png align="left")

### 5\. เลือก Prettier ตัวที่มียอด Download สูงที่สุด แล้วคลิก Install

![Screen Shot 2564-12-28 at 20.35.29.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640698574605/Az11DQJQ4.png align="left")

## ⚙️ วิธีการตั้งค่า Prettier

### 1\. เปิด Visual Studio Code

![Screen Shot 2564-12-28 at 20.54.41.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640699699638/AxbEGepLJ.png align="left")

### 2\. เปิด settings

มาที่เครื่องหมาย ⚙️ ด้านล่างซ้าย >> Settings

![Screen Shot 2564-12-28 at 20.43.07.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640699257253/wqizrKhyf.png align="left")

### 3\. Search คำว่า `formatter`

![Screen Shot 2564-12-28 at 20.46.43.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640699418588/OPf7g3cml.png align="left")

### 4\. ตั้งให้ Prettier เป็นตัวจัด Code หลักของเรา

ตั้งค่า Default formatter เป็น Prettier - Code formatter

![Screen Shot 2564-12-28 at 20.50.59.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640699584215/BfxKEUhzdv.png align="left")

### 5\. ตั้งให้ Prettier จัด Code ของเราทุกครั้งเมื่อเรากด Save

ติ๊ก ✅ ที่ Editor: Format On Save

![Screen Shot 2564-12-28 at 20.53.07.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640699622256/Qsoxze435.png align="left")

## 📖 เรียนรู้เพิ่มเติม

* 🧑🏻‍💻 [รู้จัก Coding Beaver](https://coding-beaver.tech/about)
    
* 1️⃣ [สิ่งแรกที่ควรรู้ถ้าอยากเป็น Developer](https://www.youtube.com/watch?v=x5OzfQ6SE9I)
    
* 📚 [ช่องทางการเรียนรู้](https://www.coding-beaver.tech/#learning-channels)