สุดยอดเทคนิคการเชื่อมต่อ Clibor: ทำให้การป้อนข้อความสำเร็จรูปเป็นอัตโนมัติด้วย AutoHotkey และ VSCode

สวัสดีครับนักสร้างเว็บ! ทำงานเหนื่อยไหมครับ? การเขียนโค้ด HTML และ CSS เป็นอย่างไรบ้าง?

ถ้าคุณเคยรู้สึกว่า:

• "การพิมพ์ <div class="..."></div> ซ้ำๆ นี่มันน่าเบื่อจริงๆ..."
• "ไม่มีวิธีพิมพ์ console.log() ที่ง่ายกว่านี้เหรอ?"
• "ฉันมีโค้d snippets ที่ใช้บ่อยๆ แต่อยากใช้ที่อื่นนอกจากใน VSCode ด้วย!"

ถ้าคุณรู้สึกแบบนี้ บทความนี้เหมาะสำหรับคุณเลยครับ เพราะไม่กี่เดือนก่อน ผมก็เคยเจอปัญหาเดียวกันนี้เป๊ะๆ

สวัสดีครับ! ผมผู้เขียนบทความนี้ เป็นอดีตมือใหม่ที่เริ่มจากศูนย์ความรู้ด้านโปรแกรมมิ่ง เรียนรู้โดยใช้ AI ช่วย และสร้างเว็บไซต์ 2 แห่ง (buyonjapan.com, copicode.com) ด้วยตัวเองในเวลาเพียงเดือนครึ่ง นั่นทำให้ผมเข้าใจดีว่าคุณอาจจะติดขัดตรงไหน

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

การเตรียมตัว: มาติดตั้งสามเครื่องมือเทพกันเถอะ

ก่อนอื่น มาเตรียมเครื่องมือ 3 อย่างที่จะเป็นพระเอกของเราในวันนี้กันก่อน หากคุณติดตั้งไว้แล้ว สามารถข้ามไปที่หัวข้อ "พื้นฐาน" ได้เลยครับ

1. Clibor

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

• คลิกที่นี่เพื่อไปยังเว็บไซต์ทางการของ Clibor

การติดตั้งนั้นง่ายมาก แค่ดาวน์โหลดจากเว็บไซต์ด้านบนแล้วทำตามคำแนะนำของตัวติดตั้ง

2. AutoHotkey

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

• คลิกที่นี่เพื่อไปยังเว็บไซต์ทางการของ AutoHotkey

【ข้อสำคัญ】 AutoHotkey มีเวอร์ชัน v1.1 และ v2.0 แต่สคริปต์ส่วนใหญ่ที่คุณจะพบบนอินเทอร์เน็ตนั้นเป็นของ v1.1 เพื่อหลีกเลี่ยงปัญหาความเข้ากันไม่ได้ ผมขอแนะนำให้ดาวน์โหลด v1.1 เว้นแต่คุณจะมีเหตุผลเฉพาะที่จะไม่ทำเช่นนั้น

(รูปภาพนี้ใช้เพื่อการอ้างอิงเท่านั้น)

3. Visual Studio Code (VSCode)

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

เมื่อมีเครื่องมือครบแล้ว ก็ไปที่การตั้งค่าการเชื่อมต่อกันเลย!

พื้นฐาน: ประสบการณ์ "อ๋อ!" ครั้งแรกกับการเชื่อมต่อ Clibor และ AutoHotkey

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

ขั้นตอนที่ 1: ลงทะเบียนสคริปต์ AutoHotkey ใน Clibor

จริงๆ แล้วคุณสามารถเขียนคำสั่ง AutoHotkey ลงในรายการข้อความสำเร็จรูปของ Clibor ได้โดยตรง นี่คือกุญแจสำคัญของเทคนิคการเชื่อมต่อของเรา

1. เปิดหน้าต่างหลักของ Clibor และเลือกแท็บ "ข้อความสำเร็จรูป"
2. คลิกขวาที่กลุ่มและเลือก "ใหม่"
3. คัดลอกโค้ดต่อไปนี้และวางลงในช่อง "เนื้อหา" โดยตรง

#Persistent
:*?:@ทักทาย::ขอบคุณสำหรับการสนับสนุนอย่างต่อเนื่องของคุณ ขอแสดงความนับถือ [ชื่อของคุณ] จาก [บริษัทของคุณ]
Return

คำอธิบายโค้ดสั้นๆ:

• #Persistent: คาถาเล็กๆ น้อยๆ เพื่อให้สคริปต์ทำงานอยู่เบื้องหลัง
• :*?:@ทักทาย::: นี่คือทริกเกอร์ (hotstring) ที่หมายถึง "เมื่อพิมพ์สตริง `@ทักทาย`" เครื่องหมาย `*` ระหว่างโคลอนหมายถึง "ทริกเกอร์แม้ว่าจะมีอักขระอยู่ข้างหน้า" และ `?` หมายถึง "ทริกเกอร์แม้ว่าจะอยู่กลางคำ" ไม่ต้องกังวลกับรายละเอียดตอนนี้ แค่จำรูปแบบนี้ไว้ก็พอ!
• ขอบคุณสำหรับ...: นี่คือข้อความที่คุณต้องการให้แสดงผล
• Return: บ่งบอกถึงการสิ้นสุดการทำงานของสคริปต์

