วิธีจัดรูปแบบอัตโนมัติใน VS Code เพื่อประหยัดเวลาและความพยายาม [2023]

Visual Studio Code หรือที่รู้จักกันในชื่อ VS Code เป็นหนึ่งในโปรแกรมแก้ไขโค้ดที่ใช้มากที่สุด VS Code รองรับ Node.js, JavaScript และ TypeScript ในตัว อย่างไรก็ตาม คุณสามารถใช้ส่วนขยายต่างๆ เพื่อทำให้ภาษาและรันไทม์อื่นๆ ส่วนใหญ่สามารถเข้าถึงได้

Microsoft เป็นบริษัทที่พัฒนาโปรแกรมแก้ไขโค้ดแบบโอเพ่นซอร์สและฟรีนี้

VS Code เป็นที่นิยมเนื่องจากคุณสมบัติเหล่านี้

Intellisense: VS Code ให้การเติมโค้ดอัตโนมัติและการเน้นไวยากรณ์
ข้ามแพลตฟอร์ม: คุณสามารถใช้ตัวแก้ไขโค้ดนี้บนระบบปฏิบัติการ Linux, Windows และ macOS
ความพร้อมใช้งานของส่วนขยายต่างๆ: ความพร้อมใช้งานของส่วนขยายต่างๆ ยังสามารถแปลง VS Code เป็นสภาพแวดล้อมการพัฒนาแบบรวม (IDE)
รองรับหลายภาษา: คุณสามารถใช้เครื่องมือนี้กับภาษาโปรแกรมเกือบทั้งหมดผ่านส่วนขยาย VS Code
เทอร์มินัลรวม: เทอร์มินัลในตัวใน VS Code ช่วยให้นักพัฒนาดำเนินการคำสั่ง Git ได้ทันทีจากตัวแก้ไขโค้ด คุณจึงคอมมิต พุช และดึงการเปลี่ยนแปลงจากเอดิเตอร์นี้ได้

สารบัญ

การจัดรูปแบบอัตโนมัติใน VS Code

ข้อกำหนดเบื้องต้น

VS Code: ตัวแก้ไขโค้ดนี้ให้ดาวน์โหลดฟรี หากคุณไม่ได้ติดตั้งไว้ในเครื่อง ให้ดาวน์โหลดจากเว็บไซต์ทางการ ทั้งนี้ขึ้นอยู่กับระบบปฏิบัติการของคุณ
เลือกภาษาที่จะใช้: คุณต้องเลือกภาษาที่จะใช้เนื่องจากมีตัวจัดรูปแบบที่แตกต่างกันสำหรับภาษาต่างๆ
ตัวจัดรูปแบบ: VS Code ใช้ส่วนขยายสำหรับการจัดรูปแบบรหัส เราจะใช้ Prettier ในบทความนี้ อย่างไรก็ตาม คุณมีอิสระที่จะใช้รูปแบบที่เหมาะสมกับภาษาที่คุณใช้

การจัดรูปแบบอัตโนมัติเป็นคุณสมบัติที่จะจัดรูปแบบบล็อก/ บรรทัดของโค้ดหรือไฟล์โดยอัตโนมัติบนตัวแก้ไขโค้ดตามกฎและแนวทางเฉพาะ คุณลักษณะนี้อิงตามไฟล์การกำหนดค่าที่ระบุกฎการจัดรูปแบบในการเยื้อง การขึ้นบรรทัดใหม่ และการเว้นวรรค

เมื่อเปิดใช้คุณลักษณะการจัดรูปแบบอัตโนมัติ กฎทั้งหมดนี้จะนำไปใช้กับไฟล์ทั้งหมดในโค้ดเบสของคุณขณะที่คุณเขียน

อย่างไรก็ตาม คุณยังสามารถปิดใช้งานการจัดรูปแบบอัตโนมัติสำหรับบล็อกโค้ดเฉพาะได้ หากคุณต้องการให้บล็อกนั้นโดดเด่นกว่าส่วนอื่นๆ เพื่อให้บรรลุเป้าหมายนี้ คุณสามารถรวมโค้ดบางส่วนไว้ในบล็อกความคิดเห็นที่ระบุกฎที่จะนำไปใช้

ประโยชน์ของรหัสการจัดรูปแบบอัตโนมัติในรหัส VS

ประหยัดเวลา: การเขียนโค้ดและการจัดรูปแบบอาจใช้เวลานาน การจัดรูปแบบอัตโนมัติช่วยประหยัดเวลา คุณจึงสามารถมุ่งเน้นที่กระบวนการเขียนและไวยากรณ์ได้มากขึ้น
ความสอดคล้อง: แม้ว่าซอร์สโค้ดจะไม่ปรากฏในฝั่งไคลเอ็นต์ แต่ก็ควรมีความสอดคล้องกัน การจัดรูปแบบอัตโนมัติมีประโยชน์ โดยเฉพาะอย่างยิ่งสำหรับโครงการขนาดใหญ่ที่มีผู้ร่วมให้ข้อมูลหลายคน
ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด: คุณลักษณะการจัดรูปแบบอัตโนมัติมีประโยชน์ในการบังคับใช้การเยื้อง การเว้นวรรค และการตั้งชื่อที่สอดคล้องกัน
สำหรับการอ่านโค้ดอย่างง่าย: โค้ดที่มีรูปแบบเหมาะสมง่ายต่อการติดตามระหว่างการตรวจสอบโค้ด นักพัฒนาใหม่ที่เข้าร่วมองค์กรของคุณจะเข้าใจโค้ดที่มีรูปแบบเหมาะสมได้อย่างง่ายดาย

วิธีการลบภาพยนตร์จาก Vudu

วิธีเปิดใช้งานรูปแบบอัตโนมัติในโค้ด VS และปรับแต่ง

ทำตามขั้นตอนเหล่านี้เพื่อเปิดใช้งานการจัดรูปแบบอัตโนมัติ:

คุณต้องใช้ฟอร์แมตเตอร์ในรูปแบบส่วนขยายเพื่อเปิดใช้งานการจัดรูปแบบอัตโนมัติใน VS Code คุณจะพบไอคอนส่วนขยายในเมนูของ VS Code ของคุณ

ติดตั้งส่วนขยายที่สวยกว่า ค้นหาสวยกว่า; คุณจะพบส่วนขยายจำนวนมากที่ใช้ชื่อเดียวกัน คลิกที่อันแรก ผู้พัฒนาโดย Prettier และคลิก “ติดตั้ง”

เมื่อติดตั้ง Prettier บน VS Code ของคุณแล้ว คุณสามารถเปิดใช้คุณลักษณะการจัดรูปแบบอัตโนมัติได้

เราใช้ไฟล์ HTML อย่างง่ายของหน้าเข้าสู่ระบบเพื่อสาธิตวิธีเปิดใช้งานการจัดรูปแบบอัตโนมัติ

เราจะใช้รหัสนี้:

<!DOCTYPE html>

<html>

 <head>

 <title>Login Form</title>

 </head>

 <body style>

 <h2 style="text-align: center; margin-top: 50px;">Login </h2>

 <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);">

             <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label>

 <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>

<label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label>

 <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>

<input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">

 </form>

 </body>

</html>

แม้ว่าโค้ดข้างต้นจะใช้งานได้ แต่ก็อ่านและติดตามได้ยากเนื่องจากไม่ได้ย่อหน้าตามที่คาดไว้ เราจะใช้ Prettier เพื่อจัดรูปแบบโค้ดอัตโนมัติ

ทำตามขั้นตอนเหล่านี้

สร้างไฟล์ HTML (index.html) และเพิ่มโค้ดด้านบน

ค้นหาการตั้งค่าที่ด้านล่างซ้ายของ VS Code ของคุณ

3. พิมพ์ Formatter ในแถบค้นหาแล้วเลือก Prettier บนแท็บ Editor:Default Formatter

9 เครื่องมือการตลาดวิดีโอที่ดีที่สุดเพื่อเพิ่มยอดขายและการรับรู้แบรนด์

4. ค้นหาตัวแก้ไข: จัดรูปแบบในบันทึกและทำเครื่องหมายในช่อง

5. บันทึกไฟล์ HTML ของคุณ เลือกอินพุตบนเอกสาร HTML ของคุณ คลิกขวา แล้วเลือก จัดรูปแบบเอกสาร

