[รวมคีย์ลัด VSCode] สรุปคีย์ที่มีประโยชน์เพื่อเพิ่มประสิทธิภาพการทำงานอย่างก้าวกระโดด (สำหรับ Windows/Mac)

สวัสดีครับ! เมื่อไม่กี่เดือนก่อน ผมไม่มีความรู้ด้านการเขียนโปรแกรมเลย แต่ด้วยความช่วยเหลือจาก AI ผมก็สามารถสร้างเว็บไซต์ 2 แห่งได้ด้วยตัวเอง

จากประสบการณ์ครั้งนี้ ผมรู้สึกอย่างยิ่งว่ามีเทคนิคมากมายที่ผมอยากจะรู้ให้เร็วกว่านี้ และในบรรดาเทคนิคเหล่านั้น "คีย์ลัด" คือสิ่งที่ส่งผลโดยตรงต่อประสิทธิภาพการทำงานของผมมากที่สุด

ในตอนแรกผมหลีกเลี่ยงมันเพราะคิดว่า "มันเยอะเกินไป จำไม่ได้หรอก!" แต่จริงๆ แล้ว คีย์ที่มีประโยชน์จริงๆ นั้นมีไม่มากนัก ในบทความนี้ ผมจะมาแนะนำคีย์ลัดที่คัดสรรมาอย่างดี ซึ่งผมรู้สึกจากใจจริงว่า "ถ้าไม่มีสิ่งนี้ คงเขียนโค้ดไม่ได้อีกต่อไป" จากประสบการณ์จริงในการสร้างเว็บไซต์ของผม

บทความนี้ไม่ใช่แค่การรวบรวมรายการคีย์ลัดทั่วๆ ไป แต่จะอธิบายให้เข้าใจง่ายๆ ว่า "ทำไมมันถึงมีประโยชน์" และ "ใช้ในสถานการณ์ไหน" เหมือนกับที่ผมสอนตัวเองในสมัยที่ยังเป็นมือใหม่ มาเพิ่มความเร็วในการทำงานอย่างก้าวกระโดดไปพร้อมกันเถอะครับ!

บทนำ: สำหรับผู้ที่ไม่ถนัดในการจำคีย์ลัด

เมื่อได้ยินคำว่า "รายการคีย์ลัด" คุณนึกถึงตารางที่เต็มไปด้วยตัวอักษรและสัญลักษณ์ แล้วอยากจะปิดหน้านั้นไปเงียบๆ ไหมครับ? ผมก็เคยเป็นแบบนั้นเหมือนกัน

เคล็ดลับที่ทำให้ผมใช้คีย์ลัดได้อย่างคล่องแคล่วมีเพียง 2 ข้อเท่านั้น:

1. อย่าพยายามจำทั้งหมดในคราวเดียว ก่อนอื่น ลองเลือกใช้ "คีย์ลัดระดับเทพ" ที่แนะนำในบทความนี้อย่างมีสติ วันละ 1 คีย์ก็ยังดี
2. คิดอยู่เสมอว่า "เราจะทำสิ่งนี้ให้ง่ายขึ้นได้อีกไหมนะ?" แล้วนำคำถามนั้นไปถาม AI (เช่น ChatGPT) ด้วยคำพูดที่เฉพาะเจาะจง เช่น "ใน VSCode มีคีย์ลัดสำหรับเปลี่ยนคำเดียวกันทั้งหมดในครั้งเดียวไหม?"

ในบทความนี้ ผมได้คัดเลือกเฉพาะคีย์ลัดที่ใช้งานได้จริง ซึ่งผมได้เรียนรู้จากการช่วยเหลือของ AI มาเริ่มต้นก้าวแรกกันเลยครับ

สิ่งที่ขาดไม่ได้เด็ดขาด! 5 สุดยอด "คีย์ลัดระดับเทพ" ที่จะทำให้การเขียนโค้ดของคุณเร็วขึ้นเป็นเท่าตัว

ในบรรดาคีย์ลัดมากมาย ผมได้คัดเลือก "คีย์ลัดระดับเทพ" 5 อันดับแรกที่ผมใช้ทุกวัน ไม่สิ ทุกๆ ชั่วโมงหลายสิบครั้ง เพียงแค่จำสิ่งเหล่านี้ ประสบการณ์การเขียนโค้ดของคุณจะเปลี่ยนไปอย่างสิ้นเชิง

อันดับที่ 1: เลือกและแก้ไขคำเดียวกันในพริบตา! การแก้ไขแบบหลายเคอร์เซอร์

Windows: Ctrl + D
Mac: Cmd + D

นี่คือคีย์ลัดแรกที่ผมจำได้แล้วรู้สึกทึ่งมาก มันช่วยให้คุณสามารถเลือกคำหรือโค้ดเดียวกันหลายๆ จุดในหน้า แล้วแก้ไขทั้งหมดได้ในคราวเดียว

จากประสบการณ์: สมมติว่าตอนที่คุณกำลังสร้างรายการสินค้าใน HTML แล้วต้องการเปลี่ยนชื่อคลาสจาก <div class="card"> เป็น <div class="product-card"> เมื่อก่อนผมจะใช้ฟังก์ชันค้นหาแล้วแทนที่ทีละตัว แต่หลังจากที่ได้รู้จักคีย์ลัดนี้ ผมก็แค่ดับเบิลคลิกที่คำว่า "card" เพื่อเลือก จากนั้นก็กด Ctrl + D (หรือ Cmd + D บน Mac) ไปเรื่อยๆ ตามจำนวนที่ต้องการ เคอร์เซอร์ก็จะเพิ่มขึ้นเรื่อยๆ และความรู้สึกตื่นเต้นที่สามารถแก้ไขชื่อคลาสทั้งหมดได้ด้วยการพิมพ์เพียงครั้งเดียวนั้น ผมไม่มีวันลืมเลย

เคล็ดลับการใช้งาน: การดับเบิลคลิกที่คำที่ต้องการแก้ไขก่อนที่จะเริ่มใช้คีย์ลัดนี้ จะช่วยให้เลือกได้แม่นยำและรวดเร็วยิ่งขึ้น

อันดับที่ 2: ไม่ต้องคัดลอก-วางอีกต่อไป! ย้ายทั้งบรรทัด

Windows: Alt + ↑ / ↓
Mac: Option + ↑ / ↓

คุณสามารถย้ายบรรทัดที่เคอร์เซอร์อยู่ หรือหลายบรรทัดที่เลือกไว้ ขึ้น-ลงได้ทั้งอย่างนั้น ไม่ต้องทำตามขั้นตอนที่ยุ่งยากอย่างการเลือกบรรทัด → Ctrl + X → คลิกที่ปลายทาง → Ctrl + V อีกต่อไป

จากประสบการณ์: คีย์ลัดนี้ทรงพลังอย่างยิ่งเมื่อต้องการสลับลำดับของรายการ <li> ใน HTML หรือจัดเรียงลำดับคุณสมบัติของ CSS มันช่วยขจัดปัญหาการเยื้องที่ผิดเพี้ยนหรือการเผลอลบโค้ดบางส่วนโดยไม่ได้ตั้งใจซึ่งมักเกิดขึ้นตอนตัดและวางโค้ดได้อย่างสมบูรณ์ มันคือ "ไม้เท้าวิเศษ" ที่ช่วยให้คุณสามารถเปลี่ยนแปลงโครงสร้างของโค้ดได้อย่างปลอดภัยและเป็นธรรมชาติ

อันดับที่ 3: คัดลอกบรรทัดได้ในพริบตา

Windows: Shift + Alt + ↑ / ↓
Mac: Shift + Option + ↑ / ↓

คีย์ลัดนี้จะคัดลอกบรรทัดปัจจุบันไปไว้ด้านบนหรือด้านล่าง ช่วยลดระยะเวลาการทำงานได้อย่างมากเมื่อคุณต้องเขียนโค้ดที่คล้ายกันซ้ำๆ

จากประสบการณ์: ตัวอย่างเช่น เมื่อคุณต้องการสร้างองค์ประกอบ HTML ที่มีโครงสร้างเหมือนกันจำนวนมาก เช่น เมนูนำทางหรือรายการในลิสต์ เมื่อก่อนผมจะคัดลอกหนึ่งบรรทัด, ขึ้นบรรทัดใหม่, แล้ววาง... ทำซ้ำไปเรื่อยๆ แต่ด้วยคีย์ลัดนี้ แค่กด Shift + Alt + ↓ ซ้ำๆ ก็จะได้รายการตามจำนวนที่ต้องการในเวลาอันรวดเร็ว เมื่อใช้ร่วมกับ "การย้ายบรรทัด" ในอันดับที่ 2 ความเร็วในการเขียนโค้ดของคุณจะเพิ่มขึ้นหลายเท่าตัว

อันดับที่ 4: เปิดไฟล์ได้จากทุกที่! Command Palette

Windows: Ctrl + P
Mac: Cmd + P

เมื่อกดคีย์ลัดนี้ กล่องค้นหาจะปรากฏขึ้นที่ด้านบนของหน้าจอ ให้คุณพิมพ์ชื่อไฟล์ในโปรเจกต์แล้วเปิดขึ้นมาได้ทันที ไม่จำเป็นต้องมองหาไฟล์จาก Explorer ทางด้านซ้ายอีกต่อไป

จากประสบการณ์: เมื่อคุณคุ้นเคยกับการสร้างเว็บไซต์ จำนวนไฟล์จะเพิ่มขึ้นเป็นหลายสิบหรือหลายร้อยไฟล์ ซึ่งทำให้การค้นหาไฟล์กลายเป็นเรื่องยุ่งยาก เช่น "ไฟล์ CSS นั้นฉันเก็บไว้ในโฟลเดอร์ไหนนะ...?" ตั้งแต่ที่ผมจำ Ctrl + P ได้ เวลาที่ใช้ในการค้นหาไฟล์ก็แทบจะเป็นศูนย์ แค่พิมพ์ style ก็จะมี style.css ขึ้นมาเป็นตัวเลือก มันช่วยให้การเขียนโค้ดของคุณลื่นไหลไม่สะดุด

อันดับที่ 5: ทุกสิ่งเริ่มต้นที่นี่ Command Palette

Windows: Ctrl + Shift + P
Mac: Cmd + Shift + P

คล้ายกับอันดับที่ 4 แต่คีย์ลัดนี้ไม่ได้ใช้แค่ค้นหาไฟล์ แต่ยังสามารถค้นหาและเรียกใช้ "ทุกฟังก์ชัน (คำสั่ง)" ของ VSCode ได้อีกด้วย แม้ว่าคุณจะลืมคีย์ลัด ก็แค่พิมพ์ชื่อคำสั่งที่ต้องการทำ (เช่น format หรือ theme) แล้ว VSCode ก็จะเรียกใช้ฟังก์ชันนั้นให้คุณ

จากประสบการณ์: เมื่อผมคิดว่า "เอ๊ะ คีย์ลัดสำหรับจัดรูปแบบโค้ดให้สวยงามคืออะไรนะ?" ผมจะกด Ctrl + Shift + P แล้วพิมพ์ format ก็จะเจอคำสั่ง "Format Document" แค่จำสิ่งนี้ไว้ได้ ถึงจะลืมคีย์ลัดอื่นๆ ก็ยังเอาตัวรอดได้ มันคือ "ป้อมปราการสุดท้าย" อย่างแท้จริง เวลาที่ติดตั้งส่วนขยายใหม่ ผมก็จะมาที่นี่เป็นที่แรกเพื่อดูว่ามีฟังก์ชันอะไรเพิ่มเข้ามาบ้าง

[ขั้นสูง] สร้างสภาพแวดล้อมสุดเทพในแบบของคุณ: การเปลี่ยน Keybinding

ข้อดีที่ยอดเยี่ยมของ VSCode คือคุณสามารถปรับแต่งคีย์ลัดได้ตามใจชอบ ถ้าคุณรู้สึกว่า "คีย์ลัดนี้มีประโยชน์ แต่ปุ่มกดยากจัง..." ก็เปลี่ยนมันซะเลย

ในส่วนนี้ ผมจะแนะนำวิธีการเปิดไฟล์ตั้งค่า keybindings.json และตัวอย่างการปรับแต่งที่ผมลองใช้แล้วได้ผลดี แค่คัดลอก-วาง ก็จะทำให้ VSCode ของคุณใช้งานง่ายขึ้นไปอีกขั้น

1. เปิดไฟล์ keybindings.json

1. ก่อนอื่น ให้เปิด Command Palette (Windows: Ctrl + Shift + P / Mac: Cmd + Shift + P)
2. ในกล่องค้นหา พิมพ์ keybindings
3. จากรายการที่ปรากฏขึ้น เลือก "Preferences: Open Keyboard Shortcuts (JSON)" แล้วกด Enter

จากนั้น ไฟล์ตั้งค่าที่ชื่อว่า keybindings.json จะเปิดขึ้นมา ในตอนแรกอาจจะมีแค่ [] เราจะเขียนการตั้งค่าของเราลงในวงเล็บนี้

2. คัดลอก-วางได้เลย! ตัวอย่างการตั้งค่าที่แนะนำ

ด้านล่างนี้คือตัวอย่างการปรับแต่งที่ผมแนะนำ ลองคัดลอกโค้ดบล็อกนี้ทั้งหมดไปวางใน [] ของไฟล์ keybindings.json ของคุณดูสิครับ

[
    // {
    //   "key": "คีย์เดิม",
    //   "command": "คำสั่งที่ต้องการเรียกใช้",
    //   "when": "เปิดใช้งานเฉพาะในเงื่อนไขที่กำหนด"
    // },
    
    // ตัวอย่างที่ 1: ทำให้คีย์ลัดเปิด Terminal กดยง่ายขึ้น
    // ค่าเริ่มต้น `Ctrl + `` กดยากไปหน่อย เลยเปลี่ยน
    {
        "key": "ctrl+shift+t", // Windows
        "command": "workbench.action.terminal.toggleTerminal"
    },
    {
        "key": "cmd+shift+t", // Mac
        "command": "workbench.action.terminal.toggleTerminal"
    },

    // ตัวอย่างที่ 2: ทำให้การปิด Editor (แท็บ) กดยง่ายขึ้น
    // เขียนทับค่าเริ่มต้น `Ctrl+W`
    {
        "key": "ctrl+q", // Windows
        "command": "workbench.action.closeActiveEditor"
    },
    {
        "key": "cmd+w", // ของ Mac ค่าเริ่มต้นก็กดยง่ายอยู่แล้ว จะไม่เปลี่ยนก็ได้
        "command": "workbench.action.closeActiveEditor"
    }
]

คำอธิบาย:

• ตัวอย่างที่ 1 คือคีย์ลัดสำหรับเปิด "Terminal" เพื่อรันคำสั่งต่างๆ ภายใน VSCode เนื่องจากคีย์เริ่มต้นอยู่ในตำแหน่งที่กดยากเล็กน้อย เราจึงเปลี่ยนเป็นคีย์ที่กดได้ง่ายและเป็นธรรมชาติมากขึ้น
• ตัวอย่างที่ 2 คือคีย์ลัดสำหรับปิดไฟล์ที่เปิดอยู่ในปัจจุบัน การตั้งค่าให้คล้ายกับการปิดแท็บในเบราว์เซอร์จะช่วยให้นิ้วของคุณจำได้ง่ายขึ้น

ด้วยวิธีนี้ คุณสามารถระบุคีย์ผสมที่คุณต้องการในส่วน key และฟังก์ชันที่ต้องการจะกำหนดในส่วน command ได้ คุณสามารถดูว่ามี command อะไรบ้างได้จากเอกสาร Keybinding ของเว็บไซต์ทางการ หรือค้นหาจาก Command Palette ลองสร้างสภาพแวดล้อมคีย์ลัดสุดเทพในแบบของคุณดูนะครับ

ข้อควรระวัง: ไฟล์ keybindings.json เป็นไฟล์รูปแบบ JSON คุณต้องใส่เครื่องหมายจุลภาค , หลัง } ของทุกรายการยกเว้นรายการสุดท้าย ดังนั้นโปรดระวังข้อผิดพลาดทางไวยากรณ์ขณะแก้ไข หากเกิดข้อผิดพลาด VSCode จะแจ้งให้คุณทราบ ให้ทำตามคำแนะนำเพื่อแก้ไข

บทสรุป: โลกใหม่ของการเขียนโค้ดที่เปิดขึ้นด้วยคีย์ลัด

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

• เลือกและแก้ไขคำเดียวกัน: Ctrl + D / Cmd + D
• ย้ายบรรทัด: Alt + ↑ / ↓ / Option + ↑ / ↓
• คัดลอกบรรทัด: Shift + Alt + ↑ / ↓ / Shift + Option + ↑ / ↓
• เปิดไฟล์: Ctrl + P / Cmd + P
• เปิด Command Palette: Ctrl + Shift + P / Cmd + Shift + P

ในตอนแรกไม่จำเป็นต้องจำทั้งหมดก็ได้ครับ ลองเริ่มจากอันดับที่ 1 Ctrl + D (Cmd + D) แล้วพยายามใช้ในการเขียนโค้ดของวันนี้ดู เมื่อนิ้วของคุณจำการเคลื่อนไหวได้แล้ว ความเร็วในการทำงานของคุณจะเพิ่มขึ้นอย่างแน่นอน

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