เมื่อก่อนผมใช้ vi เพราะมันใช้ทำงานบน remote server ได้ง่าย หรือถ้าใช้กับเครื่องตัวเองก็จะใช้ จะใช้ Vim เฉพาะกับไฟล์เดี่ยวๆ โดยเฉพาะกับไฟล์ใหญ่ๆ ที่เปิดบน IDE ตัวอื่นๆ แล้วมันตาย
ตอนนี้ไม่มีปัญหานั้นแล้ว และเราสามารถใช้งานคีย์ลัดต่างๆ บน VSCode ได้ด้วย Plugin VScodeVim ซึ่งทำงานได้ดีมาก หลบพวกคีย์ที่มันทับกันได้ดีเรียกได้ทุกอย่างที่ต้องการ (ใครที่ใช้บน Mac อย่าลืมไปสั่งให้เครื่องรองรับการกดคีย์ค้างไว้ด้วย วิธีการมีบอกไว้ในหน้า Plugin อยู่แล้ว)
😓 ถึงมีครบแล้วแต่มันก็รู้สึกไม่ฟินเหมือนใช้ vi วันนี้เลยลองพยายามเอาของที่ชอบบน VScode มาใส่บน Vim ดู
อันดับแรกทำให้ Code มันมีสีก่อน โดยการใส่ “syntax on” ไว้ที่ไฟล์ ~/.vimrc
อันดับสองก็ติดตั้งตัว Plugin Management ของ Vim ก่อน โดยผมเลือกตัว Vim-Plug ใครที่ใช้ Mac สามารถใช้คำสั่งนี้ในการติดตั้งได้เลย
จากนั้นก็มาใส่รายชื่อ Plugin ที่ต้องการลงไปในไฟล์เดิม ~/.vimrc
กลับเข้าไปที่ vim แล้วสั่ง “:PlugInstall” ตัว installer จะแสดงขึ้นมาทางซ้ายเอง เมื่อทุกอย่างติดตั้งเรียบร้อย ก็ปิดไปได้เลย
เราติดตั้ง Plugin อะไรไปบ้าง เดี๋ยวมาลองดูกัน
File Explorer “NERDTree”
เป็นไฟล์ Explorer ที่อยู่ด้านซ้ายมือครับ เอาไว้เปิดไฟล์ดูตาม Folder ต่างๆ บรรทัดที่ใช้ติดตั้งคือ
Plug 'preservim/nerdtree'ส่วนบรรทัดที่ใช้กำหนดพฤติกรรมของ NERDTree ผมจะใส่ไปสองตัวด้านล่างครับ
ชุดแรกเป็นตัวที่ผมขัดใจคือต้องคอยเปิด NERDTree ทุกครั้งที่เข้า Project แต่จะให้มันเปิดทุกครั้งก็ไม่ใช่เพราะบางทีเราเปิดแค่ไฟล์เดียว ก็ไม่ได้อยากให้มันขึ้นมา ก็เลยตั้งให้มันเปิดทุกครั้งที่เราเรียก vim เฉยๆ โดยไม่กำหนดไฟล์
ชุดที่สอง คือผมอยากไม่อยากต้องคอยปิด NERDTree ทุกครั้งที่จะออกจาก vim เลยกำหนดให้มันปิด NERDTree อัตโนมัติเมื่อผมปิดไฟล์สุดท้ายบนหน้าจอ
เรียกไฟล์ด่วน ด้วย ctrl-p
ตอนที่ใช้ vscode เราจะมาเปิดไฟล์ด้วย File Explorer บ่อยๆ แต่พอใช้ vim การเลือกไฟล์มันไม่สะดวกขนาดนั้น ตัว NERDTree เลย เอาไว้เป็น reference เฉยๆ แต่ตอนเปิดจริงจะใช้ “ctrl-p” เอา (ใน vscode ก็มี ctrl-p)
Plug ‘ctrlpvim/ctrlp.vim’ใน vi พอเรากด ctrl-p มันก็จะให้เรา search ไฟล์ โดยพิมพ์แค่ส่วนหนึ่งของชื่อไฟล์ก็พอ
Svelte
บังเอิญช่วงนี้พยายามเขียน svelte อยู่เลยลง plugin ตัวนี้ไว้ด้วย
Plug 'othree/html5.vim'
Plug 'pangloss/vim-javascript'
Plug 'evanleck/vim-svelte', {'branch': 'main'}มันจะได้ทำ syntax hilight ให้ไฟล์ svelte ได้อย่างถูกต้อง
Multi cursor
การแยกร่าง cursor ได้มันทำให้การ refactor code ง่ายขึ้นมากๆ แม้ว่าตัว vim มันจะพอทำได้แต่มันก็เห็นไม่ชัด เลยกำลังลอง plugin ตัวนี้ดูครับ
Plug 'mg979/vim-visual-multi', {'branch': 'master'}การเปิดหลายหน้าจอ Multi viewports
อันนี้ไม่ต้องลง plugin ใดๆ มันมากับ vim อยู่แล้วครับ ให้จำง่ายๆ ว่าคำสั่งหลักที่ใช้เริ่มต้นทุกอย่างคือ “ctrl-w” แล้วคำสั่งอื่นๆ ก็กดตามหลังได้เลย ซึ่งผมจำแค่สองสามตัวครับ
ctrl-w + s : ใช้แยกหน้าต่างขึ้นมาเพิ่มทางด้านขวา
ctrl-w + w : ใช้สลับไปหน้าต่างอื่นแบบเร็วๆ
ctrl-w + (j, k, h, l) : ใช้กระโดดไปหน้าต่างอื่นแบบมีทิศทาง
ctrl-w + = : ทำให้หน้าต่างมันมีขนาดเท่ากัน
มีเพิ่มเติมอีกนิดคือถ้าอยากให้มันแยกหน้าแนวตั้งสามารถสั่ง “:vsp” ได้ครับ น่าจะย่อมาจาก verticl split ส่วนถ้าสั่ง “:sp” เฉยๆ ก็จะเหมือนสั่ง “ctrl-w + s” ครับ
🍭 สำหรับใครที่ใหม่กับ vim อยากแนะนำให้ลองเล่น Vim Tutorial ดูครับ โดยพิมพ์คำว่า “vimtutor” ใน terminal ได้เลย แล้วมันจะเปิด tutorial ขึ้นมาให้เราค่อยๆ ฝึกไปที่ละคำสั่ง ช่วยให้จำได้ง่ายขึ้นมากครับ
สุดท้ายยังมีหลายอย่างที่ผมใช้ใน vscode แต่ยังเอาใส่ใน vim แบบนวลๆ ไม่ได้ อย่างเช่น การแก้แบบ multi cursor ตอนนี้ยังทำให้มันเลือกตัวที่เหมือนกัน แล้วแก้ทีเดียวไม่ได้ หรือพวก auto complete ก็ยังหา solution สวยๆ ไม่ได้เหมือนกัน
ถ้าใครใช้งาน vim อยู่ฝากชี้แนะด้วยครับ 🙇♂️