ขั้นตอนที่ 2: เรียกใช้สคริปต์จาก Clibor

1. คลิกขวาที่ข้อความสำเร็จรูปที่คุณเพิ่งลงทะเบียนและเลือก "เรียกใช้ด้วย AutoHotkey"
2. หากคุณเห็นไอคอน "H" สีเขียวในถาดระบบของคุณ (พื้นที่ที่มีไอคอนอยู่มุมขวาล่างของหน้าจอ) แสดงว่าคุณทำสำเร็จแล้ว ซึ่งหมายความว่าสคริปต์กำลังรอคำสั่งของคุณอยู่
3. เปิด VSCode, Notepad หรือช่องป้อนข้อความใดๆ แล้วลองพิมพ์ `@ทักทาย`

เป็นอย่างไรบ้าง? ข้อความควรจะเปลี่ยนไปทันที! นี่คือขั้นตอนแรกในการเชื่อมต่อ Clibor และ AutoHotkey อาจจะดูง่ายเกินไป แต่กลไกพื้นฐานนี้มีศักยภาพที่ไร้ขีดจำกัด

เคล็ดลับขั้นสูง ①: ควบคุมประวัติการคัดลอกของคุณด้วยการเชื่อมต่อ FIFO/LIFO

ตอนนี้ มาถึงส่วนสำคัญแล้ว พลังที่แท้จริงของ Clibor อยู่ที่ประวัติคลิปบอร์ดที่กว้างขวาง แต่เมื่อคุณคิดว่า "ฉันต้องการใช้รายการที่ฉันคัดลอกไปเมื่อสองขั้นตอนที่แล้ว..." การเปิดหน้าต่าง Clibor แล้วเลือกมันก็ค่อนข้างยุ่งยาก

ด้วย AutoHotkey คุณสามารถวางรายการที่สอง, สาม หรือแม้แต่รายการที่เก่ากว่าจากประวัติการคัดลอกของคุณได้โดยตรง โดยไม่ต้องเปิดหน้าต่าง Clibor เลย ซึ่งเรียกว่าการเชื่อมต่อ FIFO (First-In, First-Out)/LIFO (Last-In, First-Out)

อาจจะฟังดูซับซ้อน แต่ขั้นตอนเหมือนเดิม แค่ลงทะเบียนสคริปต์ต่อไปนี้ในรายการข้อความสำเร็จรูปของ Clibor แล้ว "เรียกใช้ด้วย AutoHotkey"

#Persistent
; วางรายการที่ 2 จากประวัติด้วย Ctrl + Shift + V (FIFO)
^+v::
PostMessage, 0x319, 106, 0,, ahk_class TClibor
Return

; วางรายการที่ 3 จากประวัติด้วย Ctrl + Alt + V (FIFO)
^!v::
PostMessage, 0x319, 107, 0,, ahk_class TClibor
Return

คำอธิบายโค้ดสั้นๆ:

• ^+v::: `^` หมายถึง Ctrl และ `+` หมายถึง Shift ดังนั้นนี่คือทริกเกอร์สำหรับเมื่อกด "Ctrl + Shift + V"
• PostMessage, ...: นี่คือคาถาเวทมนตร์ มันส่งคำสั่งไปยัง Clibor ว่า "วางรายการที่ N จากประวัติ!" `106` หมายถึงรายการที่สอง และ `107` หมายถึงรายการที่สาม รายละเอียดของคาถานี้มีอยู่ในเว็บไซต์ทางการของ Clibor ดังนั้นจึงเป็นแหล่งข้อมูลที่เชื่อถือได้

เมื่อสคริปต์นี้ทำงานอยู่ ลองคัดลอกคำสามคำที่แตกต่างกันตามลำดับ (เช่น "แอปเปิ้ล" → "กล้วย" → "เชอร์รี่")

1. หากคุณกด `Ctrl + V` ตามปกติ "เชอร์รี่" ซึ่งเป็นรายการสุดท้ายที่คุณคัดลอกจะถูกวาง
2. ต่อไป ลองกด `Ctrl + Shift + V` ดูสิ "กล้วย" ควรจะถูกวาง!
3. สุดท้าย หากคุณกด `Ctrl + Alt + V` "แอปเปิ้ล" จะถูกวาง

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

เคล็ดลับขั้นสูง ②: สคริปต์เชิงปฏิบัติที่จะเปลี่ยนการเขียนโค้ดของคุณใน VSCode ไปตลอดกาล

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

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

#Persistent

; =============================================
;  สำหรับเขียนโค้ด HTML
; =============================================

; พิมพ์ `!html` เพื่อขยายเทมเพลตพื้นฐานของ HTML5
:*?:!html::
(
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>เอกสาร</title>
</head>
<body>
    {Up 3}{End}{Left 10}
</body>
</html>
)
Return

