วิธีจัดรูปแบบโค้ดใน VS Code

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

ในบทความนี้ เราจะแสดงวิธีจัดรูปแบบโค้ดใน VS Code พร้อมด้วยเคล็ดลับที่เป็นประโยชน์อื่นๆ ในการจัดระเบียบโค้ดของคุณอย่างดี

วิธีจัดรูปแบบโค้ด

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

สำหรับพีซี

จัดรูปแบบเอกสารทั้งหมด:

เปิดไฟล์ด้วยรหัสที่คุณต้องการจัดรูปแบบ

กด Shift + Alt + F

บันทึกการเปลี่ยนแปลงโดยคลิกที่ “ไฟล์” ที่มุมซ้ายบน จากนั้นเลือก “บันทึก” หรือกด “Ctrl + S”

การจัดรูปแบบรหัสที่เลือกเท่านั้น:

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

กด “Ctrl + K”

กด “Ctrl + F”

บันทึกการเปลี่ยนแปลงโดยเลือก “บันทึก” ในเมนูไฟล์ที่มุมซ้ายบนหรือกด “Ctrl + S”

โปรดทราบว่าหากคุณกด “Ctrl + F” โดยไม่กด “Ctrl + K” ก่อน จะเป็นการเปิดเมนูค้นหาขึ้นมา หากเกิดเหตุการณ์นี้ขึ้น ให้ปิดการคลิกปุ่ม “x” หรือกด Esc

ย้ายบรรทัดขึ้นหรือลง:

เลื่อนเคอร์เซอร์ไปที่จุดเริ่มต้นของบรรทัดที่คุณต้องการย้าย

กดปุ่ม Alt ค้างไว้

หากต้องการเลื่อนเส้นขึ้นด้านบน ให้กดลูกศรขึ้น หากต้องการเลื่อนลง ให้กดลูกศรลง

บันทึกไฟล์ของคุณโดยเลือกจากเมนูไฟล์ที่มุมซ้ายบนของหน้าต่างหรือกด “Ctrl + S”

เปลี่ยนการเยื้องของบรรทัดเดียว:

ย้ายเคอร์เซอร์ไปที่จุดเริ่มต้นของบรรทัดที่คุณต้องการเปลี่ยนการเยื้อง

กด “Ctrl + ]” เพื่อเพิ่มการเยื้อง

กด “Ctrl + [“ to decrease the indent.

Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.

For Mac

Format the entire document:

Open the file with the code that you wish to format.

Press “⇧ + ⌥ + F.”

Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.

Formatting selected code only:

Highlight the part of the document that you wish to format.

Press “⌘ + K”.

Press “⌘ + F”.

Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.

Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.

Move lines up or down:

Place your cursor at the beginning of the line you want to edit.

Hold down the “⌥” Key.

To move a line up, press the up arrow. To move it down, press the down arrow.

Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.

Change indentation of a single line:

Move your cursor to the beginning of the line in which you want to change the indention.

Press “⌘ + ]” เพื่อเพิ่มการเยื้อง

กด “⌘ +[“เพื่อลดการเยื้อง[“todecreasetheindent

บันทึกไฟล์โดยกด “⌘ + S” หรือโดยเลือก “บันทึก” จากเมนูไฟล์ที่มุมซ้ายบนของหน้าต่าง

รหัสรูปแบบรหัส VS บนบันทึก

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

เปิดรหัส VS

คลิกที่ปุ่มส่วนขยายที่อยู่บนเมนูด้านซ้าย นี่คือไอคอนที่ดูเหมือนสี่กล่อง หรือกด “Ctrl + Shit + x” สำหรับ PC หรือ “⌘ + ⇧ + x” บน Mac

ในแถบค้นหาที่ด้านบนของเมนู ให้พิมพ์ Prettier

คลิกที่ปุ่มติดตั้งที่มุมล่างขวาของไอคอน Prettier

รอให้ส่วนขยายเสร็จสิ้นการติดตั้ง

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

เปิดหน้าต่างการตั้งค่าโดยกด “Ctrl +” บนพีซีหรือ “⌘ +” บน Mac

บนแถบค้นหาพิมพ์ในฟอร์แมตเตอร์ สิ่งนี้จะทำให้เกิดการตั้งค่าการจัดรูปแบบหลายอย่าง

ในการตั้งค่าตัวแก้ไข: ตัวจัดรูปแบบเริ่มต้น ตรวจสอบให้แน่ใจว่าส่วนขยายที่เลือกมีความสวยงามกว่า หากไม่มีตัวจัดรูปแบบเริ่มต้นหรือรหัส VS กำลังใช้ตัวจัดรูปแบบอื่นโดยค่าเริ่มต้น ให้กดลูกศรดรอปดาวน์ เลือก “สวยกว่า – ตัวจัดรูปแบบโค้ด” จากรายการ หรืออีกทางหนึ่ง Prettier อาจปรากฏในรายการเป็น “esbenp.prettier-vscode”

ตรวจสอบให้แน่ใจว่าได้เลือกตัวเลือก “ตัวแก้ไข: รูปแบบในการบันทึก” หากไม่เป็นเช่นนั้น ให้สลับเครื่องหมายถูก

พิมพ์ “Prettier” ในแถบค้นหาการตั้งค่า

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

คุณสามารถแก้ไขการตั้งค่า Prettier เฉพาะได้ ขึ้นอยู่กับความชอบของคุณ เมื่อเสร็จแล้ว คุณสามารถออกจากเมนูนี้ได้

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

เลือกรูทของโปรเจ็กต์ของคุณที่เมนูด้านซ้าย

คลิกที่ปุ่มไฟล์ใหม่เพื่อสร้างไฟล์ปรับแต่ง

ตั้งชื่อไฟล์นี้ว่า “.prettierrc”

ในไฟล์ เพียงป้อน {}

Prettier จะจัดรูปแบบเอกสารของคุณโดยอัตโนมัติทุกครั้งที่คุณบันทึก

เคล็ดลับในการจัดระเบียบรหัส

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

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

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

รหัสการจัดงาน

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

คุณรู้วิธีอื่นในการจัดรูปแบบไฟล์ของคุณใน VS Code หรือไม่? รู้สึกอิสระที่จะแบ่งปันความคิดของคุณในส่วนความคิดเห็นด้านล่าง