先日の記事に様々な反響をいただいたことをきっかけに「アウトプットやっぱ大事だなー」と思ったので、アドベントカレンダーに関係ないタイミングでも記事を書いてみようと思います。

僕のエディタ遍歴

~2014年夏：Pages

大学では歴史学を専攻していました。当時はレポートさえ書ければ良かったのでMacデフォルトのPagesを使用。プログラミングのプの字も知らなかった時代。

2014年夏 ~ 2015年：Sublime Text 2

仕事の合間にdotinstallでHTMLとかCSS勉強し始めた時代。プラグインも何も入れずになんとなくかっこいいなーという理由でSublimeを使っていた。この頃はWordpressの本を読んで会社サイトとか作ってました

2016年前半：Vim

社内で仕事をお願いしていたエンジニアが黒い画面でよく分からないことやってるの見てすごいなーという憧れでVimを使い始めた。なんとなく .dotfilesリポジトリとか作ってみたけど .vimrcの中身は全てネットで見たやつのコピペ。使ってる機能は1割くらいしかなかったと思います。

この頃からRails書き始めましたが、開発するには同時多発的にいろいろなファイルを触らなきゃいけないので当時のVim力では少し厳しかったです。 NERDTree入れてたけど全然活用できなかった思い出

2016年後半 ~ 2017年春：Sublime Text 3

本格的にプロダクト作りたいなーとなって使い慣れたSublimeに戻ってきました。ショートカットやプラグインの使い方もいくつか覚えて体感でこれまでの3倍くらいに開発速度も向上。ブワーっとスクロールして任意のファイルの中身をザッピングできるGUIのありがたさを実感

2017年春 ~ 現在：Atom

サイドバーのファイルアイコンが可愛いという理由だけでAtomに乗り換え

f:id:andoshin11:20171217010020p:plain

あとは痛エディタにしたくて背景画像もこんな感じにしてました

f:id:andoshin11:20171217010144p:plain

Atomのプラグインやショートカットの手触り感はSublimeと大差ないのですが、いかせん重すぎて開く気にすらならない！！！ 最近は案件でXcodeも動かすことが増えてきてだんだん辛くなってきました。。。

Vimに戻るかー

ということで主に以下の理由でVimに戻ることにしました。

いろいろなエディタを触る中で自分が開発に必要とする機能が具体的に見えてきた
昔Vimを使っていたころよりも髪の毛1本ほどは黒い画面の操作に慣れてきたので今度こそいけるやろ感

他のエディター候補としてはMSに行ったときに紹介していただいたVSCodeがとてもとても魅力的だったのですが、「Electronで動くアプリはSlackだけで十分！！」という強い意思を持ってVimを頑張っていきたいと思います。

要件

Vimは何度も挫折を繰り返しているので触り始める前に意識すべき点として以下の項目を挙げました

設定ファイルをキチッと管理すること
カーソル移動のしやすさを最優先にすること
シームレスにファイルツリーの確認とファイルの移動が行えること

1についてはいうまでもないですが、2と3は過去にVimを捨ててSublimeに走ったクリティカルな理由なので確実に攻略していきたいと思います

neovimのインストール

今回は以前から良いと評判を聞いていたneovimを利用します。(* Mac vimによくわからない破壊的変更を加えすぎて手がつけられない)

Homebrewから neovimをインストール

$ brew install neovim/neovim/neovim

設定ファイルにpathを通す

デフォルトでneovimは ~/.config/nvim/init.vimを設定ファイルとして参照しますが(vimでいう .vimrc)、dotfilesを一限管理したかったので以下のようにシンボリックリンクを貼りました

$ ln -sf ~/dev/dotfiles/nvim/init.vim ~/.config/nvim/init.vim

これでdotfiles以下を変わらずGit管理できます

dein.vimでプラグイン管理

昔は NeoBundleを用いてプラグインの管理を行なっていた記憶がありますが、今は dein.vimというのが良いらしいですね。

init.vimに以下のような設定を追記

let s:dein_path = expand('~/.vim/dein')

" dein Scripts-----------------------------------------------
if &compatible
  set nocompatible
endif

" Required:
set runtimepath+=~/.vim/dein/repos/github.com/Shougo/dein.vim

" Let dein mange itself
if dein#load_state(s:dein_path)
  " Required:
  call dein#begin(s:dein_path)

  " Add or remove your plugins here:
  call dein#add('Shougo/dein.vim')

  " Required:
  call dein#end()
  call dein#save_state()
endif

" Install uninstalled plugins on startup
if dein#check_install()
  call dein#install()
endif

" Required:
filetype plugin indent on
" End dein Scripts-------------------------------------------

syntax enable

call dein#add(<plugin name>)というように追加したいプラグインを記述するとneovim起動時にそのプラグインが自動でインストールされます。

また、まだ試していませんが TOMLという形式のファイルを別に作成してそれを dein.vimから読み込むこともできるらしいので、もう少しプラグインの数が増えたら試してみます

カーソルの移動速度を上げる

