หันมาหัด vim (plugin) กันเถอะ「 Part 2」

บล็อกนี้สอนการใช้ Vim Text Object ด้วย structure [number] + command + object ที่ช่วยให้จัดการ code ได้อย่างทรงพลัง เช่น viw, dip, ci" รวมถึงเทคนิคต่างๆ อย่าง f/F สำหรับค้นหาตัวอักษรในบรรทัด, <ctrl+v> + I สำหรับแก้ไขหลายบรรทัดพร้อมกัน และ Vim Surround (viw + S + ") สำหรับครอบคำด้วย symbol ต่างๆ จุดเด่นคือ key ไม่กี่ตัวสามารถนำมา combine กันได้หลากหลาย ทำให้ edit code ได้เร็วและมีประสิทธิภาพสูงมาก

Nonthawit

CEO | Engineer | Designer

VIEW

2,613

สอนใช้ Key ต่างๆที่จำเป็นใน Vim มันไม่ได้ยากขนาดนั้น :)

จากบล็อกที่แล้ว หันมาหัด Vim (plugin) กันเถอะ [Basic]

เราปูพื้นฐานนิดหน่อยใครจำไม่ได้ให้กลับไปดูก่อนไปต่อนะครับ เพราะเดี๋ยวจะงง

ใครจำได้แล้วไปต่อโลด

ต่อไปเราจะเอา key จากบล็อกที่แล้วมายำรวมกันตามนี้

[Movement] 
 1. wW 
 2. bB 
 x. 0 ^ ใช้ I + <esc> แทน
 3. &
 4. % 
 5. :[number] 
 6. gg G

[Insert/Append text]
 7. i I
 8. a A
 9. o O

[Visual mode]
10. vV <ctrl+v>
11. v[ลากคลุม] + y/d/c

[Editing]
12. r<ตัวอักษร>
13. J
14. cc หรือ S
15. <ctrl-r> กับ u
16. ~

[Cut and Paste]
17. yy
18. p P
19. dd  
xx. <ctr+r> + " ใช้ p P ใน normal mode แทน
20. x

[Scroll] 
21. <ctrl + y/e>
22. <ctrl + u/d>
23. <ctrl + f/b>

[File] 
22. :w :wq
23. :q :q!
24. /

What?!!!

ไม่ต้องกลัวครับอย่างที่เราบอก เราจะมาทำให้มันง่ายกัน(มั้ง 🤣)

Vim Text Object

ก่อนอื่นเลยเป็นเรื่องที่เราทิ้งกันไว้บล็อกที่แล้ว key ของ vim ออกแบบมาไว้ดีมากโดย structure เป็นแบบนี้

[number] + <command> + <object>

1. number (optional)

เป็นส่วนของที่ไว้ทำ <command> + <object / movement> ซ้ำตามจำนวนตัวเลขที่เราใส่ไปครับ จะไม่ใส่ก็ได้ เช่น

5l = เลื่อน cursor ไปทางซ้าย 5 ตัว
2yy = copy สองบรรทัด

2. command

พวก operator ในการแก้ไขคำต่างๆ เช่น

d = delete
p = paste
c = cut
v = visual 
y = yank (copy)
...

เป็นต้น

3. object

เช่น

s     = sentense 
is    = inside sentense
as    = around sentense

w     = word
iw    = inside word
aw    = around word

p     = paragraph
ip    = inside paragraph
ap    = around paragraph

" '   = single/double quote
i"    = inside single quote
a"    = around single quote

(     = parentheses
i(    = inside parentheses
a(    = around parentheses

[ {   = brackets
i[    = inside brackets
a[    = around brackets

t     = tag ex. <html>...</html>
it    = inside tag
at    = around tag

...

ซึ่งวันนี้เราจะเอา 3 อย่างนี้มายำกันเป็น vim scrypt ที่ใช้กันบ่อยๆเนาะลุยกันเลย

ก่อนอื่นเราขอสอน key หนึ่งเพิ่มก่อนคือ

f กับ F

เป็น key ในการค้นหาตัวอักษรในบรรทัดนั้นๆ พร้อมกับเลื่อน cursor ไปให้ วิธีใช้ก็ง่ายมากลองกลับไป normal mode พิมพ์

f + <ตัวอักษรที่เราต้องการจะหา>

ถ้ามันไปเจอตัวก่อนหน้าให้กด

เพื่อหาซ้ำไปเรื่อยๆ

ถ้าอยากหาย้อนหลังของ cursor ก็ให้ใช้

F + <ตัวอักษรที่เราต้องการจะหา>

ตัวอย่างเช่น ต้องการเลื่อน cursor ไปที่ตัว “ g ” ที่อยู่หลัง cursor ก็แค่พิมพ์

Fg

อยากบอกว่าวิธีนี้ใช้บ่อยมากและเอาไปประยุกต์กับอย่างอื่นได้ด้วย

[สรุป pattern]

f/F + <ตัวอักษร>

ถ้าต้องการหาซ้ำกด ;

เรามาลองทำโจทย์กันเล่นๆดีกว่า

โจทย์แรก : ลากคลุมทุกอย่างที่ขวางหน้า คำ บรรทัด บล็อก บางส่วน หรือ ทั้งไฟล์

1. ลากคลุมคำ อย่างแรกเราต้องใช้ v แน่นอนแล้วยังไงต่อ เราจะใช้ “ l ”ค่อยๆเลื่อนไปทางด้านขวาก็ได้แต่เรามีวิธีที่เท่กว่านั้น

viw = visual inside word

มันจะลากคลุมคำให้ทันทีครับ

ลากคลุมบรรทัด ทำได้ 3 แบบ แบบแรก คือ

1. v$ 
2. V
3. vf<ตัวอักษรตัวสุดท้าย>

ปล. แนะนำ 2. กับ 3. เพราะกดง่ายกว่า

2. ลากคลุมบล็อก

vip = visual inside paragraph

เราจะใช้กันบ่อยในกรณีลากคลุม method

3. ลากคลุมแค่บางส่วน

vf<ตัวอักษรที่ต้องการคลุมถึง>

4. ลากคลุมทั้ง file

ggVG

เราจะสังเกตเห็น pattern

สามารถประยุกต์ใช้กับ key อื่นได้ ไม่จำเป็นต้อง v อย่างเดียว

vi + <ตัวอักษรที่เราการคลุม “ข้างใน”>
vi + w p < ( { [ หรือ “

หรือ จะใช้ เป็น

di + w p < ( { [ หรือ “

มันคือการ delete นั้นเอง เราจะเปลี่ยน w เป็น p ( { [ หรือ “ ก็ได้แล้วแต่สิ่งที่เราต้องการที่จะลากคลุม

NOTE: มันคือ structure ของ Vim Text Object นั้นเอง เพียงแค่ตอนนี้ยังไม่มีส่วนของ [number]

[number] + <command> + <object>

[สรุป pattern] ที่ใช้เลยปรยุกต์ออกมาเป็น

vi/di/ci/ + w p < ( { [ “


ขอเพิ่มอีกตัวครั
a = around

va/da/ca/ + w p < ( { [ “

นี่แหละครับความสนุกสนานของ Vim 🤪

โจทย์สอง เราต้องการ ใส่ public ข้างหน้าตัวแปรทุกบรรทัด หรือ เปลี่ยนเป็น private หรือ ลบออกทั้งหมด

เราต้องคิดก่อน การที่จะใส่มันทุกบรรทัดได้เราต้องแตก cursor ออกมาก่อนคำถามคือทำยังไง

ใช้ key ที่เราเคยบอกไว้ด้านบนไงหละ

<ctrl+v> (ใครจำไม่ได้กลับไปอ่านบล็อกที่แล้วซะดีๆ)

มันก็คือการลากคลุมเป็น block นั่นเอง แต่ยังไม่เสร็จเราต้องการใส่คำว่า public เข้าไปข้างหน้าอีก key ที่ต้องใช้ต้อไปคือ

I ไงหละ

แล้วก็พิมพ์ public, private หรือ ข้อความตามที่เราต้องการได้เลย แล้วก็กด <esc> ดูผลอันสวยงานของความสามารถ vim plugin

[สรุป pattern]

<ctrl+v> + <ลากคลุม> + I + <พิมพ์ข้อความ> + esc

ประยุกต์กับ command อื่นก็ได้

<ctrl+v> + <ลากคลุม ตามบรรทัดที่ต้องการ> + d ก็ลบได้แล้ว

โจทย์สาม เราต้องเปลี่ยนชื่อตัวแปร

ใช้ key ที่เคยพูดมาอีกแล้วครับไม่ใหม่อะไร

f + <ตัวอักษรที่เราต้องการจะหา>

ถ้ามันไปเจอตัวก่อนหน้าให้กด “ ; ” เพื่อหาซ้ำไปเรื่อยๆ

ถ้าใครสังเกต เราจะใช้ w กับ W กดไปเรื่อยๆก็ได้ แต่คุณต้องจำทั้ง eE bB เพราะมันเป็นคู่กัน ซึ่งจริงๆแล้ว ใช่ f กับ F แทนไปเลยก็ได้จำทีเดียวใช้ได้เหมือน wW eE bB เลยครับ แถมยืดหยุ่นได้มากกว่าด้วย

f + spacebar ก็ได้เหมือน w ละ

อยากได้แบบ b

ก็แค่ F + spacebar

แค่นี้เราก็ไม่ต้องจำ w W e E b B นี่แหละครับความสนุกสนานของ vim แล้วแต่คนจะประยุกต์ใช้ :)

โจทย์สี่ เราต้องการใส่ “ ” ให้กับคำต่างๆ

ซึ่งวิธีนี้เราเรียกกันว่า Vim surround

หลักการเดิมครับก่อนอื่น viw เพื่อลากคลุมทั้งคำก่อนตามด้วย

S (กด shift ด้วยนะ)

pattern เลยเป็นอย่างนี้ครับ

viw + S + ” = surround with “

วิธีลบ “ ” ออกก็ง่ายเช่นกัน

 d + s + ” = delete surround “

เราสามารถ surround ด้วยอย่างอื่นก็ได้ เช่น < ( [ {

[สรุป pattern]

<ลากคลุม> + S + < ( { [ “

d + s + < ( { [ “]

จะเห็นว่าเราก็ใช้ key วนกันซ้ำๆอย่างนี้แหละครับ เราถึงบอกจริงๆใช้กันอยู่ไม่กี่ key

เราเลยทำ pdf ไว้ให้สำหรับ Print แปะกำแพงไว้ดู key ที่สำคัญๆเวลาจำไม่ได้

https://github.com/TheKhaeng/vim-plugin-key

ขอจบบล็อกนี้ไว้แค่นี้ก่อนครับ น่าจะไปกระตุ้นต่อมอยากใช้ vim อยู่บ้างนะ มีความ Geek ขึ้นมาทันที 😎

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

วันนี้คงไว้เท่านี้เจอกันบล็อกหน้าครับ

อย่าลืม share ให้มนุษย์ Vim คนอื่นด้วยหละ 😎

KNOWLEDGE

Nonthawit

CEO | Engineer | Designer

เข้าใจการทำ Selector แบบ Ripple effect

20 สิ่ง ที่ได้หลังจากเป็น Android developer ที่ Nextzy 3 เดือน

Nonthawit

CEO | Engineer | Designer

20 สิ่ง ที่ได้หลังจากเป็น Android developer ที่ Nextzy 3 เดือน

บทความนี้แชร์ประสบการณ์ 3 เดือนแรกของการทำงานเป็น Android Developer ที่ Nextzy ครอบคลุมทั้งด้าน technical เช่น MVP architecture, Android Lifecycle, ProGuard, Git workflow และการเขียน Unit Test รวมถึงด้าน soft skill อย่างการสื่อสารกับทีม, การแชร์ความรู้, และการเขียนโค้ดให้ readable และยืดหยุ่น นอกจากนี้ยังสะท้อนวัฒนธรรมองค์กรที่เน้นทีมเวิร์ค การ review โค้ด และบรรยากาศการทำงานที่สนุกสนาน ซึ่งล้วนช่วยลด learning curve และพัฒนาทักษะได้เร็วกว่าการเรียนรู้คนเดียว