vimmer。
エンジニアを志す者なら一度は憧れるはず。
何度か練習したり本を読んでチャレンジしましたが、結局定着せずにVSCodeに出戻り・・・。
試しにvimで開発してみたいけど、始める前からvimrcとか面倒くさい設定は勘弁してほしい・・・。
これからvimで開発してみたい、やってみたけど挫折した・・というエンジニアに向けてカスタマイズ内容を紹介します。
カスタマイズ内容
カスタマイズ後は👇の様になります。
![vim-tmux-prezto.png]()
画面分割をして下記のように使い分けています。
- 上部 : vim
- 下左部 : git関連
- 下右部 : コンソール操作（ログを流したり）
※今回の一番のこだわりは画面最下部のtmuxステータスバーの設定(^^)
対象者
- これからvimで開発したい
- 自分でカスタマイズ方法調べるのは面倒くさい
- とにかくカッコよくてオシャレな開発環境がいい
経緯
- 何度かvimチャレンジしたけど、結局VSCodeに戻る
- VSCode使ってたけど、職場が変わったら周りがvimmerばかり
- 素のvimは心許ない、なんとなくやる気が出ない
- 1から設定ファイル(.vimrcとか)書くのは面倒くさい
開発環境の構成
基本的な方針は有志のカスタマイズを利用（参考に）し、必要最低限のカスタマイズのみ加えます。
Qiitaやブログにたくさんのカスタマイズが紹介されていますが、多くの人に支持されているものを選定しています。※Githubのstarが多い等
- vim
- tmux
- gpakosz/.tmux : tmuxの設定がまとめっているやつ（ステータスバーが思うようにカスタマイズできないのでそのままは利用しない）
- tmp : プラグイン管理マネージャー
- zsh
- Terminal
作業手順
Terminal
iTerm2
利用するターミナルはiTerm2を前提として説明します。
インストールされていない方は下記からインストールしてください。
https://www.iterm2.com
マルチバイト文字対策のため、Preferences > Profiles > Text > Fontを開き、Ambiguous characters are double-widthのチェックを外します。
フォント関連をインストール（Ricty + powerline + nerd-fonts）
ターミナル上でアイコンを使用するため、powerline、nerd-fontsを初めに導入します。
プログラミング用フォントRictyを同時にインストールします。
※フォントは好みなので何でもおｋ
# Ricty + powerline$ brew tap sanemat/font
$ brew install--with-powerline ricty
$ cp-f /usr/local/bin/brew/opt/ricty/share/fonts/Ricty*.ttf ~/Library/Fonts/ # パスを確認$ fc-cache -vf# nerdfonts$ brew install fontforge
$ git clone https://github.com/ryanoasis/nerd-fonts.git .nerd-fonts
$ cd .nerd-fonts/
$ ./install.sh # 全部はいらないかも・・# Rictyにパッチをあてる$ fontforge -script ./font-patcher ~/Library/Fonts/Ricty\ Bold\ for\ Powerline.ttf --fontawesome--fontlinux--octicons--powersymbols--powerline--powerlineextra--material--weather$ fontforge -script ./font-patcher ~/Library/Fonts/Ricty\ Discord\ Bold\ for\ Powerline.ttf --fontawesome--fontlinux--octicons--powersymbols--powerline--powerlineextra--material--weather$ fontforge -script ./font-patcher ~/Library/Fonts/Ricty\ Discord\ Regular\ for\ Powerline.ttf --fontawesome--fontlinux--octicons--powersymbols--powerline--powerlineextra--material--weather$ fontforge -script ./font-patcher ~/Library/Fonts/Ricty\ Regular\ for\ Powerline.ttf --fontawesome--fontlinux--octicons--powersymbols--powerline--powerlineextra--material--weather$ fontforge -script ./font-patcher ~/Library/Fonts/Ricty-Bold.ttf --fontawesome--fontlinux--octicons--powersymbols--powerline--powerlineextra--material--weather$ fontforge -script ./font-patcher ~/Library/Fonts/Ricty-Regular.ttf --fontawesome--fontlinux--octicons--powersymbols--powerline--powerlineextra--material--weather$ fontforge -script ./font-patcher ~/Library/Fonts/RictyDiscord-Bold.ttf --fontawesome--fontlinux--octicons--powersymbols--powerline--powerlineextra--material--weather$ fontforge -script ./font-patcher ~/Library/Fonts/RictyDiscord-Regular.ttf --fontawesome--fontlinux--octicons--powersymbols--powerline--powerlineextra--material--weather# 移動$ mv Ricty* ~/Library/Fonts/
iterm2のフォントを変更
設定画面を開きフォントを変更します。
Preferences > Profiles > Text > FontからRicty Nerd Fontを選択
zsh
bashからzshに切り替えます。
※すでにzshを利用している方は飛ばして大丈夫です。
$ chsh -s /bin/zsh
# bashの設定をzshに引き継ぎ$ cat .bashrc >> .zshrc
$ cat .bash_profile >> .zprofile
$ sed-i-e"s/.bashrc/.zshrc/g" .zshrc
$ sed-i-e"s/.bashrc/.zshrc/g" .zprofile
上記コマンド実行後、ターミナルを再起動します。
prezto
zshのフレームワーク（設定ファイル）preztoをインストールします。
$ git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"# 必要な設定ファイルのみコピー$ cp ~/.zprezto/runcoms/zpreztorc ~/.zpreztorc
.zpreztorcに下記設定を追加します。
$ vim .zpreztorc
# powerlevel9kをテーマに設定
zstyle ':prezto:module:prompt' theme 'powerlevel9k'# 下記2行コメントアウトを外す
zstyle ':prezto:module:tmux:auto-start'local'yes'
zstyle ':prezto:module:tmux:auto-start' remote 'yes'
.zshrcに設定を追加します。
$ vim ~/.zshrc
# 下記を追記# prezto + poworlevel9kPOWERLEVEL9K_MODE=nerdfont-complete
[-f"${ZDOTDIR:-$HOME}/.zprezto/init.zsh"]&&source"${ZDOTDIR:-$HOME}/.zprezto/init.zsh"POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(dir vcs)POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=()POWERLEVEL9K_PROMPT_ON_NEWLINE=true
POWERLEVEL9K_MULTILINE_LAST_PROMPT_PREFIX=" \U25B8 "POWERLEVEL9K_MULTILINE_FIRST_PROMPT_PREFIX=""vim
Macにプリインストールされていますが、Mac⇔vim間でclipboardを共有できるようbrewでインストールし直します。
$ brew update
$ brew install vim
$ source .zprofile
$ vim --version | grep clipboard
+clipboard +keymap +printer +vertsplit # ← +clipboardとなっていることを確認
+emacs_tags -mouse_gpm-sun_workshop-xterm_clipboard
vim-plug
vimのプラグイン管理マネージャーvim-plugをインストールします。
$ curl -fLo ~/.vim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
vimの設定
vimの設定にはamix/vimrcを適応します。
$ git clone --depth=1 https://github.com/amix/vimrc.git ~/.vim_runtime
$ sh ~/.vim_runtime/install_awesome_vimrc.sh
amix/vimrc導入後、独自設定を記載するファイルを作成します。
$ vim ~/.vim_runtime/my_configs.vim
クリックして~/.vim_runtime/my_configs.vimの内容を確認する
callplug#begin()
"treeiconPlug'ryanoasis/vim-devicons'Plug'tiagofumo/vim-nerdtree-syntax-highlight'"bracketautoclosePlug'cohama/lexima.vim'Plug'tpope/vim-surround'"editorconfigPlug'editorconfig/editorconfig-vim'"gitPlug'tpope/vim-rhubarb'Plug'airblade/vim-gitgutter'"emmetPlug'mattn/emmet-vim'"jsPlug'pangloss/vim-javascript'"markdownPlug'tpope/vim-markdown'callplug#end()
""NERDTreeletg:NERDTreeChDirMode=1letg:NERDTreeShowBookmarks=1letg:nerdtree_tabs_focus_on_files=1letg:NERDTreeMapOpenInTabSilent = '<RightMouse>'letg:NERDTreeWinSize = 40letNERDTreeShowHidden=1letg:NERDTreeDirArrowExpandable = '▸'letg:NERDTreeDirArrowCollapsible = '▾'""GitGutterletg:gitgutter_enabled = 1setupdatetime=100letg:gitgutter_override_sign_column_highlight = 0highlightclearSignColumnhighlightGitGutterAddctermfg=2highlightGitGutterChangectermfg=3highlightGitGutterDeletectermfg=1highlightGitGutterChangeDeletectermfg=4""vim-markdownletg:vim_markdown_folding_disabled=1""linesetnumber""multibytesetambiwidth=double""clipboardsetclipboard+=unnamed""backgroundhighlight! Normalctermbg=NONEguibg=NONEhighlight! NonTextctermbg=NONEguibg=NONEhighlight! LineNrctermbg=NONEguibg=NONE
プラグインをインストール
プラグインをインストールするため下記コマンドを実行します。
tmux
端末多重化ソフトウェアtmuxをインストールします。
マルチバイト文字対策
マルチバイト文字が含まれていると表示幅の問題で色々と不具合があるのでパッチをあてます。
$ brew edit tmux
# 60行目から追記 ※末尾のend手前まで
def patches
["https://raw.githubusercontent.com/z80oolong/tmux-eaw-fix/master/tmux-2.9a-fix.diff"]# 再インストール$ brew reinstall --build-from-source tmux
Macのクリップボードを共有できるようにする
※tmuxのバージョンが新しいといらないかもしれない
$ brew install reattach-to-user-namespace
tpm
プラグイン管理マネージャーtpmをインストールします。
$ git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm
tmuxの設定
tmuxの設定ファイルを編集します。
クリックして~/.tmux.confの内容を確認する
# -- general -------------------------------------------------------------------
set -gdefault-terminal"screen-256color"# colors!
setw -gxterm-keysonset -sescape-time10# faster command sequences
set -sgrepeat-time600# increase repeat timeout
set -sfocus-eventsonset -gprefixC-q# GNU-Screen compatible prefix
bindC-qsend-prefixset -q -gstatus-utf8on# expect UTF-8 (tmux < 2.2)
setw -q -gutf8onset -ghistory-limit5000# boost history
# reload configuration
bindrsource-file ~/.tmux.conf \; display'~/.tmux.conf sourced'# -- display -------------------------------------------------------------------
set -gbase-index1# start windows numbering at 1
setw -gpane-base-index1# make pane numbering consistent with windows
setw -gautomatic-renameon# rename window to reflect current program
set -grenumber-windowson# renumber windows when a window is closed
set -gset-titleson# set terminal title
set -gdisplay-panes-time800# slightly longer pane indicators display time
set -gdisplay-time1000# slightly longer status messages display time
set -gstatus-interval10# redraw status line every 10 seconds
# clear both screen and history
bind -nC-lsend-keysC-l \; run'sleep 0.1' \; clear-history# activity
set -gmonitor-activityonset -gvisual-activityoff# -- navigation ----------------------------------------------------------------
# create session
bindC-cnew-session# find session
bindC-fcommand-prompt -pfind-session'switch-client -t %%'# split current window horizontally
bind - split-window -v# split current window vertically
bind_split-window -h# pane navigation
bind -rhselect-pane -L# move left
bind -rjselect-pane -D# move down
bind -rkselect-pane -U# move up
bind -rlselect-pane -R# move right
bind> swap-pane -D# swap current pane with the next one
bind< swap-pane -U# swap current pane with the previous one
# maximize current pane
bind + run'cut -c3- ~/.tmux.conf | sh -s _maximize_pane "#{session_name}" #D'# pane resizing
bind -rHresize-pane -L2bind -rJresize-pane -D2bind -rKresize-pane -U2bind -rLresize-pane -R2# window navigation
unbindnunbindpbind -rC-hprevious-window# select previous window
bind -rC-lnext-window# select next window
bindTablast-window# move to last active window
# toggle mouse
bindmrun"cut -c3- ~/.tmux.conf | sh -s _toggle_mouse"# -- urlview -------------------------------------------------------------------
bindUrun"cut -c3- ~/.tmux.conf | sh -s _urlview #{pane_id}"# -- facebook pathpicker -------------------------------------------------------
bindFrun"cut -c3- ~/.tmux.conf | sh -s _fpp #{pane_id}"# -- list choice (tmux < 2.4) --------------------------------------------------
# vi-choice is gone in tmux >= 2.4
run -b'tmux bind -t vi-choice h tree-collapse 2> /dev/null || true'run -b'tmux bind -t vi-choice l tree-expand 2> /dev/null || true'run -b'tmux bind -t vi-choice K start-of-list 2> /dev/null || true'run -b'tmux bind -t vi-choice J end-of-list 2> /dev/null || true'run -b'tmux bind -t vi-choice H tree-collapse-all 2> /dev/null || true'run -b'tmux bind -t vi-choice L tree-expand-all 2> /dev/null || true'run -b'tmux bind -t vi-choice Escape cancel 2> /dev/null || true'# -- edit mode (tmux < 2.4) ----------------------------------------------------
# vi-edit is gone in tmux >= 2.4
run -b'tmux bind -ct vi-edit H start-of-line 2> /dev/null || true'run -b'tmux bind -ct vi-edit L end-of-line 2> /dev/null || true'run -b'tmux bind -ct vi-edit q cancel 2> /dev/null || true'run -b'tmux bind -ct vi-edit Escape cancel 2> /dev/null || true'# -- copy mode -----------------------------------------------------------------
bindEntercopy-mode# enter copy mode
run -b'tmux bind -t vi-copy v begin-selection 2> /dev/null || true'run -b'tmux bind -T copy-mode-vi v send -X begin-selection 2> /dev/null || true'run -b'tmux bind -t vi-copy C-v rectangle-toggle 2> /dev/null || true'run -b'tmux bind -T copy-mode-vi C-v send -X rectangle-toggle 2> /dev/null || true'run -b'tmux bind -t vi-copy y copy-selection 2> /dev/null || true'run -b'tmux bind -T copy-mode-vi y send -X copy-selection-and-cancel 2> /dev/null || true'run -b'tmux bind -t vi-copy Escape cancel 2> /dev/null || true'run -b'tmux bind -T copy-mode-vi Escape send -X cancel 2> /dev/null || true'run -b'tmux bind -t vi-copy H start-of-line 2> /dev/null || true'run -b'tmux bind -T copy-mode-vi H send -X start-of-line 2> /dev/null || true'run -b'tmux bind -t vi-copy L end-of-line 2> /dev/null || true'run -b'tmux bind -T copy-mode-vi L send -X end-of-line 2> /dev/null || true'# copy to macOS clipboard
if -b'command -v pbcopy > /dev/null 2>&1''bind y run -b "tmux save-buffer - | pbcopy"'if -b'command -v reattach-to-user-namespace > /dev/null 2>&1''bind y run -b "tmux save-buffer - | reattach-to-user-namespace pbcopy"'# -- buffers -------------------------------------------------------------------
bindblist-buffers# list paste buffers
bindppaste-buffer# paste from the top paste buffer
bindPchoose-buffer# choose which buffer to paste from
# -- user defined overrides ----------------------------------------------------
# increase history size
#set -g history-limit 10000
# start with mouse mode enabled
set -gmouseon# force Vi mode
# really you should export VISUAL or EDITOR environment variable, see manual
set -gstatus-keysviset -gmode-keysvi# move status line to top
#set -g status-position top
set -g @batt_icon_charge_tier8'🌕'set -g @batt_icon_charge_tier7'🌖'set -g @batt_icon_charge_tier6'🌖'set -g @batt_icon_charge_tier5'🌗'set -g @batt_icon_charge_tier4'🌗'set -g @batt_icon_charge_tier3'🌘'set -g @batt_icon_charge_tier2'🌘'set -g @batt_icon_charge_tier1'🌑'set -g @batt_icon_status_charged'🔋'set -g @batt_icon_status_charging'⚡'set -g @batt_icon_status_discharging'👎'set -g @online_icon"\u2714"set -g @offline_icon"\u2717"set -gstatus-left-length50set -gstatus-left"#[bg=colour69]#[fg=colour235] ❐ #S:#I.#P "set -gstatus-right-length110set -gstatus-right'#(curl wttr.in?format=3) | #[bg=default]#[fg=default]#{battery_icon} #{battery_percentage} | CPU: #{cpu_percentage} | Online: #{online_status} #[bg=colour239]#[fg=colour247] %H:%M #[bg=colour244]#[fg=colour238] %m/%d %a '# default statusbar colors
set-option -gstatus-bgcolour237#base02
set-option -gstatus-fgcolour136#yellow
# default window title colors
set-option -gwindow-status-stylefg='colour244'#base0
set-option -gwindow-status-stylebg='default'#set-window-option -g window-status-attr dim
# active window title colors
set-option -gwindow-status-current-stylefg='colour166'#orange
set-option -gwindow-status-current-stylebg='default'#set-window-option -g window-status-current-attr bright
set -gwindow-status-current-format'#[bg=colour239]#[fg=colour119] #I#[fg=colour249]:#[fg=colour255]#W#[fg=colour249] #F#[fg=colour239]#[bg=colour237]'set -gwindow-status-format' #I#[fg=colour237]:#[fg=colour250]#W#[fg=colour244] #F '# pane border
set-option -gpane-border-stylefg='colour235'#base02
set-option -gpane-active-border-stylefg='colour240'#base01
# message text
set -gmessage-stylebg='colour235'#base02
set -gmessage-stylefg='colour166'#orange
# pane number display
set-option -gdisplay-panes-active-colourcolour33#blue
set-option -gdisplay-panes-colourcolour166#orange
# clock
set-window-option -gclock-mode-colourcolour64#green
# List of plugins
set -g @plugin'tmux-plugins/tpm'set -g @plugin'tmux-plugins/tmux-sensible'set -g @plugin'tmux-plugins/tmux-cpu'set -g @plugin'tmux-plugins/tmux-battery'set -g @plugin'tmux-plugins/tmux-online-status'set -g @plugin'tmux-plugins/tmux-resurrect'set -g @plugin'tmux-plugins/tmux-continuum'# Initialize TMUX plugin manager (keep this line at the very bottom of tmux.conf)
run -b'~/.tmux/plugins/tpm/tpm'
プラグインをインストール
ターミナル上でCtrl + q→ Iを叩くとインストールが始まります。
使い方
ぼくが参考にしている記事を紹介します。
tmuxチートシート ※カスタマイズ後のプレフィックスはCtrl + q
vimのキーマッピング
※いずれはまとめたい
おわりに
始めはbash + powerlineで構築しようし、試行錯誤の上現在の構成にしたので手順に誤りがあるかも知れませんm(_ _)m
見た目的には満足できる出来に仕上がりましたが、まだまだ使いこなせていないのでそこは使い倒すしかないかなと・・・。
コレでも最低限のカスタマイズと思っているので、個々の設定を掘り下げるとまだまだ伸び代はあります。（やるかはわからんが）
タイトルにお手軽とつけたが、まとめてみると全然お手軽な量じゃなかったので、今後はdotfilesにまとめワンライナーで導入できるようにしようと思います。
謝辞
今回の開発環境を構築するにあたり特に影響を受けた記事です。執筆者に感謝。
tmuxとvimによる開発作業フロー (動画)
vimって極めればvscode並のIDEになるんじゃないの？ - 最強のvimrcを晒す。
tmux のステータスラインの設定を美しくした
