หันมาหัด vim (plugin) กันเถอะ「 Part 3」
บล็อกนี้สอนวิธีติดตั้งและ custom key ของ Vim Plugin ใน 3 editor หลัก ได้แก่ Android Studio (IdeaVim + .ideavimrc), Atom (vim-mode + แก้ไฟล์ init.coffee/keymap.cson) และ VSCode (Vim extension + settings.json) แนวคิดการ map ปุ่มแนะนำให้ผูกกับ h j k l เป็นหลักเพื่อให้จำง่าย เช่น สลับ tab, เปลี่ยน window, หรือเปิดไฟล์ต่างๆ ลง config ครั้งเดียวแล้วใช้ได้ตลอดเพื่อเพิ่มความเร็วในการทำงานอย่างยั่งยืน
Share:
Table of contents
Nonthawit
CEO | Engineer | Designer
VIEW
1,826
CATEGORY
LAST UPDATED
December 2, 2016
Nonthawit
CEO | Engineer | Designer
VIEW
1,826
CATEGORY
LAST UPDATED
December 2, 2016
จากบล็อกที่แล้วเราสอนตัวอย่างการใช้งาน vim ในรูปต่างๆที่จำเป็นในการใช้จริงเรียบร้อย ใครที่ยังไม่อ่านแนะนำให้ไปอ่าน Part 1 Part 2 ก่อนนะครับ 😀
วันนี้เราจะมาสอนวิธีลงและวิธี custom key ให้เป็นแบบฉบับของเราเอง เพื่อใช้งานจริงกับ Android studio ,Atom editor และ VScode บวกกับเพื่อไว้เป็นแนวทางให้ผู้อ่านนำไปต่อยอดกับ Ide/editor ของตัวเองได้ด้วย
Android Studio
Install IdeaVim plugin
Preference > plugins > Browse repositories > พิมพ์ “IdealVim” > กด install
ง่ายดายมากครับ แล้วก็ restart Android studio หนึ่งรอบก็ใช้งานได้แล้ว
พอเข้ามาใหม่ ไปที่ tab “ Tools ” เพื่อดูว่า Vim plugin ถูก enable ไว้หรือยัง
วีธีการ Custom key
Idealvim ใช้ไฟล์ .ideavimrc ในการ custom key ต่างๆโดยเราจะสร้างไฟล์นี้ขึ้นมาที่
window path: C:/Users/<user name>/.ideavimrc
mac path: ~/.ideavimrc
nmap/imap/set/… เป็น syntax ของทาง vim สามารถไปหาศึกษาเพิ่มเติมได้ครับ
:action … เป็น command ของทาง idealvim ที่เตรียมไว้ให้ มีไว้เพื่อ map ระหว่าง command ของ idealvim กับ command ของ Android Studio อีกทีหนึ่ง
อยากรู้ว่ามีอะไรให้เราเล่นบ้าง เปิด Android studio
พิมพ์ :actionlist + enter
อ่านเพิ่มเติมได้ที่ : https://github.com/JetBrains/ideavim
Atom editor
Install Vim plugin
เนื่องจาก atom ไม่ได้ใช้ idealvim เหมือน android studio วิธี install/custom key จึงต่างออกไป (ของ editor อื่นก็เช่นกัน)
ไปที่ Preference/Setting > Install > พิมพ์ plugin ที่ต้องลง
หลักๆมีทั้งหมดต้องลงตามนี้ เพื่อให้สะดวกในการใช้งานจริงๆ
vim-mode
vim-mode-plus-ex-mode
vim-mode-visual-block
vim-mode-zz
vim-surround
Custom key
ต้องไปแก้ 2 ไฟล์ ด้วยกันคือ init.coffee และ keymap.cson
window path: C:/Users/<user name>/.atom/…
mac path: ~/.atom/…
code ข้างบนเป็นต้วอย่างการ map key ของ atom ครับ โดยเราต้องการต้องการกด
<ctrl+j> ให้เลื่อน cursor ลงมา 5 บรรทัด
<ctrl+k> ให้เลื่อน cursor ขึ้นไป 5 บรรทัด
ไว้กดรัวๆแทนการ scroll mouse ครับ
ส่วนไฟล์ keymap.cson จะมีวีธี map ตามนี้
<key ที่ต้องการ map>: <action>
ถ้าอยากรู้ว่า atom มี <action> อะไรให้เราเล่นบ้าง
ไปที่ atom editor > setting > Keybidings
Tip : สำหรับ atom แนะนำให้ลง plugin
https://atom.io/packages/sync-settings ไว้เพื่อ sync setting ต่างๆไว้ที่ github ไม่ต้องกลัว setting หายหรือต้อง config ใหม่อีกต่อไป
Vistual Studio Code
Install Vim plugin
ไปที่ Extension ของ VScode แล้วพิมพ์คำว่า “ vim” แล้วกด Install เลยแค่นี้ก็สามารถใช้ vim ได้แล้วง่ายมากๆ
Custom key
ไปแก้ไขไฟล์ “setting.json” ได้เลย
แค่นี้ VScode เราก็สามารถ custom key ให้เป็นแบบฉบับของเราได้แล้ว
ไอเดียการ map ปุ่ม
จะสังเกตุไฟล์ตัวอย่างส่วนใหญ่เราจะ map ปุ่มกับ h j k l เพื่อง่ายต่อการจำครับ อาจจะงงลองดูตัวอย่างที่เราใช้จริงอยู่ไว้เป็นแนวทาง
การสลับ tap
shift + h/l
การสลับ window ขึ้น/ลง/ซ้าน/ขวา ไปมา
shift + w + h/j/k/l
เปิด File project
‘ + f
เปิด android monitor
‘ + an
และอีกเยอะที่เราสามารถทำได้
สรุป
อะไรที่เราคิดว่าใช้ๆบ่อยๆ หรือต้องเปิดเป็นกิจวัตใช้ vim ไป map นะครับเพื่อชีวิตที่รวดเร็วในการทำงาน เสียเวลา config ครั้งเดียวใช้ไปตลอดชีพ
อย่าลืมกันนะครับ
Life is short, You should use vim.
อย่าลืม share ให้มนุษย์ Vimคนอื่นด้วยหละ 😎
Share:
KNOWLEDGE
Related Articles
Nonthawit
CEO | Engineer | Designer
เข้าใจการทำ Selector แบบ Ripple effect
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 และพัฒนาทักษะได้เร็วกว่าการเรียนรู้คนเดียว
![[Tip/Trick] วิธีติดต่อกับ WebView ผ่าน JavascriptInterface มันเท่มาก](https://image.nextzy.tech/1_Aleix_TFC_7yz_Qh_Q_Sx_GV_Rqxw_a29e28219a.png)
Nonthawit
CEO | Engineer | Designer
[Tip/Trick] วิธีติดต่อกับ WebView ผ่าน JavascriptInterface มันเท่มาก
