มีนส์บล็อก

สีที่ใช้

#84e309

#0984e3

#e30984

Developer Playground: Colorize VIM

Colorize VIM

ตกแต่ง VIM Editor ให้ดู Colorize ด้วย VIM Plug และมันยังมีประโยชน์ต่อการเขียนโค้ดด้วย เพราะมันจะแสดงข้อมูลที่สำคัญบริเวณขอบล่างของหน้าจอ

หน้าตาของ VIM ก่อนจะติดตั้ง VIM Plug เป็นรูปซ้ายมือครับ ส่วนขวามือเป็น VIM ที่ติดตั้ง VIM Plug แล้ว

Left ImageRight Image

VIM Version

ลองใช้คำสั่ง

vim --version
❯ vim --version
VIM - Vi IMproved 8.1 (2018 May 18, compiled Jun 15 2019 16:41:15)
Included patches: 1-875, 878, 884, 948, 1046, 1365-1368, 1382, 1401
Modified by [email protected]
Compiled by [email protected]
Huge version without GUI.  Features included (+) or not (-):
+acl               +extra_search      +mouse_netterm     +tag_old_static
+arabic            +farsi             +mouse_sgr         -tag_any_white
+autocmd           +file_in_path      -mouse_sysmouse    -tcl
+autochdir         +find_in_path      +mouse_urxvt       +termguicolors
-autoservername    +float             +mouse_xterm       +terminal
-balloon_eval      +folding           +multi_byte        +terminfo
+balloon_eval_term -footer            +multi_lang        +termresponse
-browse            +fork()            -mzscheme          +textobjects
++builtin_terms    +gettext           +netbeans_intg     +textprop
+byte_offset       -hangul_input      +num64             +timers
+channel           +iconv             +packages          +title
+cindent           +insert_expand     +path_extra        -toolbar
-clientserver      +job               -perl              +user_commands
-clipboard         +jumplist          +persistent_undo   +vartabs
+cmdline_compl     +keymap            +postscript        +vertsplit
+cmdline_hist      +lambda            +printer           +virtualedit
+cmdline_info      +langmap           +profile           +visual
+comments          +libcall           -python            +visualextra
+conceal           +linebreak         -python3           +viminfo
+cryptv            +lispindent        +quickfix          +vreplace
+cscope            +listcmds          +reltime           +wildignore
+cursorbind        +localmap          +rightleft         +wildmenu
+cursorshape       -lua               -ruby              +windows
+dialog_con        +menu              +scrollbind        +writebackup
+diff              +mksession         +signs             -X11
+digraphs          +modify_fname      +smartindent       -xfontset
-dnd               +mouse             +startuptime       -xim
-ebcdic            -mouseshape        +statusline        -xpm
+emacs_tags        +mouse_dec         -sun_workshop      -xsmp
+eval              +mouse_gpm         +syntax            -xterm_clipboard
+ex_extra          -mouse_jsbterm     +tag_binary        -xterm_save
   system vimrc file: "$VIM/vimrc"
     user vimrc file: "$HOME/.vimrc"
 2nd user vimrc file: "~/.vim/vimrc"
      user exrc file: "$HOME/.exrc"
       defaults file: "$VIMRUNTIME/defaults.vim"
  fall-back for $VIM: "/usr/share/vim"
Compilation: gcc -c -I. -Iproto -DHAVE_CONFIG_H   -Wdate-time  -g -O2 -fdebug-prefix-map=/build/vim-4Pursk/vim-8.1.0875=. -fstack-protector-strong -Wformat -Werror=format-security -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=1       
Linking: gcc   -Wl,-z,relro -Wl,-z,now -Wl,--as-needed -o vim        -lm -ltinfo -lnsl  -lselinux -lacl -lattr -lgpm -ldl

เห็นเขาโน๊ตข้างล่างเอาไว้ว่า

user vimrc file: "$HOME/.vimrc"
2nd user vimrc file: "~/.vim/vimrc"

พอดีผมจะติดตั้ง vim-plug บนบัญชี manotlj ไม่ใช่บัญชี admin นะครับ ผมคิดว่าผมน่าจะเป็น 2nd user ดังนั้นผมจะเก็บไฟล์ vimrc ไว้ตามบรรทัดที่ 2 คือ “~/.vim/vimrc”

สร้างโฟลเดอร์ .vim

สร้างโฟลเดอร์ .vim ตรง “/home/<your-user-name>/” หรือ ใช้คำสั่งนี้ครับ

cd ~
mkdir .vim

เข้าไปในโฟลเดอร์ .vim แล้วสร้างโฟลเดอร์ autoload

cd .vim
mkdir autoload

ติดตั้ง VIM Plug

