บทความ IT เจ๋งๆ
63 VSCode Keyboard Shortcuts ที่ Developer ควรเรียนรู้เอาไว้
24-ก.ย.-25
คัมภีร์เทพ IT
เชื่อว่า Developer หลายคนคงเคยใช้เมาส์คลิกไปมาใน VSCode เหมือนเล่น Minesweeper ซึ่งมันก็ทำงานได้ แต่ทุกครั้งที่เปลี่ยนไปใช้เมาส์ อาจทำให้จังหวะการทำงานสะดุด แต่ Shortcuts คือสิ่งที่ช่วยให้การเขียน Code ลื่นไหลขึ้น และวันนี้เรามาดู 63 VSCode Keyboard Shortcuts ที่ Developer ควรเรียนรู้เอาไว้
File & Editor Management:
1. Ctrl + P / Cmd + P → Quick Open
ลืม Explorer Panel ไปได้เลย คำสั่งนี้ก็เหมือนกับ Google Search สำหรับ Repo ของคุณ
2. Ctrl + Tab → Switch Between Files
มันก็เหมือนกับคำสั่ง Alt + Tab แต่นี่ใช้สำหรับ Code มันเป็นคำสั่งที่ขาดไม่ได้เลย
3. Ctrl + \ → Split Editor
การเปิด 2 ไฟล์ไว้ข้าง ๆ กัน น่าจะดีกว่าสลับไปมาจนทำให้มึน
4. Ctrl + 1/2/3 → Focus Specific Editor Group
โฟกัสที่หน้า Editor ที่ 1,2 หรือ 3 เพราะความแม่นยำสำคัญมาก
5. Ctrl + W → Close the Current File
อาจจะดูเป็นเรื่องพื้นฐาน แต่เชื่อว่าคุณจะได้ใช้งานมันบ่อยมาก
6. Ctrl + Shift + T → Reopen Closed Editor
หรืออีกนัยหนึ่งคือ “แก้ความ Fail ของตัวเอง”
7. Ctrl + K, W → Close All Files
มันเปรียบเหมือนนิวเคลียร์ ในเวลาที่มี Tab เพิ่มมากขึ้นเรื่อย ๆ
8. Ctrl + Shift + N → New Window
เปิดหน้าต่างโปรแกรมใหม่ เมื่อคุณต้องการเริ่มใหม่ทั้งหมด
9. Ctrl + K, O → Open Folder
เร็วกว่าการคลิกเมนูแบบยุค 90 เยอะ
Search & Navigation:
10. Ctrl + Shift + F → Search Across Project
มันใช้สำหรับค้นหาทั้ง Project ซึ่งเชื่อว่าคุณจะได้ใช้มันบ่อย ๆ
11. F12 → Go to Definition
เหมือนการวาร์ปไปหา Definition
12. Alt + F12 → Peek Definition
เปิด Definition แบบ Popup ซึ่งสะดวกมาก
13. Ctrl + Shift + O → Go to Symbol in File
ไม่ต้องเลื่อนหาให้ยุ่งยาก แค่กระโดดไปตรง Function ได้เลย
14. Ctrl + T → Go to Symbol Across Files
เปรียบเหมือนกับการมีสายตา X-Ray
15. Ctrl + G → Go to Line
มันมีประโยชน์อย่างมากถ้าคุณเจอ Bug ที่อยู่บรรทัดที่ 237
16. Ctrl + Shift + M → Problems Panel
หรืออีกชื่อหนึ่งก็คือ “ทำไม Code ไม่ Compile ซะที?”
17. F8 / Shift + F8 → Next/Previous Problem
เหมือนเป็นการเปิดโหมด Turbo ในการ Debug
18. Ctrl + B → Toggle Sidebar
คุณสามารถซ่อนมันไว้ เพื่อช่วยให้โฟกัสเวลาเขียน Code
Editing Like a Wizard:
19. Ctrl + D → Select Next Occurrence
จะเลือก คำ/ข้อความที่เหมือนกันตัวถัดไป ที่เจอในไฟล์ มันเป็นเหมือนเวทมนตร์ของการใช้หลาย Cursor พร้อม ๆ กัน
20. Ctrl + Shift + L → Select All Occurrences
จะเลือก คำ/ข้อความที่เหมือนกันทั้งหมดในไฟล์นั้น มีประโยชน์มากเมื่อต้องการแก้ไขหรือ Refactor ทั้งหมดในครั้งเดียว
21. Alt + Click → Add Cursor
แม้จะเป็นแบบ Manual แต่ก็ Work นะ
22. Ctrl + Alt + Down/Up → Add Cursors Vertically
Copy-Paste หลายบรรทัดพร้อมกัน
23. Ctrl + Shift + K → Delete Line
ไม่ต้อง Select ให้เสียเวลา
24. Ctrl + Enter → Insert Line Below
มันช่วยให้รักษาจังหวะการพิมพ์ได้ดี
25. Ctrl + Shift + Enter → Insert Line Above
ใช้เผื่อ Logic มันควรอยู่ข้างบน
26. Alt + Up/Down → Move Line
Refactor Code ได้ง่ายเหมือนต่อ Lego
27. Shift + Alt + Down/Up → Copy Line Up/Down
Clone Code ได้ทันที
28. Ctrl + / → Toggle Comment
เพราะบางที “ความเงียบคือสิ่งมีค่า”
29. Shift + Alt + A → Block Comment
มันมีประโยชน์มากเวลาที่ต้อง Debug
30. Ctrl + Shift + \ → Jump to Matching Bracket
มันช่วยให้คุณปนระหยัดเวลาชีวิตจากปัญหาเกี่ยวกับ regex
31. Ctrl + ] / [ → Indent/Outdent Line
มันช่วยจัด Code ให้ดูเรียบร้อย
32. Ctrl + Space → Trigger IntelliSense
มันเหมือนใช้สูตรโกงช่วยจำ
Code Navigation & Refactoring:
33. F2 → Rename Symbol
มันเปรียบเหมือน MVP ของการ Refactor
34. Ctrl + . → Quick Fix
มันเปรียบเหมือนปุ่มเวทมนตร์แก้ปัญหาเส้นหยัก ๆ ใน Code ได้แบบด่วน ๆ
35. Shift + F12 → Find References
อยากรู้ว่า Code นี้ถูกใช้ที่ไหน กดเลย
36. Ctrl + Shift + \ → Jump Between Brackets
มันเป็นตัวช่วยเวลาที่เจอ Code ซ้อน ๆ กัน (ที่ทำให้หลายคนสับสน)
37. Ctrl + K, Ctrl + X → Trim Trailing Whitespace
มันคือความพึงพอใจของคนที่ย้ำคิดย้ำทำ
Integrated Terminal:
38. Ctrl + ` → Toggle Terminal
เข้าถึง Console แบบไม่ต้องง้อเมาส์
39. Ctrl + Shift + 5 → Split Terminal
เพราะ Terminal เดียวไม่เคยพอ
40. Ctrl + C / Ctrl + V in Terminal
มันทำงานได้ตามที่ควรจะเป็น
41. Ctrl + Up/Down → Scroll Terminal Output
เหมาะอย่างยิ่งสำหรับการเช็ก Logs
Debugging Without Tears:
42. F5 → Start/Continue Debugging
เริ่มหรือทำการ Debug ต่อไป
43. Shift + F5 → Stop Debugging
หยุดการ Debug (เหมือนปิดโปรแกรมที่ Run อยู่)
44. F9 → Toggle Breakpoint
วาง/ลบ Breakpoint (จุดหยุด Code เพื่อเช็กค่า)
45. F10 → Step Over
Run ทีละบรรทัด แต่ไม่เข้าไปใน Function ย่อย
46. F11 → Step Into
Run ทีละบรรทัด และ “กระโดดเข้าไป” ดู Code ใน Function
47. Shift + F11 → Step Out
ออกจาก Function แล้วย้อนกลับมาที่ Code ที่เรียกใช้งาน Function (Caller)
Git Integration:
48. Ctrl + Shift + G → Source Control View
เปิดแท็บ Source Control ของ VSCode เพื่อดูการเปลี่ยนแปลงไฟล์
49. Ctrl + Enter in SCM input → Commit
แค่กดคีย์ ไม่ต้องคลิกหลายขั้นตอน
50. Ctrl + Shift + 7 → Toggle Inline Blame (with GitLens)
เหมาะอย่างมาก เมื่ออยากรู้ว่า Bug มาจาก Commit ไหน หรือใครเป็นคนแก้ไขล่าสุด
51. Alt + D → Compare with Previous Commit (with GitLens)
ใช้ตรวจสอบว่ามีการเปลี่ยนแปลงอะไรไปบ้าง เช่น เพิ่ม/ลบ Code ที่บรรทัดไหน เป็นต้น
Window & Interface Zen:
52. Ctrl + Shift + E → Explorer View
เมื่อคุณต้องการเปิดไฟล์จากโครงสร้าง Project กด Shortcut นี้แทนการใช้เมาส์
53. Ctrl + Shift + D → Debug View
มันเป็นศูนย์รวมทุกอย่างที่เกี่ยวกับการ Debug
54. Ctrl + Shift + X → Extensions View
คุณสามารถใช้ค้นหา ติดตั้ง จัดการ หรือปิดการใช้งาน Extensions ได้จากที่นี่
55. Ctrl + Shift + U → Output Panel
ใช้เปิด Output Panel ที่แสดง Log จาก VSCode เองหรือจาก Extensions
56. Ctrl + Shift + Y → Debug Console
มันคล้ายกับ Console ใน Browser Dev Tools แต่ฝังอยู่ใน VSCode
57. Ctrl + K, Z → Zen Mode
ปิดทุกอย่าง เพื่อโฟกัสไปที่ Code
58. Ctrl + = / - → Zoom In/Out
มันจะช่วยถนอมสายตาของคุณ
59. Ctrl + Shift + P / Cmd + Shift + P → Command Palette
ใช้เปิด Command Palette ซึ่งเป็นเหมือน ศูนย์รวมทุกคำสั่งของ VSCode
Miscellaneous but Vital:
60. Ctrl + Shift + S → Save As
ใช้ได้เหมือน Save As ใน MS Word/Excel เลย
61. Ctrl + Shift + V → Open Markdown Preview
ใช้เปิดหน้าต่าง Markdown Preview ภายใน VSCode เหมาะกับคนที่เขียน README.md หรือเขียน Blogs ด้วย Markdown ซึ่งจะเห็นผลลัพธ์การ Render ทันทีแบบ Live Preview
62. Ctrl + K V → Side-by-side Markdown Preview
ใช้เปิด Markdown Preview แบบแยกหน้าต่างข้าง ๆ Source Code
63. Ctrl + Shift + C → Open External Terminal
ใช้เปิด Terminal ภายนอก (เช่น Command Prompt, PowerShell หรือ iTerm บน Mac) เมื่อต้องการความสามารถพิเศษที่ Terminal ใน VSCode ไม่รองรับ เช่น Script ที่ต้อง Run บน Shell หรือการจัดการระบบ
สรุป
และนี่ก็เป็น 63 VSCode Keyboard Shortcuts ที่ Developer ควรเรียนรู้เอาไว้ เพราะ VSCode เป็นเครื่องมือที่ทรงพลัง แต่ความเร็วและประสิทธิภาพขึ้นอยู่กับวิธีที่คุณใช้มัน และ Shortcuts คืออาวุธลับที่ช่วยให้คุณเขียน Code ได้เร็วขึ้น ลดความผิดพลาด และดูเป็นมือโปรในสายตาเพื่อนร่วมทีม การใช้ Shortcuts เป็นนิสัยเล็ก ๆ น้อย ๆ แต่ผลลัพธ์นั้นมีผลต่อ Productivity
ที่มา: https://blog.stackademic.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด