คัมภีร์เทพ IT 21 VS Code Shortcuts ที่จะช่วยให้คุณ Coding ได้เร็วขึ้น

21 VS Code Shortcuts ที่จะช่วยให้คุณ Coding ได้เร็วขึ้น

02-ต.ค.-19

คัมภีร์เทพ IT

21 VS Code Shortcuts ที่จะช่วยให้คุณ Coding ได้เร็วขึ้น

เชื่อว่ามี Developer หลายคนที่ใช้งาน VS Code แต่หากคุณรู้จักและสามารถใช้งาน Shortcuts พื้นฐานบางอย่างได้ดี จะช่วยลดเวลาทำงานของคุณได้มากขึ้น วันนี้ทีมงานมีบทความของคุณ jsmanifest ที่จะบอกถึง 21 VSCode Shortcuts ที่ช่วยให้คุณทำงานรวดเร็วและสนุกขึ้น

1. ค้นหาข้อความผ่าน File ทั้งหมดในครั้งเดียว

Windows: Ctrl + Shift + F

Mac: Control + Shift + F

Feature นี้จะช่วยให้คุณสามารถค้นหาข้อความจาก File ทั้งหมดของคุณใน Project Directory คุณสามารถใช้ Feature นี้ โดยเปิด View ด้วยการกด Ctrl + Shift + F มันจะแสดง Sidebar อยู่ทางด้านซ้ายของ Editor:

เมื่อคุณพิมพ์ข้อความที่ต้องการ แล้วกด Enter, VS Code จะแสดง List ของผลลัพธ์ที่ตรงกับข้อความที่คุณต้องการต้นหา:

นอกจากนี้คุณยังสามารถใช้ Replace All (แทนที่ทั้งหมด) ข้อความทั้งหมดในผลลัพธ์ได้อย่างรวดเร็ว จากรูปด้านล่าง หากคุณคลิกที่ลูกศรเล็ก ๆ ทางด้านซ้าย มันจะแสดง Input Box อีกอันตรงด้านล่าง ซึ่งคุณสามารถป้อนข้อความที่ต้องการจะ Replace All พร้อมกับการคลิกที่ Box เล็ก ๆ ที่ปรากฏขึ้นทางด้านขวา:

2. ตั้งค่าสีของ Tab ให้โดดเด่นขึ้น

คุณรู้สึกเบื่อที่จะเห็นสีเดิม ๆ ใน Tab ที่ใช้งานอยู่ไหม? หากคุณใช้ Material Theme Extension ของ VS Code อยู่ คุณสามารถเปลี่ยนสีของ Tab ตามที่คุณต้องการได้ ซึ่งมี 16 สีให้คุณเลือก ดังตัวอย่างด้านล่างนี้

สีแดง:

สีม่วง:

สีเหลือง:

หากคุณมี Extension นี้ ให้เปิด Command Palette ของคุณ (หรือกด Ctrl + Shift + P) เลือก Material Theme: Set accent color แล้วเลือกสีจาก List จากนั้นสีข้างใต้ของ Tab จะเปลี่ยนตามสีที่เราเลือก ดังตัวอย่างด้านล่าง:

แต่จากตัวอย่างด้าน ยังไม่ได้ใช้ Material Theme นั่นเป็นเพราะเมื่อติดตั้ง Material Theme Extension แล้ว Feature นี้จะมีอยู่ใน Theme ของคุณอยู่แล้ว คุณไม่จำเป็นต้องใช้ Material Theme เพื่อใช้ Feature นี้

3. Process Explorer

VS Code Editor ของคุณทำงานช้าหรือไม่? มีอะไรที่ทำให้เปลือง Memory ของคุณอยู่บ้าง?

หากคุณยังไม่ทราบ, VS Code มี Feature หนึ่งคือ Process Explorer ซึ่งมันจะแสดง Window ดังที่แสดงด้านล่าง:

คุณรู้สึกคุ้น ๆ กับมันไหม? มันก็คล้าย ๆ กับ Task Manager ของ Windows นั่นเอง

4. Expand Bracket Selection

เปิด Keyboard Shortcuts และค้นหา Expand Bracket Selection

Feature นี้จะช่วยให้คุณสามารถเลือกทั้ง Block ได้โดยอัตโนมัติ ตั้งแต่เครื่องหมายปีกกาเปิดจนถึงปีกกาปิด:

สิ่งนี้จะมีประโยชน์อย่างมากในกรณีที่คุณต้องการที่จะย้าย If/Else Block ไปยังส่วนอื่น