ดาวน์โหลดไฟล์ plug.vim จาก vim-plug มาเก็บไว้ที่โฟลเดอร์ autoload

cd autoload
wget https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
❯ cd autoload
❯ wget https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
--2021-08-26 00:44:38--  https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
Resolving raw.githubusercontent.com (raw.githubusercontent.com)... 185.199.110.133, 185.199.111.133, 185.199.108.133, ...
Connecting to raw.githubusercontent.com (raw.githubusercontent.com)|185.199.110.133|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 82679 (81K) [text/plain]
Saving to: ‘plug.vim’

plug.vim                                  100%[===================================================================================>]  80.74K  --.-KB/s    in 0.002s  

2021-08-26 00:44:38 (37.2 MB/s) - ‘plug.vim’ saved [82679/82679]

❯ ls
plug.vim

หรือใช้คำสั่งนี้ครับ

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
❯ curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 82679  100 82679    0     0   262k      0 --:--:-- --:--:-- --:--:--  263k

เครื่องจะสร้างโฟลเดอร์ .vim และโฟลเดอร์ autoload ให้พร้อมกับดาวน์โหลดไฟล์ plug.vim ในคำสั่งเดียว

สร้างไฟล์ vimrc

ให้เข้าไปที่โฟลเดอร์ .vim สร้างไฟล์ vimrc

touch ~/.vim/vimrc

แล้วคัดลอกโค้ดนี้เข้าไปครับ

" Specify a directory for plugins
" - For Neovim: stdpath('data') . '/plugged'
" - Avoid using standard Vim directory names like 'plugin'
call plug#begin('~/.vim/plugged')

" Make sure you use single quotes

" Shorthand notation; fetches https://github.com/junegunn/vim-easy-align
Plug 'junegunn/vim-easy-align'

" Any valid git URL is allowed
Plug 'https://github.com/junegunn/vim-github-dashboard.git'

" Multiple Plug commands can be written in a single line using | separators
Plug 'SirVer/ultisnips' | Plug 'honza/vim-snippets'

" On-demand loading
Plug 'scrooloose/nerdtree', { 'on':  'NERDTreeToggle' }
Plug 'tpope/vim-fireplace', { 'for': 'clojure' }

" Using a non-default branch
Plug 'rdnetto/YCM-Generator', { 'branch': 'stable' }

" Using a tagged release; wildcard allowed (requires git 1.9.2 or above)
Plug 'fatih/vim-go', { 'tag': '*' }

" Plugin options
Plug 'nsf/gocode', { 'tag': 'v.20150303', 'rtp': 'vim' }

" Plugin outside ~/.vim/plugged with post-update hook
Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }

" Unmanaged plugin (manually installed and updated)
Plug '~/my-prototype-plugin'

" manotlj add
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'
Plug 'chrisbra/csv.vim'

" Initialize plugin system
call plug#end()

หรือใช้คำสั่ง

cd ~/.vim
wget https://gist.githubusercontent.com/ManotLuijiu/e7b7e6b21d89ceae8bcc0006361a7ad7/raw/9ee6936d81726dc4cfe31632c019e8757248b326/vimrc
❯ cd ~/.vim
wget https://gist.githubusercontent.com/ManotLuijiu/e7b7e6b21d89ceae8bcc0006361a7ad7/raw/9ee6936d81726dc4cfe31632c019e8757248b326/vimrc
--2021-08-27 23:00:57--  https://gist.githubusercontent.com/ManotLuijiu/e7b7e6b21d89ceae8bcc0006361a7ad7/raw/9ee6936d81726dc4cfe31632c019e8757248b326/vimrc
Resolving gist.githubusercontent.com (gist.githubusercontent.com)... 185.199.109.133, 185.199.110.133, 185.199.111.133, ...
Connecting to gist.githubusercontent.com (gist.githubusercontent.com)|185.199.109.133|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 1281 (1.3K) [text/plain]
Saving to: ‘vimrc’

vimrc                            100%[==========================================================>]   1.25K  --.-KB/s    in 0s      

2021-08-27 23:00:58 (48.2 MB/s) - ‘vimrc’ saved [1281/1281]

ติดตั้งปลั๊กอิน

เปิดไฟล์ vimrc ด้วยคำสั่ง

vim ~/.vim/vimrc

ตอนนี้เรากำลังเปิดไฟล์ vimrc ด้วย Vim Editor อยู่นะครับ ต่อไปให้พิมพ์เครื่องหมายโคลอน : แล้วตามด้วยคำว่า source % เสร็จแล้วกดปุ่ม Enter เพื่อเป็นการ reload vimrc ครับ

:source %
source command
source command

แล้วตามด้วยอีกคำสั่งครับ เครื่องหมายโคลอน แล้วตามด้วยคำว่า PlugInstall