6. ตรวจสอบว่าเอกสารของคุณได้รับการจัดรูปแบบหรือไม่ ส่วนขยายนี้จะจัดรูปแบบโค้ดอื่นๆ ทั้งหมดที่คุณเขียนบน VS Code ของคุณโดยอัตโนมัติ

6. ปรับการตั้งค่า Prettier Configuration: Prettier ได้รับการตั้งค่าให้ทำงานหลายอย่างตามค่าเริ่มต้น อย่างไรก็ตาม คุณยังสามารถปรับแต่งให้เหมาะกับความต้องการของคุณได้ ไปที่การตั้งค่าใน VS Code ของคุณ ค้นหา Prettier และปรับการตั้งค่าตามที่คุณต้องการ

7. สร้างไฟล์การกำหนดค่าที่สวยกว่า: การตั้งค่าที่คุณกำหนดค่าในเครื่องของคุณอาจแตกต่างจากที่อื่นหากคุณทำงานเป็นทีม ไฟล์คอนฟิกูเรชันที่สวยกว่าจะช่วยให้คุณมีสไตล์โค้ดที่สอดคล้องกันสำหรับโปรเจกต์ของคุณ สร้างไฟล์ .prettierrc ที่มีนามสกุล .json เพื่อกำหนดการตั้งค่าโครงการของคุณ เราสามารถเพิ่มโค้ดนี้ในไฟล์ JSON เพื่อจุดประสงค์ในการสาธิต

{

  "trailingComma": "es5",

  "tabWidth": 4,

  "semi": false,

  "singleQuote": true

}

บล็อกโค้ดด้านบนระบุสี่สิ่ง ได้แก่ เครื่องหมายจุลภาคต่อท้าย ความกว้างของแท็บ การใช้เครื่องหมายอัฒภาค และระบุว่าจะใช้เครื่องหมายคำพูดเดี่ยวหรือคู่ ในกรณีนี้;

เครื่องหมายจุลภาคต่อท้ายจะถูกเพิ่มเมื่อแปลงรหัสเป็น es5 เท่านั้น
ความกว้างของแท็บ จำนวนช่องว่างสำหรับแต่ละแท็บถูกตั้งค่าเป็น 4
กึ่ง ระบุว่าคุณควรเพิ่มเครื่องหมายอัฒภาคหรือไม่ในรหัสของคุณที่ส่วนท้ายของคำสั่ง เราได้ตั้งค่าเป็นเท็จ ซึ่งหมายความว่าจะไม่เพิ่มเครื่องหมายอัฒภาค
คุณสามารถใช้เครื่องหมายคำพูดเดี่ยวหรือคู่ในรหัสของคุณ เราได้ระบุว่าควรใช้ single quotes สำหรับโครงการนี้

คุณสามารถดูเอกสาร Prettier เพื่อทำความเข้าใจวิธีสร้างการตั้งค่าคอนฟิกูเรชันที่สอดคล้องกัน

แนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดรูปแบบอัตโนมัติใน VS Code

ใช้รูปแบบที่ถูกต้อง

แม้ว่าเราจะใช้ Prettier ในบทความนี้เพื่อวัตถุประสงค์ในการสาธิต แต่ก็ไม่ได้หมายความว่าจะใช้กับทุกภาษา มีส่วนขยายการจัดรูปแบบหลายร้อยรายการสำหรับ VS Code และขึ้นอยู่กับคุณที่จะกำหนดสิ่งที่เหมาะกับความต้องการของคุณ ตัวอย่างเช่น ตัวจัดรูปแบบเช่น Prettier และ Beautify เหมาะกับ HTML และ CSS ในทางกลับกัน คุณสามารถใช้ส่วนขยาย Black หรือ Python เพื่อจัดรูปแบบโค้ด Python ของคุณได้

ใช้รูปแบบรหัสที่สอดคล้องกัน

ดังที่คุณได้เห็น คุณสามารถกำหนดการตั้งค่าของตัวจัดรูปแบบเอง หากคุณทำงานเป็นทีม ตรวจสอบให้แน่ใจว่าคุณมีการกำหนดค่าเดียวกันเพื่อสร้างสไตล์โค้ดที่สอดคล้องกัน วิธีที่ดีที่สุดคือการสร้างไฟล์ .prettierrc.extension เพื่อรวมการกำหนดค่าทั้งหมดสำหรับโครงการของคุณ

