(Vim) Text Editor เก่า แต่ เก๋า #4 : Plugins and Advance config

สารบัญ

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

เรามาต่อกันที่ Plugins ที่ผมอยากแนะนำนะครับ

ก่อนอื่นเลย Vim มีตัวจัดการ Plugins หลากหลายตัวครับ เราจำเป็นต้องลงก่อน ซึ่ง 1 ในนั้นที่ผมอยากแนะนำคือ Pathogen (เจ้าตัวนี้ จะใช้วิธี โหลด Plugins ไว้ใน โฟเดอร์
  • Window: C:\Users\{username}\vimfiles\bundle\
  • Linux ~/.vim/bundle/

เอาหละครับวิธีการโหลดก็คือ

เข้าไปที่ https://github.com/tpope/vim-pathogen

ซึ่งมันจะมีวิธีลงซึ่งถ้าใครงงก็ทำตามผมก็ได้ครับ

Window

ไปที่ C:\Users\{username}\ แล้วคลิกขวา เลือก Git Bash Here (ที่ผมสอนลง ตอนที่แล้ว) แล้วพิม สองคำสั่งนี้ครับ

  1. สร้างโฟเดอร์ชื่อ autoload และ bundle ในโฟเดอร์ vimfiles ครับ
  2. โหลดไฟล์ ไปที่ โฟเดอร์ autoload/pathogen
mkdir -p ~/vimfiles/autoload ~/vimfiles/bundle
curl -LSso ~/vimfiles/autoload/pathogen.vim https://tpo.pe/pathogen.vim

Linux

เปิด Terminal แล้วพิม

mkdir -p ~/.vim/autoload ~/.vim/bundle
curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

เป็นอันเรียบร้อย

ทีนี้ เราเปิด .vimrc ขึ้นมาแล้วเราจะสั่งให้ ตัวจัดการ Plugins ทำงาน

  • execute pathogen#infect()
  • filetype plugin indent on
เพียงเท่านี้เราก็พร้อมจะไปโหลด Plugin แล้ว

Plugins

อ่านก่อนนะครับ

Vim จะมีปุ่มพิเศษ ซึ่งเรียกว่า <leader> key ซึ่งเราจะต้องใช้ key นี้ในบาง plugin ผมอยากแนะนำให้ ตั้ง key นี้ในคีย์ที่ถนัด และจะต้องไม่ซ้ำกับ key พื้นฐานด้วย ผมแนะนำให้ตั้งที่ ปุ่ม , หรือ spacebar โดยใส่ คำสั่งนี้ใน .vimrc

สำหรับปุ่ม spacebar
let mapleader=" "
สำหรับปุ่ม ,
let mapleader=","
ผมถนัดใช้ ปุ่ม ,
ก่อนอื่นเลยก่อนจะโหลด Plugin ให้ทำตามนี้ก่อนนะครับ

Window

ไปที่ C:\Users\{username}\vimfiles\bundle แล้วคลิกขวา Git Bash Here

Linux

เปิด Terminal แล้ว cd ~/.vim/bundle

แล้วพิมคำสั่งตาม วิธีโหลดลงไปเลย ทุก Plugin เมื่อโหลดแล้ว สังเกตุได้จะต้องมี โฟเดอร์ Plugins นั้นๆใน
C:\Users\{username}\vimfiles\bundle\{plugin folder}
หรือ
~/.vim/bundle/{plugin folder}

ลุย!!

1. Airline → https://github.com/vim-airline/vim-airline

ใช้แสดง สถานะไฟล์ และ ตกแต่ง Tab bar and bottom bar (ทำให้สังเกตุโหมดง่ายขึ้นด้วย)

วิธีโหลด

git clone https://github.com/vim-airline/vim-airline

วิธี Config (.vimrc)

let g:airline#extensions#tabline#enabled = 1
set laststatus=2

2. Autopair → https://github.com/jiangmiao/auto-pairs

ใช้สำหรับ เติมพวก สัญลักษณ์ปิดให้ อัตโนมัติ เช่น () {} [] เป็นต้น

วิธีโหลด

git clone https://github.com/jiangmiao/auto-pairs
แค่พิม ( ก็จะเติม ) ให้เอง, หรือพิม { ก็จะเติม } ให้เอง

3. Closetag → https://github.com/alvan/vim-closetag

สำหรับสาย เว็บ เป็นการใส่ Auto close tag ให้อัตโนมัตินั้นเอง

วิธีโหลด

git clone https://github.com/alvan/vim-closetag

วิธี Config (.vimrc)

let g:closetag_filenames = "*.html,*.xhtml,*.phtml, *.xml, *.php"

4. Emmet → https://github.com/mattn/emmet-vim

สำหรับสาย เว็บ อีกแล้ว ลองเข้าไปดูรายละเอียดครับ เป็นการ Auto ที่ดีมากๆเลยทีเดียว วิธีใช้มีหลากหลาย ในลิ้งเลยครับ

วิธีโหลด

git clone https://github.com/mattn/emmet-vim
เพียงแค่พิม html:5 แล้วกด Ctrl → y → ,

5. Nerdtree → https://github.com/scrooloose/nerdtree

ใช้สำหรับ ดู Directory Tree ซึ่ง แรกๆอาจจะใช้ยากหน่อย ต้องจำคีย์จัด แต่ ประสิทธิภาพสูงมากๆ ถ้าผ่าน Learning Curve แล้ว

วิธีโหลด

git clone https://github.com/scrooloose/nerdtree

วิธี Config (.vimrc)

map <C-n> :NERDTreeToggle<CR> //ทำให้กด Ctrl + n เพื่อเปิด-ปิด Nerdtree
Nerdtree นับเป็นการ split จออย่างนึง สามารถกด Ctrl → w → h,j,k,l เพื่อย้าย Cursor ไป split view อื่นๆได้

6. Easy Motion → https://github.com/easymotion/vim-easymotion

ใช้สำหรับ กระโดดไปหา ตัวอักษรต่างๆ ได้ทันที (ใช้คล่องที่จะทำให้ Cursor บินไปมาเลยทีเดียว ทีเด็ดของ vim เลย)

วิธีโหลด

git clone https://github.com/easymotion/vim-easymotion

วิธี Config (.vimrc)

let g:EasyMotion_do_mapping = 0
let g:EasyMotion_smartcase = 1
let g:EasyMotion_startofline = 0 
map <Leader>f <Plug>(easymotion-bd-f)
nmap <Leader>f <Plug>(easymotion-overwin-f)
<leader> คือ ปุ่มที่เราตั้งไว้ตอนแรก (ข้างบนที่ผมสอนตั้ง)
เทคนิคเล็กน้อย Easy Motion สามารถใช้คู่กับ การ cut, copy ได้นะครับด้วยการ กด d <leader>f แล้วตามด้วยตัวที่อยากจะให้กระโดดไปได้เลยครับ
ขอจบไว้เท่านี้ก่อนนะครับ
นอกจากนี้ ยังมี Plugin เจ่งๆ พวก auto complete ด้วยนะครับ ซึ่งต้องใช้ความสามารถและกึ๋นของเราในการ config ครับ

ลองดู Plugin ต่างๆได้ที่

http://vimawesome.com

Part 3