:PlugInstall
PlugInstall command
PlugInstall command

จะได้หน้าจอนี้ขึ้นมาครับ หน้าจอนี้แสดงว่าเพิ่งติดตั้ง vim-plug ครั้งแรก

Finishing PlugInstall
Finishing PlugInstall

ในกรณีอัพเดทจะได้หน้าจอนี้

ให้พิมพ์โคลอน แล้วตามด้วย q

:q

พิมพ์คำสั่งเดิมซ้ำอีกครั้ง เพื่อออกไปที่ Terminal

:q
Second :q command
Second :q command

fuzzy finder

เมื่อกลับมาที่ Terminal จะเห็นล็อกไฟล์แสดงการติดตั้ง fzf ซึ่งมันทำงานตามโค้ดด้านล่างนี้ ในไฟล์ vimrc ครับ

Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Downloading bin/fzf ...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   635  100   635    0     0   2043      0 --:--:-- --:--:-- --:--:--  2048
100 1058k  100 1058k    0     0  1641k      0 --:--:-- --:--:-- --:--:-- 8143k
  - Checking fzf executable ... 0.27.2

Generate /home/manotlj/.fzf.bash ... OK
Generate /home/manotlj/.fzf.zsh ... OK

Update /home/manotlj/.bashrc:
  - [ -f ~/.fzf.bash ] && source ~/.fzf.bash
    + Added

Update /home/manotlj/.zshrc:
  - [ -f ~/.fzf.zsh ] && source ~/.fzf.zsh
    + Added

Finished. Restart your shell or reload config file.
   source ~/.bashrc  # bash
   source ~/.zshrc   # zsh

Use uninstall script to remove fzf.

For more information, see: https://github.com/junegunn/fzf
vim-plug logs
vim-plug logs

***ก่อนใช้งาน fuzzy finder ให้ reload shell ก่อนครับ

source ~/.zshrc
// or
source ~/.bashrc

หลังจากนี้สามารถใช้งาน VIM ในหน้าตาแบบใหม่ได้เลยครับ

Colorize VIM
Colorize VIM

หมายเหตุ

สำหรับบางคนที่มีปัญหาเรื่อง fonts ไม่ค่อยสวย อาจต้องติดตั้ง powerline-fonts

sudo apt install powerline fonts-powerline
❯ sudo apt install powerline fonts-powerline
[sudo] password for manotlj: 
Reading package lists... Done
Building dependency tree       
Reading state information... Done
fonts-powerline is already the newest version (2.7-2).
powerline is already the newest version (2.7-2).
0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.

สรุป

ขั้นตอนการทำให้ Vim ดู Colorize น่าใช้งาน

  1. สร้างโฟลเดอร์ .vim
  2. ติดตั้ง vim-plug
  3. สร้างไฟล์ vimrc
  4. เปิดไฟล์ vimrc ด้วย Vim
  5. พิมพ์คำสั่ง :source % ใน Vim
  6. พิมพ์คำสั่ง :PlugInstall ใน Vim

นอกจาก Vim แล้ว ก็ยังมี Nano ที่สามารถตกแต่งให้ดู Colorize ได้เหมือนกัน

เอกสารอ้างอิง

สมัครรับบทความ

ท่านจะได้รับบทความเกี่ยวกับเทคนิคในการเขียนโค้ด การสร้างเว็บไซต์ ความรู้ด้านบัญชี ภาษีอากร และอื่นๆ

0 0 votes
ให้คะแนนบทความ
Notify of
guest
0 ความเห็นทั้งหมด
Inline Feedbacks
ดูความเห็นทั้งหมด

บทความแนะนำ

Flask Python framework โดย สรุป

Flask Python framework + Emmet

สรุป วิธีสร้างเว็บไซต์ด้วยภาษา Python โดยใช้ Flask framework และ การตั้งค่า VSCode เพื่อให้สามารถใช้ Emmet ร่วมกับ Flask framework ได้

Redis บน Debian AWS EC2

Redis บน Debian AWS EC2

ติดตั้ง Redis แบบ Manual บน ระบบปฏิบัติการ Debian ที่อยู่บน EC2 ของ AWS Cloud จะช่วยให้การปรับแต่ง Redis เช่น การเพิ่มพอร์ต ทำได้ง่ายขึ้น

Debian บน AWS EC2

Debian บน AWS EC2

วิธีติดตั้งระบบปฏิบัติการ Debian บน AWS EC2 วิธีการเชื่อมต่อผ่าน SSH บน VSCode การเพิ่ม Super User เข้าไปในกลุ่ม sudo และตกแต่งด้วย Oh-My-Zsh

0
แสดงความเห็นได้นะx
()
x
Scroll to Top
Share on facebook
Share on twitter
Share on linkedin