บทความ IT เจ๋งๆ
15 VS Code Shortcuts มีประโยชน์ ที่ช่วยเพิ่ม Productivity ของคุณ
10-พ.ย.-21
คัมภีร์เทพ IT
VS Code เป็นหนึ่งใน Editor ที่ได้รับความนิยมมากที่สุดในการพัฒนา Web เมื่อเขียน Code เรามักต้องการจัดรูปแบบบางอย่าง และ VS Code ก็สนับสนุนการทำสิ่งเหล่านี้ได้ดี แม้ว่าการทำงานส่วนใหญ่จะพบได้ใน Menu แต่การใช้ Keyboard Shortcuts ก็สามารถช่วยเขียน Code ได้เร็วยิ่งขึ้น และนี่ก็เป็น 15 VS Code Shortcuts มีประโยชน์ ที่ช่วยเพิ่ม Productivity ของคุณ
1. Opens the Palette to Search for a File
Mac: CMD + P
Windows/Linux: CTRL + P
การ Navigate Files นับเป็นหนึ่งในสิ่งที่ทำกันบ่อย ๆ และคำสั่งนี้ก็มีประโยชน์อย่างมาก คุณสามารถพิมพ์ ชื่อ File ใน Search Box แล้วเลือก File ที่ต้องการด้วยการคลิกหรือกด Enter ที่ Search Result เพื่อทำการเปิด File
2. Add Cursors to All Matching Selections
Mac: CMD + SHIFT + L
Windows/Linux: CTRL + SHIFT + L
หนึ่งใน Features ที่มีประโยชน์ของ VS Code ที่หลายคนชื่นชอบก็คือ Multi Cursors โดยมันอนุญาตให้คุณ Replace Text หรือต่อท้าย Text เพิ่มเติม โดยที่ไม่ต้อง Copy & Paste หรือต้องทำไปเรื่อย ๆ ทีละรายการ
เมื่อใช้คำสั่งนี้ คุณสามารถเพิ่ม Cursor ไปยังคำทั้งหมดที่ Match กับคำแรกที่เลือกไว้ใน Document ได้ในคราวเดียว
3. Add Cursor to Next Matching Selections
Mac: CMD + D
Windows/Linux: CTRL + D
คำสั่งนี้ใช้เพื่อเพิ่ม Cursor ด้วยเช่นกัน ซึ่งคล้าย ๆ กับคำสั่งก่อนหน้านี้ แต่คุณสามารถเพิ่ม Cursor ไปยังคำถัด ๆ ไปที่ Match กับคำแรกที่เลือกไว้ ซึ่งคุณสามารถพิมพ์คำสั่งนี้ย้ำไปได้เรื่อย ๆ จนกว่าจะครบตามที่คุณต้องการ สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณต้องเลือกคำที่คุณต้องการไปทีละรายการ
4. Undo Last Cursor Operation
Mac: CMD + U
Windows/Linux: CTRL + U
หากคุณต้องการ Undo Cursor Selection ในกรณีที่คุณเลือก Cursor มากกว่าที่จำเป็น หรือ Reset Cursor ไปที่ตำแหน่งก่อนหน้า คุณสามารถใช้คำสั่งนี้เพื่อ Undo สิ่งที่ Cursor ทำล่าสุด
5. Select Current Line
Mac: CMD + L
Windows/Linux: CTRL + L
บ่อยครั้งเราใช้การลาก Mouse เพื่อ Select Text ที่ต้องการ แต่ถ้าเราต้องการ Select ทั้งบรรทัด เราสามารถใช้คำสั่งนี้ได้
6. Go to a Specific Line
Mac: CTRL + G
Windows/Linux: CTRL + G
เราสามารถ Navigate ไปยังบรรทัดที่ต้องการของ Document โดยใช้คำสั่งง่าย ๆ นี้ แล้วพิมพ์หมายเลขของบรรทัด
สิ่งนี้มีประโยชน์อย่างยิ่ง เมื่อ Error Stack Trace บอกหมายเลขบรรทัดของ File แก่เรา และขณะเดียวกัน File ของเราก็มีขนาดใหญ่
7. Close All Open Editor Tabs
Mac: CMD + K + W
Windows/Linux: CTRL + K + W
คำสั่งนี้มีประโยชน์มาก เมื่อเราต้องการ Clear Tabs ทั้งหมด
บ่อยครั้ง ในขณะที่ทำการ Debug หรือ Develop คุณอาจเปิด Tabs ไว้เป็นจำนวนมาก และเมื่อคุณต้องการทำอย่างอื่นหรือต้องการเริ่มต้นบางอย่างใหม่ทั้งหมด คำสั่งนี้จะมีประโยชน์อย่างมาก
8. Toggle Block Comment
Mac: SHIFT + OPTION + A
Windows: SHIFT + ALT + A
Linux: CTRL + SHIFT + A
Shortcut นี้ ช่วยให้เราสามารถ Add หรือ Remove Block ของ Comment ใน Code ใน Code ที่คุณเขียน
เราสามารถใส่ JavaScript Code ด้วยการพิมพ์ /* */ เพื่อเพิ่ม Comment Block เข้าไป อย่างไรก็ตาม ด้วย Shortcut นี้ เราสามารถ Add หรือ Remove Comment Block สำหรับ Code Block ที่ Select ไว้ หรือเพิ่ม Comment ใหม่ ๆ เข้าไปได้
กรณีต้องการ Comment ทีละบรรทัด สามารถสลับ Add หรือ Remove ได้ด้วยการใช้ CMD + / หรือ CTRL + / (สำหรับ Windows และ Linux)
9. Fold Code Block
Mac: CMD + OPTION + [
Windows/Linux: CTRL + SHIFT + [
คำสั่งนี้มีประโยชน์อย่างยิ่งเมื่อเราต้องการ Focus ที่เฉพาะส่วนของ Code ที่ต้องการ และละเว้น Code Block บางส่วน สิ่งนี้จะทำการ Fold Block ที่ใกล้กับ Cursor มากที่สุด
ขณะเดียวกัน คุณสามารถ Unfold Code Block ด้วยการใช้ CMD + OPTION + ] หรือ CTRL + SHIFT + ] (สำหรับ Windows และ Linux)
10. Move Line Up or Down
Mac: OPTION + UP/DOWN
Windows/Linux: ALT + UP/DOWN
เมื่อคุณต้องการย้าย Code บางส่วน (เช่น ส่วนของการประกาศตัวแปร) ขึ้นหรือลง คุณจะต้อง Cut และ Paste Code นั้นลงในตำแหน่งที่ต้องการ แต่ถ้าคุณต้องการย้าย Code ครั้งละหลายบรรทัด คุณสามารถใช้คำสั่งนี้เพื่อย้ายบรรทัดปัจจุบันหรือบรรทัดที่เลือกไว้ ให้ขึ้นไปอยู่ข้างบนหรือลงไปข้างล่าง
11. Open Integrated Terminal
Mac: CTRL + `
Windows/Linux: CTRL + `
หนึ่งใน Features ที่น่าทึ่งที่สุดของ VS Code ก็คือ มันรองรับ Integrated Terminal ซึ่งคุณสามารถใช้งานได้เหมือนกับ Terminal ทั่วไป และเพื่อ Run Code หรือทำอย่างอื่น คำสั่งนี้จะช่วยคุณในการเปิด Terminal เมื่อคุณต้องการ
12. Split Editor View
Mac: CMD + \
Windows/Linux: CTRL + \
คุณสามารถแยก Editor View เพื่อเปิดหลาย ๆ Files พร้อมกันได้
สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณต้องการอ้างถึง Content จาก File ในขณะที่เขียน Code ใน File อื่น
13. Format Document
Mac: SHIFT + OPTION + F
Windows: SHIFT + ALT + F
Linux: CTRL + SHIFT + I
บ่อยครั้ง ที่เราเปิดใช้งาน Extensions หรือ Set ค่าตามที่กำหนดไว้ เพื่อให้จัด Format ของ Document เมื่อทำการ Save แต่บางครั้งเราก็ต้องการที่จะควบคุม ตอนที่เราต้องการจัด Format ของ Document นี่คือที่มาของการใช้งานคำสั่งนี้
มันช่วยให้เราสามารถจัด Format ของ Document ได้ตามการ Set ค่าที่กำหนดไว้
14. Duplicate Selection Up or Down
Mac: OPTION + SHIFT + UP/DOWN
Windows/Linux: SHIFT + ALT + UP/DOWN
การใช้คำสั่งนี้ จะทำให้คุณสามารถ Duplicate Code ที่เลือกไว้ด้านบนหรือด้านล่างของโค้ดปัจจุบันได้
คำสั่งนี้เหมาะที่จะใช้ เมื่อคุณมีบาง Functions แทบจะเหมือนกันทั้งหมด และคุณอาจต้องการที่จะเปลี่ยนแปลงแก้ไขบางส่วนเพียงเล็กน้อยหลังจากที่ Duplicate มาใช้ในส่วนอื่น ๆ
15. Toggle Sidebar
Mac: CMD + B
Windows/Linux: CTRL+B
คุณสามารถใช้คำสั่งนี้ ในการสลับเปิด/ปิด Sidebar เพื่อเพิ่มพื้นที่สำหรับดู File ของคุณได้ตามต้องการ
Bonus
คุณสามารถใช้คำสั่ง code . เพื่อเปิด VS Code จาก Terminal
แม้ว่านี่จะไม่ใช่ Keyboard Shortcut แต่มันก็มีประโยชน์อย่างยิ่งเมื่อคุณต้องทำงานกับ Terminal และต้องการเปิด Directory ใน VS Code:
หมายเหตุ: หากยังไม่ได้กำหนดค่า คุณสามารถทำได้จาก VS Code โดยเปิด Command Palette ด้วยคำสั่ง CMD + SHIFT + P แล้วพิมพ์ลงใน Shell จากนั้นก็เลือก Shell Command: Install ‘code’ command in PATH จาก Options
ที่มา: https://betterprogramming.pub/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด