วิธีจัดรูปแบบโค้ดใน 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:

      วิธีส่งบันทึกถึงตัวคุณเองใน Slack
  • 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:

      วิธีลิงก์ไปยังสไลด์อื่นในงานนำเสนอ PowerPoint เดียวกัน
  • 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
  • รอให้ส่วนขยายเสร็จสิ้นการติดตั้ง
  •   ปรับโฟกัสหลังจากถ่ายภาพบน iPhone ของคุณ

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

  • เปิดหน้าต่างการตั้งค่าโดยกด “Ctrl +” บนพีซีหรือ “⌘ +” บน Mac
  • บนแถบค้นหาพิมพ์ในฟอร์แมตเตอร์ สิ่งนี้จะทำให้เกิดการตั้งค่าการจัดรูปแบบหลายอย่าง
  • ในการตั้งค่าตัวแก้ไข: ตัวจัดรูปแบบเริ่มต้น ตรวจสอบให้แน่ใจว่าส่วนขยายที่เลือกมีความสวยงามกว่า หากไม่มีตัวจัดรูปแบบเริ่มต้นหรือรหัส VS กำลังใช้ตัวจัดรูปแบบอื่นโดยค่าเริ่มต้น ให้กดลูกศรดรอปดาวน์ เลือก “สวยกว่า – ตัวจัดรูปแบบโค้ด” จากรายการ หรืออีกทางหนึ่ง Prettier อาจปรากฏในรายการเป็น “esbenp.prettier-vscode”
  • ตรวจสอบให้แน่ใจว่าได้เลือกตัวเลือก “ตัวแก้ไข: รูปแบบในการบันทึก” หากไม่เป็นเช่นนั้น ให้สลับเครื่องหมายถูก
  • พิมพ์ “Prettier” ในแถบค้นหาการตั้งค่า
  • เลื่อนลงมาจนพบบรรทัด “สวยกว่า: ต้องมีการกำหนดค่า” ตรวจสอบให้แน่ใจว่าได้เลือกช่องทำเครื่องหมายแล้ว การตั้งค่านี้ป้องกันไม่ให้ Prettier จัดรูปแบบเอกสารโดยไม่มีไฟล์ปรับแต่ง สิ่งนี้มีประโยชน์เมื่อคุณดูโค้ดที่ดาวน์โหลดมาซึ่งอาจมีกฎการจัดรูปแบบของตัวเอง ซึ่งจะป้องกันไม่ให้คุณเขียนทับตัวเลือกการจัดรูปแบบโดยไม่ได้ตั้งใจ โปรดทราบว่าไฟล์ที่ไม่มีชื่อจะยังคงได้รับการจัดรูปแบบโดยอัตโนมัติแม้ว่าจะเลือกการตั้งค่านี้ไว้ก็ตาม
  • คุณสามารถแก้ไขการตั้งค่า Prettier เฉพาะได้ ขึ้นอยู่กับความชอบของคุณ เมื่อเสร็จแล้ว คุณสามารถออกจากเมนูนี้ได้
  • เนื่องจากคุณได้กำหนดค่า Prettier ให้จัดรูปแบบโดยอัตโนมัติเมื่อมีไฟล์ปรับแต่งเท่านั้น คุณต้องสร้างไฟล์สำหรับแต่ละโปรเจ็กต์ ทำได้โดยทำตามขั้นตอนเหล่านี้:

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

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

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

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

    เรื่องล่าสุด

    x