5. Re-open Editor ที่ถูกปิดไปแล้ว

Windows: Ctrl + Shift + T

Mac: Control + Shift + T

เมื่อคุณทำงานกับ Project ขนาดใหญ่ที่เกี่ยวข้องกับ File จำนวนมาก มันอาจเป็นเรื่องน่าผิดหวังเล็กน้อยเมื่อคุณดันปิด Tab โดยไม่ได้ตั้งใจ และคุณต้องค้นหามันใหม่อีกครั้งใน Side Menu เนื่องจาก VS Code สามารถ Expand Directory ได้โดยอัตโนมัติ ซึ่งคุณสามารถ Re-open Editor ที่ถูกปิดไปแล้วด้วยการกด Ctrl + Shift + T

6. เปิด File โดยการค้นหาด้วยข้อความ

Windows: Ctrl + T

Mac: Control + T

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

หากคุณต้องการผูกสิ่งนี้กับ Hotkeys ให้เปิด Keyboard Shortcuts (File > Preferences > Keyboard Shortcuts) และให้ค้นหา workbence.action.quickOpen จากนั้นก็ Double Click แล้วกำหนด Ctrl + T ให้กับมัน

7. Integrated Terminal

คุณสามารถเปิด Integrated Terminal ของ VS Code และใช้งานได้ทันทีเหมือนอย่าง CLI ทั่วไป โดยกด Ctrl + `(Backtick)

8. Running Extensions

คุณสามารถดู List ของ Extensions ที่กำลัง Run อยู่ทั้งหมด โดยการเปิด Command Palette แล้วพิมพ์ “Show Running Extensions”

นอกจากนี้ คุณจะได้เห็นข้อมูลอื่น ๆ เพื่อดูว่ามี Extensions ใดที่ใช้เวลานานกว่าตัวอื่น ๆ ในช่วงที่เปิดใช้งาน หากคุณเคยสงสัยว่าทำไม Editor ของคุณถึง Load ช้ากว่าปกติ คำตอบของคุณอาจอยู่ใน Window นี้:

9. Reload

Windows: Ctrl + Alt + R

Mac: Control + Option + R

คุณสามารถใช้วิธีการ Reload Editor ได้โดยไม่ต้องปิด Window ของคุณ ซึ่งมันให้ผลเช่นเดียวกับการที่คุณปิดแล้ว Re-open มันขึ้นมาใหม่

10. ย้าย Tabs ไปยัง Groups อื่น ๆ

ขณะที่กำลัง Develop แล้วพบว่ามี Tab ที่อยู่ผิด Group อีกทั้งคุณเองก็อยากที่จะใช้ Keyboard เพียงอย่างเดียว ไม่ต้องเปลี่ยนไป Click ที่ Mouse โชคดีที่ VS Code สามารถอำนวยความสะดวกให้คุณสามารถย้าย Tab ที่ต้องการไปยังอีก Tab Group ได้

หากต้องการย้าย Tab นั้นไปยัง Tab Group ที่อยู่ด้านขวา ให้กด:

Windows: Ctrl + Alt + Right Arrow

Mac: Control + Option + Right Arrow

หากต้องการย้าย Tab นั้นไปยัง Tab Group ที่อยู่ด้านซ้าย ให้กด:

Windows: Ctrl + Alt + Left Arrow

Mac: Control + Option + Left Arrow

11. Select ข้อความทั้งหมดไปทางด้านซ้าย/ขวา

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

กรณีต้องการ เลือกข้อความทั้งหมดที่อยู่ด้านซ้ายของ Cursor :

Windows: Ctrl + Shift + Home

Mac: Control + Shift + Home

กรณีต้องการ เลือกข้อความทั้งหมดที่อยู่ด้านขวาของ Cursor :

Windows: Ctrl + Shift + End

Mac: Control + Shift + End

แต่หากคุณเลือกข้อความแค่บางส่วนไปทางด้านซ้ายหรือขวาก็สามารถทำได้เช่นกัน

12. ลบคำที่อยู่ก่อนหน้า

หากต้องการ ลบคำก่อนหน้า สามารถทำได้โดยกด

Windows: Ctrl + Backspace

Mac: Control + Delete

ซึ่งสิ่งนี้มีประโยชน์มาก ในกรณีที่คุณเกิดพิมพ์ผิดขึ้นมา แต่ไม่ต้องการกด Backspace ค้างไว้เพื่อไล่ลบคำไปเรื่อย ๆ :

อันที่จริง คุณสามารถใช้ Shortcut นี้ นอกเหนือจากใน VS Code ได้แทบจะทุกที่เช่นกัน

13. Startup Performance

บางครั้งมันก็เป็นเรื่องที่น่าเสียดายหากคุณพลาดรายละเอียดเกี่ยวกับปัญหาด้าน Performance ในขณะที่คุณพยายามค้นหาสาเหตุของมันอยู่

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

คุณสามารถทำได้โดยไปที่ Command Palette ของคุณ แล้วค้นหา Startup Performance

14. Select ข้อความแบบทีละคำ

คุณสามารถเลือกข้อความแบบทีละคำได้

หากต้องการเลือกคำไปทางด้านขวา ให้กด:

Windows: Ctrl + Shift + Right Arrow

Mac: Control + Shift + Right Arrow

หากต้องการเลือกคำไปทางด้านซ้าย ให้กด:

Windows: Ctrl + Shift + Left Arrow

Mac: Control + Shift + Left Arrow

สิ่งนี้จะช่วยให้คุณสามารถเลือกคำได้เร็วยิ่งขึ้น

15. Duplicate ข้อความทั้งบรรทัด

นี่คือ Feature ที่มีประโยชน์มากอีก Feature หนึ่ง ที่จะช่วยให้คุณทำการ Duplicate ข้อความทั้งบรรทัดได้อย่างรวดเร็ว เพียงแค่คุณกด:

Windows: Ctrl + Shift + D

Mac: Control + Shift + D

16. เลื่อน Cursor ไปยังจุดเริ่มต้น/จุดสิ้นสุดของ File

วิธีที่เร็วที่สุดในการเลื่อน Cursor ไปยังบรรทัดแรกหรือบรรทัดสุดท้ายของ File

หากคุณต้องการเลื่อนไปยังจุดเริ่มต้น ก็เพียงกด:

Windows: Ctrl + Home

Mac: Control + Home

หรือหากต้องการเลื่อนไปยังจุดสิ้นสุด ก็เพียงกด:

Windows: Ctrl + End

Mac: Control + End

17. Replace All ข้อความทั้งหมดใน File

หากคุณยังจำข้อแรกเกี่ยวกับการ Replace ข้อความแบบ Manual ได้ เชื่อว่าคุณคงจะปลื้มกับ Feature ที่ชื่อ Change All Occurrences เพราะคุณสามารถ Select กลุ่มของข้อความ แล้วทำการ Replace พวกมันทั้งหมดได้ในคราวเดียว เพียงแค่กด:

Windows: Ctrl + F2

Mac: Control + F2

18. เลื่อนบรรทัดขึ้น/ลง

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

หากคุณต้องการให้บรรทัดนั้น เลื่อนขึ้นด้านบน สามารถกด:

Windows: Alt + Up Arrow

Mac: Option + Up Arrow

แต่หากคุณต้องการให้ เลื่อนลงด้านล่าง สามารถกด:

Windows: Alt + Down Arrow

Mac: Option + Down Arrow

19. ลบทั้งบรรทัด

คุณสามารถลบทั้งบรรทัดได้ทันทีด้วย 2 วิธี คือ

คุณสามารถ Cut ข้อมูลทั้งบรรทัด (ข้อความที่ Cut จะอยู่ใน Clipboard) โดยไม่ต้องทำการ Select ข้อความ สามารถทำได้ด้วยการกด

Windows: Ctrl + X

Mac: Control + X

หรือสามารถลบทั้งบรรทัดได้ทันที ด้วยการกด

Windows: Ctrl + Shift + K

Mac: Control + Shift + K

20. ย้าย Editor ไปด้านซ้ายหรือขวา

บางครั้งคุณอาจจะต้องการ Re-order Tab ใน Group ซึ่ง Tab อาจสัมพันธ์กับ Tabs อื่น ๆ และ Tab ที่อยู่ด้านซ้าย เป็น High Level Files ในขณะที่ Files ที่อยู่ด้านขวาอยู่ใน Level ที่ต่ำกว่า

คุณสามารถทำสิ่งนี้ได้ง่ายขึ้นโดยใช้คำสั่ง Move Editor Left และ Move Editor Right หรือคุณอาจกำหนด Shortcuts ด้วยตนเองก็ได้ อย่าง jsmanifest เองก็กำหนด Shortcuts โดย

กรณี ต้องการให้ Editor ย้ายไปด้านซ้าย:

Windows: Ctrl + Num Pad 4

Mac: Control + Num Pad 4

กรณี ต้องการให้ Editor ย้ายไปด้านขวา:

Windows: Ctrl + Num Pad 6

Mac: Control + Num Pad 6