; =============================================
;  สำหรับเขียนโค้ด CSS
; =============================================

; พิมพ์ `!flex` เพื่อขยาย snippet พื้นฐานของ Flexbox
:*?:!flex::
(
display: flex;
justify-content: center;
align-items: center;
)
Return

; =============================================
;  สำหรับเขียนโค้ด JavaScript
; =============================================

; พิมพ์ `!log` เพื่อแทรก console.log() และย้ายเคอร์เซอร์ไปในวงเล็บ
:*?:!log::
SendInput, console.log();{Left 2}
Return

; พิมพ์ `!q` เพื่อแทรก document.querySelector('') และย้ายเคอร์เซอร์ไปในเครื่องหมายคำพูด
:*?:!q::
SendInput, document.querySelector('');{Left 2}
Return

; =============================================
;  ทั่วไป
; =============================================

; พิมพ์ `!date` เพื่อแทรกวันที่ปัจจุบัน (YYYY-MM-DD)
:*?:!date::
FormatTime, CurrentDateTime, , yyyy-MM-dd
SendInput, %CurrentDateTime%
Return

[สำคัญมาก] เวทมนตร์แห่งการย้ายเคอร์เซอร์: {Left 2}

ในบรรดาสคริปต์เหล่านี้ สิ่งที่ผมอยากให้คุณสังเกตเป็นพิเศษคือส่วน {Left 2} ที่ท้าย `!log` และ `!q` นี่คือคำสั่งที่หมายถึง "กดปุ่มลูกศรซ้ายสองครั้ง"

ด้วยวิธีนี้ ตัวอย่างเช่น เมื่อคุณพิมพ์ `!log` หลังจากที่ console.log(); ถูกขยาย เคอร์เซอร์จะย้ายเข้าไปใน `()` โดยอัตโนมัติและราบรื่น คุณสามารถเริ่มพิมพ์ชื่อตัวแปรได้ทันที ซึ่งช่วยลดความยุ่งยากในการใช้เมาส์หรือปุ่มลูกศรเพื่อย้อนกลับ การสะสมประสิทธิภาพเล็กๆ น้อยๆ เหล่านี้จะช่วยลดระยะเวลาการทำงานในแต่ละวันของคุณได้อย่างมาก

ในตัวอย่าง !html ผมใช้ {Up 3}{End}{Left 10} เพื่อปรับเคอร์เซอร์ให้ย้ายไปยังส่วน Document ของแท็ก <title> หลังจากการขยาย การที่สามารถย้ายเคอร์เซอร์ไปยังตำแหน่งใดก็ได้ที่คุณต้องการเป็นคุณสมบัติที่ทรงพลังของ AutoHotkey

ข้อควรระวังและวิธีแก้ปัญหา

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

1. สคริปต์ไม่ทำงาน? ลองเรียกใช้อีกครั้ง!

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

2. ใช้ทริกเกอร์ที่ชาญฉลาดเพื่อป้องกันการขยายที่ไม่ต้องการ

หากคุณตั้งค่าทริกเกอร์เป็นคำทั่วไปอย่าง `log` มันอาจจะขยายเป็น `console.log()` โดยไม่ได้ตั้งใจในขณะที่คุณกำลังเขียน ซึ่งอาจทำให้หงุดหงิดมาก

เพื่อป้องกันปัญหานี้ ผมมีกฎว่าจะต้องใส่เครื่องหมาย `!` (เครื่องหมายตกใจ) ไว้หน้าทริกเกอร์ทั้งหมดของผม (เช่น `!log`, `!html`) ด้วยวิธีนี้ คุณจะไม่เผลอไปทริกเกอร์มันโดยไม่ได้ตั้งใจระหว่างการพิมพ์ปกติ ผมขอแนะนำให้คุณสร้างกฎของคุณเอง เช่น ใช้ `@` หรือ `;` เป็นคำนำหน้า

3. วิธีจัดการสคริปต์หลายตัว

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

สรุป: มาสร้างสภาพแวดล้อมสุดยอดของคุณเองกันเถอะ

วันนี้เราได้แสดงให้เห็นถึงวิธีการเพิ่มประสิทธิภาพการป้อนข้อความสำเร็จรูปของคุณอย่างมากโดยการเชื่อมต่อ Clibor, AutoHotkey และ VSCode

• ความง่ายในการเริ่มการเชื่อมต่อเพียงแค่ลงทะเบียนสคริปต์ AutoHotkey ในรายการข้อความสำเร็จรูปของ Clibor
• ความพึงพอใจในการควบคุมประวัติการคัดลอกจากคีย์บอร์ดด้วยการเชื่อมต่อ FIFO/LIFO
• พลังในการเพิ่มความเร็วในการเขียนโค้ดของคุณด้วยสคริปต์เชิงปฏิบัติสำหรับ VSCode

หากคุณได้ลองทำสิ่งเหล่านี้และรู้สึก "อ๋อ!" ที่มันใช้งานได้จริง ผมก็ดีใจมากแล้วครับ

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

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