ใช้ผ้าลินิน

คุณสามารถใช้ linters เพื่อตรวจสอบการละเมิดรูปแบบ ข้อผิดพลาดทางไวยากรณ์ และข้อผิดพลาดในการเขียนโปรแกรมในโค้ดของคุณ การรวม linters กับการจัดรูปแบบอัตโนมัติจะช่วยประหยัดเวลาและความพยายามในการทำให้โค้ดของคุณอ่านได้และดีบัก

ใช้แป้นพิมพ์ลัด

VS Code มีทางลัดหลายร้อยรายการที่จะช่วยคุณประหยัดเวลาในการจัดรูปแบบ คุณยังสามารถปรับแต่งคำสั่งเหล่านี้ให้เป็นสิ่งที่น่าจดจำได้อีกด้วย

ตรวจสอบรหัสของคุณก่อนที่จะตกลง

แม้ว่าการขัดสีและการจัดรูปแบบอัตโนมัติอาจช่วยแก้ปัญหาบางอย่างในโค้ดของคุณได้ คุณยังต้องตรวจทานรหัสของคุณก่อนที่จะป้อนคำสั่งยืนยัน

วิธีการตั้งค่าการสำรองข้อมูลอัตโนมัติด้วย Deja Dup

ทางลัดการจัดรูปแบบรหัส

VS Code เป็นตัวแก้ไขโค้ดหลายแพลตฟอร์มที่คุณสามารถใช้ได้บนระบบ Windows, Mac และ Linux เช่น Ubuntu คุณสามารถใช้ทางลัดต่อไปนี้เพื่อจัดรูปแบบทั้งเอกสารหรือพื้นที่ที่เน้นเฉพาะในโค้ดของคุณ

หน้าต่าง

Shift + Alt + F จัดรูปแบบทั้งเอกสาร
Ctrl + K, Ctrl + F จัดรูปแบบส่วนของรหัสที่คุณเลือก ตัวอย่างเช่น div

แมคโอเอส

Shift + Option + F จัดรูปแบบทั้งเอกสาร
Ctrl + K, Ctrl + F จัดรูปแบบส่วนของรหัสที่คุณเลือก ตัวอย่างเช่น div

อูบุนตู

Ctrl + Shift + I จัดรูปแบบทั้งเอกสาร
Ctrl + K, Ctrl + F จัดรูปแบบส่วนของรหัสที่คุณเลือก ตัวอย่างเช่น div

อย่างไรก็ตาม โปรดทราบว่าทางลัดเหล่านี้บางส่วนอาจล้มเหลวหากคุณปรับแต่ง VS Code ของคุณด้วยทางลัดต่างๆ

คุณสามารถตรวจสอบทางลัด VS Code ของคุณโดยใช้ขั้นตอนเหล่านี้

เปิด VS Code แล้วคลิกที่รายการไฟล์ที่มุมซ้ายบน
เลื่อนไปที่การตั้งค่า
คลิกที่แป้นพิมพ์ลัดเพื่อดูทางลัดทั้งหมดที่คุณสามารถใช้ได้

บทสรุป

การจัดรูปแบบอัตโนมัติช่วยให้คุณประหยัดเวลาได้มากเมื่อคุณเปิดใช้งาน ตัวเลือกส่วนขยายจะแตกต่างกันไปตามภาษาที่คุณใช้ คุณสามารถติดตั้งตัวจัดรูปแบบโค้ดได้หลายแบบขึ้นอยู่กับภาษาการเขียนโปรแกรมที่คุณใช้สำหรับโครงการของคุณ

ตรวจสอบเอกสารประกอบของตัวจัดรูปแบบที่คุณเลือกสำหรับโค้ดของคุณเสมอ วิธีนี้จะช่วยให้คุณเข้าใจภาษาที่รองรับและวิธีการใช้ให้เกิดประโยชน์สูงสุด

ตรวจสอบบทความของเราเกี่ยวกับส่วนขยาย VS Code ที่ดีที่สุดที่นักพัฒนาควรใช้

ปฏิกิริยาของคุณคืออะไร?