これは多分Mac独自のHack。「システム環境設定」 -> 「キーボード設定」を見るとキー入力に対するディレイとリピート速度が設定できるので、こちらから適度なスピードに変更。

f:id:andoshin11:20171218082114p:plain

tmux上でのモード切り替え速度を上げる

インサートモードからノーマルモードへの切り替えがもっさりしていたので調査。どうやらtmux側でescキーに対して入力待ちをしていたのが原因のよう。デフォルトで500msくらいの待ちが発生していたようなので ~/.tmux.confに設定を追記

set -g escape-time 0

tmuxをリフレッシュすると動作がサクサク快適になりました

NERDTreeを入れる

neovimの中から別のファイルを開く方法としては基本的に :e <file name>で十分な気もしますが、視覚的にディレクトリ構造を把握した上で任意のファイルを開きたいという欲求があったので NERDTreeをインストールしました。

インンストール方法自体は簡単で、上記のスクリプト内に

call dein#add('scrooloose/nerdtree')

という一行を追記するだけ。また、ファイルツリーを開く際にいちいち :NERDTreeToggleなどと打つわけにもいかないので以下のkeymapを init.vimに追加

map <C-t> :NERDTreeToggle<CR>

これで ctrl + tでファイルツリーを開けるようになりました。

また、 NERDTree上でのファイルの視認性が悪かったので、以下の設定を追記して拡張子ごとにHighlightするようにしました

" NERDTress File highlighting
function! NERDTreeHighlightFile(extension, fg, bg, guifg, guibg)
  exec 'autocmd filetype nerdtree highlight ' . a:extension .' ctermbg='. a:bg .' ctermfg='. a:fg .' guibg='. a:guibg .' guifg='. a:guifg
  exec 'autocmd filetype nerdtree syn match ' . a:extension .' #^\s\+.*'. a:extension .'$#'
endfunction
call NERDTreeHighlightFile('py',     'yellow',  'none', 'yellow',  '#151515')
call NERDTreeHighlightFile('md',     'blue',    'none', '#3366FF', '#151515')
call NERDTreeHighlightFile('yml',    'yellow',  'none', 'yellow',  '#151515')
call NERDTreeHighlightFile('config', 'yellow',  'none', 'yellow',  '#151515')
call NERDTreeHighlightFile('conf',   'yellow',  'none', 'yellow',  '#151515')
call NERDTreeHighlightFile('json',   'yellow',  'none', 'yellow',  '#151515')
call NERDTreeHighlightFile('html',   'yellow',  'none', 'yellow',  '#151515')
call NERDTreeHighlightFile('styl',   'cyan',    'none', 'cyan',    '#151515')
call NERDTreeHighlightFile('css',    'cyan',    'none', 'cyan',    '#151515')
call NERDTreeHighlightFile('rb',     'Red',     'none', 'red',     '#151515')
call NERDTreeHighlightFile('js',     'Red',     'none', '#ffa500', '#151515')
call NERDTreeHighlightFile('php',    'Magenta', 'none', '#ff00ff', '#151515')
call NERDTreeHighlightFile('vue',    'Green',   'none', '#4fc08d', '#4fc08d')

その他

Vueファイルのシンタックスハイライトを追加する

Vue.jsのSingle File Componentである .vueだけシンタックスハイライトがなくて寂しかったので以下のプラグインを追加しました

github.com

まれに動作が不安定な時もありましたが、以下の設定を init.vimに追記して解決

" autohighlight vue file
autocmd FileType vue syntax sync fromstart

emmetを入れる

本業がマークアッパーなのでemmetは必須。ということでdein.vimから emmet-vim入れました

call dein#add('mattn/emmet-vim')

また、デフォルトだとemmetのkeymapが <C-y>なのでAtomやSublimeを使ってた人間からするとちょっと不便。

" Configure emmet-vim
" set trigger key
let g:user_emmet_leader_key='<C-e>'

こんな感じに書くとAtom風にkeymapを変更できます。実際に呼び出す際は ctrl + e + ,というように末尾にカンマが必要なので注意

動いた 👏👏

個人的に便利だなーと思ったこと

今回新しくゼロから学んでみて、個人的に便利だなーと思ったneovim(vim)の機能を羅列します。始めてVimを触ったときに知っておきたかった...

oで次の行を空けてインサートモードに移行：

なんでいままで行末に移動 → インサートモードに移行 → 改行、なんて面倒なことをやっていたんだろうw

0で前の行を空けてインサートモードに移行：

上に同じ。

rキーで1文字だけreplace

TypoScriptの使い手なので「1文字だけ修正したい」というケース非常に多いのでとてもありがたい。

Iで行の先頭に移動してインサートモードに移行：
Aで行末に移動してインサートモードに移行：
ctrl + oで直前に開いていたファイルに戻る
ctrl + iで上記の逆

などなど挙げればキリがないので、続きはまた別の記事にまとめたいと思います。

Vim楽しくなってきたのでもっと使いこなすぞー

Studio Andy

今度こそVimを攻略したい：neovimをインストールして最高のdev UXを手に入れるまで(その1)