20 VS Code Shortcuts for Faster Coding

22-Jan-20

คัมภีร์เทพ IT

See the original english version Click here!

 

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

1. Join Line

• สำหรับ Mac: Ctrl + J

• สำหรับ Ubuntu, Windows: เปิด Keyboard Shortcuts จาก File > Preferences > Keyboard Shortcuts และทำการผูกกับ  editor.action.joinLines กับ Shortcut ที่คุณเลือก

2. Code Formatting

Shortcut นี้จะช่วยในเรื่องจัด การเยื้อง/การย่อหน้า Code ตามที่ตั้งค่าไว้แล้วใน Editor Settings.

เคล็ดลับ: แนะนำให้ใช้สิ่งนี้หลังจาก Coding เสร็จหรือตั้งแต่ตอนเริ่มต้น Coding 

• สำหรับ Windows: Shift + Alt + F

• สำหรับ Mac: Shift + Option + F

• สำหรับ Ubuntu: Ctrl + Shift + I

3. Trim Trailing White Space

คำสั่งนี้จะช่วยกำจัด White Space ที่จุดเริ่มต้นและจุดสิ้นสุด รวมทั้งจะช่วยให้คุณไม่มีปัญหากับประเภทต่าง ๆ ของ Lints

เคล็ดลับ: แนะนำให้ใช้สิ่งนี้ในตอนท้ายสุด หลังจากที่คุณเขียน Code ใน File เสร็จแล้ว

หรือคุณสามารถเปิดใช้งาน White Space Trimming ได้จากการตั้งค่าเอง:

• เปิด VS User Settings (Preferences > Settings > User Settings tab)

• คลิกที่เครื่องหมาย {} ที่ส่วนบนด้านขวาของ Window นี่จะเป็นการเปิด Document

• เพิ่มการตั้งค่า "files.trimTrailingWhitespace": true เข้าไปยัง User Settings documents กรณีที่ยังไม่มี สิ่งที่คุณทำก็เพื่อที่คุณจะไม่ไป Edit ตัว Default Setting โดยตรง แต่เป็นการเพิ่มเข้าไป

• ทำการ “Save” User Settings File 

นอกจากนี้ เรายังเพิ่มคำสั่งใหม่เพื่อที่จะสามารถทำสิ่งนี้ได้ด้วยตนเอง (Trim Trailing Whitespace จากชุดคำสั่ง)

หรือถ้าคุณใช้ Version ใหม่ ก็ให้ทำตามการตั้งค่าในข้อที่  1 จากนั้นให้ดูตามภาพด้านล่าง

4.Code Folding

บางครั้งหาก File มีขนาดใหญ่ และคุณต้องการที่จะเข้าใจ Code โดยรวมทั้งหมด คุณอาจจำเป็นต้องมีการซ่อน/แสดง Code 

กรณีที่ต้องการยุบ/ซ่อน ส่วนของ Code:

• สำหรับ Windows / Ubuntu: Ctrl + Shift + [

• สำหรับ Mac: Command + Option + [

กรณีที่ต้องการแสดง/เปิด Code ส่วนที่ถูกซ่อนอยู่:

• สำหรับ Windows / Ubuntu: Ctrl + Shift + ]

• สำหรับ Mac: Command + Option + ]

5. Copy Line Up/Down

• สำหรับ Windows: Shift + Alt + Up/Down

• สำหรับ Mac: Shift + ตัวเลือก + Up/Down

• สำหรับ Ubuntu: Ctrl + Shift + Alt + Up/Down

นอกจากนี้คุณสามารถดู Keybindings ที่เกี่ยวข้องโดยเลือก: File > Preferences > Keyboard Shortcuts แล้วทำการแก้ไขการผูก Key ตามที่คุณได้เลือกไว้

6. Split Editor

• สำหรับ Windows: Shift + Alt + \ หรือ 2,3,4

 • สำหรับ Mac: Command + \ หรือ 2,3,4

• สำหรับ Ubuntu: Shift + Alt + \ หรือ 2,3,4

ในการแบ่ง Editor นั้น คุณสามารถใช้ Split Editor Command ได้ Keyboard Shortcut ที่เป็นต้นฉบับสำหรับแบ่ง Editor ก็คือ 123 ซึ่งมันมีประโยชน์ ในกรณีของการแก้ไขที่อยู่ติด ๆ กัน

นอกจากนี้คุณสามารถดู Keybindings ที่เกี่ยวข้องโดยเลือก: File > Preferences > Keyboard Shortcuts แล้วทำการแก้ไขการผูก Key ตามที่คุณได้เลือกไว้

7. Grid Editor Layout

โดยค่า Default แล้ว Editor Groups จะถูกจัดวางใน Column แนวตั้ง (ตัวอย่างเช่น เมื่อคุณแบ่ง Editor แล้วให้เปิดถัดไปด้านข้าง) คุณจะสามารถจัดเรียง Editor Groups ใน Layout ที่คุณต้องการได้ทั้งแนวตั้งและแนวนอน

เพื่อรองรับ Layout ที่ยืดหยุ่น คุณสามารถสร้าง Editor Groups ที่ว่างเปล่าได้ โดย Default แล้ว การปิด Editor ตัวล่าสุดของ Editor Groups จะเป็นการปิด Group ของมันเองด้วยเช่นกัน แต่คุณสามารถเปลี่ยนพฤติกรรมนี้ได้

ด้วยการตั้งค่าใหม่ คือ workbench.editor.closeEmptyGroups: false

มี Predefined Set ของ Editor Layouts ในเมนู View > Editor Layout:

8. Select Word

• สำหรับ Windows: Ctrl + d

• สำหรับ Mac: Command + d

• สำหรับ Ubuntu: Ctrl + d

หากคุณกดคำสั่ง + d มากกว่าหนึ่งครั้ง คุณจะต้องเพิ่ม Keyword เดียวกันให้กับการเลือกของคุณเข้าไปอีก

9. Opening and Closing the Sidebar

• สำหรับ Windows: Ctrl + b

• สำหรับ Mac: Command + b

• สำหรับ Ubuntu: Ctrl + b

บางครั้งเมื่อ File มี Code ในแนวกว้างมาก ๆ หรือในกรณีที่มีการปิด Split Editor, Sidebar จะช่วยคุณได้มาก 

10. Navigate to a Specific Line

หมายเหตุ: ในการไปที่บรรทัดต่าง ๆ ใน File คุณสามารถใช้ ctrl + g จากนั้นให้พิมพ์หมายเลขบรรทัด หรือคุณสามารถเปิดเมนู go-to file ด้วยคำสั่ง + p ก่อน จากนั้นให้พิมพ์ :. แล้วพิมพ์หมายเลขบรรทัดที่คุณต้องการ

• สำหรับ Windows: Ctrl + g

• สำหรับ Mac: Ctrl + g หรือ Ctrl + p

• สำหรับ Ubuntu: Ctrl + g

11. Go to Symbol in File

• สำหรับ Windows: Ctrl + Shift + o 

• สำหรับ Mac: Command + Shift + o

• สำหรับ Ubuntu: Ctrl + Shift + o

คุณสามารถจัดกลุ่มของสัญลักษณ์ตามประเภทได้โดยเพิ่มเครื่องหมาย : (Colon) เข้าไป ซึ่งจะมีลักษณะดังนี้ @:

12. Go to Symbol in Workspace

• สำหรับ Windows: Ctrl + t

• สำหรับ Mac: Command + t

• สำหรับ Ubuntu: Ctrl + t

13. Delete Previous Word

• สำหรับ Windows: Ctrl + backspace

• สำหรับ Mac: Command + delete

• สำหรับ Ubuntu: Ctrl + backspace

สิ่งนี้มีประโยชน์มากในกรณีที่คุณพิมพ์ผิด และคุณไม่ต้องการกดปุ่ม backspace ค้างไว้จนไปถึงส่วนที่คุณต้องการจะลบมัน

14. Select in Words

• สำหรับ Windows: Ctrl + Shift + Right arrow / Left arrow

• สำหรับ Mac: Command + Shift + Right arrow / Left arrow

• สำหรับ Ubuntu: Ctrl + Shift + Right arrow / Left arrow

สิ่งนี้มีประโยชน์มาก เพื่อการเลือกคำที่รวดเร็วขึ้น และแก้ไขได้ตามที่ต้องการ

15. Duplicate Line

• สำหรับ Windows: Ctrl + Shift + d

• สำหรับ Mac: Command + Shift + d

• สำหรับ Ubuntu: Ctrl + Shift + d

 Feature ที่ทรงพลังและเป็นที่รู้จักกันก็คือ ความสามารถในการคัดลอกบรรทัด

16. Deleting a Line

• สำหรับ Windows: Ctrl + x

• สำหรับ Mac: Command + x

• สำหรับ Ubuntu: Ctrl + x

17. Add Cursor Above/Below

• สำหรับ Windows: Ctrl + Alt + Up arrow / Down arrow

• สำหรับ Mac: Command + Alt + Up arrow / Down arrow

• สำหรับ Ubuntu: Ctrl + Alt + Up arrow / Down arrow

การ Duplicate Cursors ของคุณซ้ำ ๆ เป็น Feature หนึ่งใน VS Code ที่ช่วยให้คุณประหยัดเวลาได้มาก และมันจะยิ่งมีประโยชน์อย่างมากในสถานการณ์อย่าง TypeScript

18. Rename Symbol

• สำหรับ Windows: F2

• สำหรับ Mac: F2

• สำหรับ Ubuntu: F2

เลือกที่สัญลักษณ์ จากนั้นพิมพ์ F2 หรือคุณสามารถใช้ Context Menu ก็ได้

19. Column (Box) Selection

• สำหรับ Windows: Shift + Alt

• สำหรับ Mac: Shift + Option

• สำหรับ Ubuntu: Shift + Alt

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

20. Command Palette

• สำหรับ Windows: Ctrl + p

• สำหรับ Mac: Command + p

• สำหรับ Ubuntu: Ctrl + p

สำหรับคำสั่งที่มักจะใช้งานกันบ่อย ๆ ก็คือ:

1. Open File

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

2. See keyboard reference command

คำสั่งทั้งหมดอยู่ใน Command Palette พร้อมทั้ง Key Binding ที่เกี่ยวข้อง (ถ้ามี) ในกรณีที่คุณลืม Keyboard Shortcut ขอแนะนำให้คุณใช้ Command Palette เพื่อช่วยเหลือคุณ

สรุป

อย่างที่กล่าวไปตอนต้นว่ายังมี Shortcuts อื่นที่มีประโยชน์ในการใช้งานตามจุดประสงค์ต่าง ๆ อีกเป็นจำนวนมาก ดังนั้น คุณสามารถ Download ดูจาก PDF File ด้านล่างนี้ได้

Linux: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

Window: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

macOS: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

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

 

 

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

 

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

เพิ่มเพื่อน

 

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