Coding Beaver
Coding Beaver Blog

Coding Beaver Blog

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

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

สอนติดตั้ง Prettier (Install) และตั้งค่า (Setups) บน Visual Studio Code ทำตามได้ทั้งบน MacOS และ Windows

Coding Beaver's photo
Coding Beaver
·Dec 28, 2021·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

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

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

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

หากใครยังไม่ได้ติดตั้งสามารถดูวิธีการติดต้ังได้จาก ลิ้งค์นี้ ได้เลยครับ

2. เปิด Visual Studio Code

Screen Shot 2564-12-28 at 20.54.41.png

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

Screen Shot 2564-12-28 at 20.32.08.png

Screen Shot 2564-12-28 at 20.34.05.png

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

Screen Shot 2564-12-28 at 20.35.29.png

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

1. เปิด Visual Studio Code

Screen Shot 2564-12-28 at 20.54.41.png

2. เปิด settings

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

Screen Shot 2564-12-28 at 20.43.07.png

3. Search คำว่า formatter

Screen Shot 2564-12-28 at 20.46.43.png

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

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

Screen Shot 2564-12-28 at 20.50.59.png

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

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

Screen Shot 2564-12-28 at 20.53.07.png

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

 
Share this