บทความ IT เจ๋งๆ

VS Code เป็นหนึ่งในเครื่องมือยอดนิยมของ Developers เป็นจำนวนมาก นอกจากการมีเครื่องมือที่ดีแล้ว การรู้จักเคล็ดลับการใช้งานกลับมีความสำคัญยิ่งกว่า ดังนั้นบทความนี้จะมาแนะนำ 10 เคล็ดลับ VS Code ที่จะช่วยยกระดับการเขียน Code ของคุณ รวมทั้งช่วยให้คุณบรรลุเป้าหมายการเขียน Code ได้เร็วกว่าที่เคยด้วยประสบการณ์การ Develop ในระดับสูงสุด

1. Publish Repo ไปยัง GitHub ได้ในไม่กี่วินาที

คุณยังจำสิ่งนี้ได้ไหม

มันเป็นวิธีแบบเก่าในการ Publish Code ของคุณไปยัง GitHub คือ สร้าง Repo, ตั้งชื่อและใส่รายละเอียด, สร้าง Remote...

แต่ด้วย VS Code ทำให้ตอนนี้คุณไม่จำเป็นต้องทำสิ่งนั้นอีกต่อไป จาก Source Control Panel คุณสามารถ Publish Repo ในเครื่องไปยัง GitHub ได้อย่างรวดเร็ว ด้วยการคลิกเพียง 2 ครั้ง

และลืม git init ไปได้เลย: สามารถสร้าง Repo ได้ง่ายยิ่งขึ้น ด้วยการคลิกเพียงครั้งเดียว:

จากนั้นทำการ Commit อย่างรวดเร็วด้วย Ctrl + Enter:

ตอนนี้ คุณสามารถ Publish Repo ของคุณได้อย่างง่ายดายในเวลาเพียงไม่กี่วินาที:

แน่นอนว่า มันอาจมากกว่า "วินาที" แต่มันเป็นปัญหาจาก Internet ซึ่งอันที่จริง มันควรจะเป็นแบบนี้:

ตอนนี้ เราก็ได้เห็นสิ่งนั้นบน GitHub แล้ว:

2. ใช้ Workspaces สำหรับการทำงานในหลาย ๆ Codebase

กรณีที่ Project ของคุณมีขนาดใหญ่ มีการเชื่อมโยง Codebase กันมากมายซึ่งจัดเก็บอยู่ใน Folders ต่าง ๆ ซึ่งทั้งหมดเป็นส่วนที่สำคัญของ System เช่น

• Folder สำหรับสิ่งต่าง ๆ ที่เกี่ยวกับ Firebase: Functions, DB Security Rules และอื่น ๆ
• Folder สำหรับ Next.js Website/App
• Folder สำหรับ Cross-Platform App Codebase

ลองนึกภาพถึงความยุ่งยากในการต้องสลับไปมาระหว่างสิ่งเหล่านี้ใน 3 VS Code Windows ที่เปิดอยู่, เปิด Terminals ที่นี่และที่นั่น, ค้นหา File ที่ไม่ได้อยู่ใน Codebase ที่กำลังดูอยู่, งงกับลำดับ Alt + Tab กับ Apps อื่น ๆ ที่เปิดอยู่, พร้อมกับความสับสนในใจและความล่าช้าที่เกิดขึ้นทุกครั้งที่คุณสลับ Apps

แถมยังมีสิ่งนี้อีก ซึ่งเป็นเรื่องที่น่าปวดหัว

นี่คือเหตุผลที่เราต้องการ Workspaces — Window ที่มี Files และ Subfolders ทั้งหมดที่คุณต้องการ

หมายเหตุ: : และหากคุณเป็นผู้ใช้งาน Windows ที่มีปัญหาในการจัดการ File Explorer คุณอาจต้องการลองใช้ Utility ขนาดเล็กตัวนี้ (WinENFET)

Folder แต่ละอันคือ Workspace สำหรับ VS Code ดังนั้น คุณจึงสามารถเพิ่ม Folders ได้อย่างง่ายดายด้วย File > Add Folder to Workspace…

เมื่อทุกอย่างเสร็จสิ้น คุณจะมี Folders ทั้งหมดที่คุณต้องการและ Files ใน Folders เหล่านั้นก็เข้าถึงได้ง่ายบนหน้าต่าง File Explorer

และเมื่อคุณค้นหา Files ด้วย Ctrl + P หรือ Ctrl + Shift + F คำสั่งนี้จะนำไปใช้กับ Files ทุก Files ใน Folders ทั้งหมด:

คุณยังสามารถสร้าง Terminals ใหม่ได้อย่างรวดเร็วโดยใช้ Folders ใดก็ได้เป็น Working Directory

ด้วยสิ่งนี้และ Tab ของ Win 11 เวอร์ชัน 22H2 เราสามารถตัด Windows ที่เปิดอยู่ครึ่งหนึ่ง ได้อย่างง่ายดาย

3. แก้ไข Code ขั้นสูงด้วย Split View

และเมื่อคุณต้องทำงานกับหลาย Files พร้อม ๆ กัน ในกรณีนี้ Split Mode สามารถช่วยคุณได้

คุณยังสามารถทำสิ่งนี้ได้ด้วยคำสั่ง View: Split Editor...

แบ่งหน้าจอในแนวตั้ง หรือแนวนอนได้:

VS Code ยังใช้ Split View นี้ เพื่อแสดงการเปลี่ยนแปลงระหว่าง File Versions ต่าง ๆ ที่บันทึกไว้ใน Timeline View หรือ Source Control

4. Copy Code ได้รวดเร็ว

การคัดลอกบรรทัดของ Code ใน VS Code นั้นทำได้ง่ายมาก

เพียงแค่วาง Cursor บนบรรทัดของ Code (ที่ไหนก็ได้) แล้วกด Ctrl + C:

เมื่อใดก็ตามที่คุณต้องการเลือกทั้งบรรทัด คุณสามารถใช้ Ctrl + L:

หากคุณต้องการเลือกแค่บางส่วนของบรรทัด คุณสามารถใช้ Shift + Left/Right เพื่อเลือกไปทางใดทางหนึ่ง

นอกจากนี้ คุณยังสามารถใช้ Ctrl + X เพื่อ Cut บรรทัดที่ Cursor อยู่โดยไม่ต้องเลือก Code ทั้งบรรทัด ได้อีกด้วย

5. การย้ายบรรทัดของ Code ขึ้น-ลง

แต่ถ้าคุณ Cut เพื่อ Paste ไปที่อื่นภายใน File เดียวกัน คุณไม่จำเป็นต้องทำให้ Clipboard รก

เพียงแค่ใช้ Alt + Up/Down เพื่อย้ายบรรทัดของ Code ไปยังตำแหน่งที่คุณต้องการ:

คุณยังสามารถย้ายการเลือกบรรทัดหลาย ๆ บรรทัด ขึ้นและลงได้

รวมถึงการซ่อน Code (Code Folding):

6. ซ่อน Code (Code Folding) สำหรับ File ขนาดใหญ่

สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับ File ขนาดใหญ่ที่มี Functions และ Methods เป็นจำนวนมาก หรือ Flutter / JSX Component ขนาดใหญ่ ที่อยู่ซ้อน ๆ กันหลายระดับ

คุณสามารถซ่อนส่วนต่าง ๆ ของ Code ที่คุณยังไม่ได้ใช้งานได้อย่างง่ายดาย ด้วยการคลิกที่ลูกศรชี้ลง ดังตัวอย่างด้านล่างนี้

คุณยังสามารถใช้ Shortcut นี้ได้: Ctrl + Shift + [

7. แสดงมุมมองแบบภาพรวมด้วย Outline View

Outline View ก็เป็นวิธีที่ใช้ในการจัดการกับ Code Files ที่มีขนาดใหญ่ได้อย่างดีเยี่ยม

Feature นี้จะแสดงภาพรวมของ Symbols ต่าง ๆ ใน File ไม่ว่าจะเป็น Variables, Classes, Functions หรืออื่น ๆ ที่จัดเรียงกันในโครงสร้างแบบลำดับชั้น

คุณสามารถเรียงลำดับ Symbols ตาม Position, Name หรือ Type ได้

เมื่อคุณทำงานใน File ที่มี Code ยาวและซับซ้อน การเปิดใช้งานตัวเลือก Follow Cursor จะช่วยให้ Symbols ที่เลือกใน Outline View ตรงกับ Symbols ที่คุณกำลังดูใน File โดยอัตโนมัติ:

ปกติคุณจะเจอ Outline View ในแถบ File Explorer พร้อมกับ Open Editors และ Timeline แต่ถ้าคุณใช้งาน Feature นี้บ่อย ๆ คุณสามารถย้ายมันออกมาแสดงในแถบแยกต่างหากได้:

8. ไปที่ Symbol ได้อย่างรวดเร็ว

หากคุณใช้งานบน File ที่มีขนาดใหญ่มาก ๆ อยู่ จนแม้แต่การใช้ Outline View ก็ยังทำให้การ Navigate เป็นเรื่องยุ่งยาก ก็น่าจะถึงเวลาแล้วที่จะใช้งาน Go To Symbol Feature

กด Ctrl + P ตามด้วย @ เพื่อเปิดรายการ Symbols ใน File

เมื่อคุณตัดสินใจแยก File ออกเป็นส่วนย่อย ๆ เพื่อให้ง่ายต่อการจัดการ คุณยังสามารถค้นหา Symbols ใน Files ทั้งหมดได้ด้วยการกด Ctrl + T:

9. ไปที่ Definition ได้ในคลิกเดียว

เมื่อคุณไปถึง Symbol แล้ว คุณสามารถดู Definition ได้อย่างง่ายดายด้วยการกด Alt + Click หรือ F12:

ถ้าต้องการเปิด Definition File แบบเต็ม ๆ ให้ Double-click ที่ Popup:

10. ย้อนกลับไปยังตำแหน่งเดิมได้ทันที

หลังจากไปที่ Symbol หรือดูที่ Definition ของ Symbol แล้ว เราคงอยากกลับไปยังตำแหน่งที่เราอยู่ใน File เมื่อไม่กี่นาทีก่อนหน้านี้ ในกรณีนี้ คุณสามารถกด Ctrl + U เพื่อนำคุณกลับไปยังตำแหน่งที่คุณอยู่ก่อนหน้านี้ได้

Feature นี้ยังมีประโยชน์อย่างมากเมื่อคุณกระโดดไปยังบรรทัดของ Code ด้วยการกด Ctrl + G

สรุป

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

ที่มา: https://medium.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

 

บทความล่าสุด

• 30 Tools ช่วยทำงานที่ Developer ควรรู้จักไว้
• 7 Open-Source Communities ที่คุณสามารถเข้าร่วมเพื่อเรียนรู้ ในปี 2025
• 13 Python Scripts ที่คุณสามารถใช้ เพื่อชีวิตที่ง่ายขึ้น