おしながき
- syntaxハイライト
- 強力な補完
- 自動でlint & fix
- 細々したテクニック
syntaxハイライト
Plug 'othree/yajs.vim'" es6のハイライト
Plug 'othree/es.next.syntax.vim'" stage-0 のsyntax highlight
Plug 'mxw/vim-jsx'" jsxのハイライト" vim-jsx用の設定letg:jsx_ext_required =1" ファイルタイプがjsxのとき読み込む．letg:jsx_pragma_required =0" @から始まるプラグマでは読み込まない．
augroup Vimrc
autocmd!autocmdBufNewFile,BufRead *.jsx setfiletype=javascript.jsx
augroup END
es6のsyntaxハイライトプラグインはいくつかあるが，yajs.vimが一番見やすいと感じた．
各種ハイライトの比較は，この記事が非常に分かりやすかった．
強力な補完
Plug 'Valloric/YouCompleteMe'letg:ycm_collect_identifiers_from_tags_files =1letg:UltiSnipsExpandTrigger ='<C-j>'letg:UltiSnipsJumpForwardTrigger ='<C-j>'letg:UltiSnipsJumpBackwardTrigger ='<C-k>'letg:EclimCompletionMethod ='omnifunc'autocmd Vimrc FileType javascript nnoremap,gd :<C-u>YcmCompleter GetDoc<CR>autocmd Vimrc Filetype javascript nnoremap,gt :<C-u>YcmCompleter GoTo<CR>autocmd Vimrc FileType javascript setlocalomnifunc=javascriptcomplete#CompleteJS
補完には，YouCompleteMeを使う．理由としては，ternと組み合わせてIDEの様な補完を行うため．
buildにはpython2, clangが必要．予めbrewなどで入れておく．
vim-plugのdoでinstallを行っても良いが，YouCompleteMeのインストールはかなり長いので，
自分は，手動でインストールしている．
YouCompleteMeは補完時にJsDocを見れたり（設定で非表示にも可能），自作クラスに対しても構文解析していい感じに補完してくれるのですごく良い．<C-x><C-p>で頑張ったり，tagファイル生成して<C-x><C-]>する必要がなくなる．
neocompleteを利用したい人は，tern_for_vimを使えばいいらしい．
$ npm install -g tern
$ cd ~/.vim/plugged/YouCompleteMe
$ python2 install.py --tern-completer # javascript[tern]のみの場合$ python2 install.py --all # C#[OmniSharp]や，java[Eclim] など他言語も合わせて使う場合ternをより活用するためには，package.jsonが存在するディレクトリに.tern-projectを作ってあげる必要がある．
汎用的な.tern-projectの例をあげておく．
{"ecmaVersion":6,"libs":["browser"],"plugins":{"requirejs":{},"node":{},"modules":{},"es_modules":{}},"loadEagerly":["src/**/*.js"],"dontLoad":["bundle/**/*.js"]loadEagerly : 読み込むファイル
dontLoad : 読み込みないフアィル
それ以外はだいたい見たまんま．
詳細は，http://ternjs.net/doc/manual.html
自動でlint & fix
ファイル保存時にeslint --fixを走るようにして自動でセミコロンやインデントを整形するようにしている．eslintの設定ファイルがプロジェクトルートに存在しなかった時は，ホームディレクトリにあるairbnbをベースにした設定ファイルを利用するようにしている．
command! EsFix :call vimproc#system_bg("eslint --fix " . expand("%"))
augroup javascript
autocmd!autocmdBufWrite *.js,*.jsx EsFix
augroup END
もっと詳細に設定したり，エラー行をハイライトしたりしたい場合は，vim-watchdogsがおすすめ．
設定例
Plug 'pocke/vim-hier'" quick-fixのハイライト forkのforkを利用
Plug 'Shougo/vimproc.vim', {'do' : 'make'} " :call system([command]) を非同期にするためのやつ．quickrunが使ってる
Plug 'thinca/vim-quickrun'" バックグラウンドでプログラム実行してくれるやつ（今回の場合，watchdogsがquickrunをつかってeslintを実行
Plug 'osyo-manga/shabadou.vim'" quick-runのhock集
Plug 'osyo-manga/vim-watchdogs'" eslintを走らせてquick-fixにエラー行入れてくれるやつ" quickrunの設定" Quickrun走ったあと，quick-fix開かないようにしたり細々した設定．letg:quickrun_config =get(g:,'quickrun_config', {})letg:quickrun_config['watchdogs_checker/_'] = {
\ 'runner' : 'vimproc',
\ 'runner/vimproc/sleep' : 10,
\ 'runner/vimproc/updatetime' : 500,
\ 'outputter/buffer/split' : ':botright 4sp',
\ 'outputter/quickfix/open_cmd' : "",
\ 'hook/echo/enable' : 0,
\ 'hook/echo/output_success': '> No Errors Found.',
\ 'hook/back_window/enable' : 1,
\ 'hook/back_window/enable_exit' : 1,
\ 'hock/close_buffer/enable_hock_loaded' : 1,
\ 'hock/close_buffer/enable_success' : 1,
\ 'hook/qfstatusline_update/enable_exit' : 1,
\ 'hook/qfstatusline_update/priority_exit' : 4,
\ }
" ファイルタイプと実行するコマンドのひも付け（javascriptでeslint実行するよー）if executable('eslint')letg:quickrun_config['javascript/watchdogs_checker'] = {
\ 'type' : 'watchdogs_checker/eslint',
\ }
letg:quickrun_config['javascript.jsx/watchdogs_checker'] = {
\ 'type' : 'eslint',
\ }
endif" 次のファイルタイプのバッファが保存されたらwatch-dogsがquick-run走らせてくれるletg:watchdogs_check_BufWritePost_enables = {
\ 'javascript' : 1,
\ 'javascript.jsx' : 1,
\ }
細々したテクニック
- JsDocを折りたたむ
JsDocが常に表示されていると邪魔なのでfoldingする．
setlocalfoldmethod=marker
setlocalfoldmarker=/*,*/こうすることでJsdocが折りたたまれてイイ感じになる．
- Commitメッセージのtypoを防ぐ
autocmd Vimrc VimEnter COMMIT_EDITMSG setlocalspell
タイポと思われる単語がハイライトされる．ハイライトされた単語の上でz=をタイプすることで，修正候補の単語一覧が表示されて選択するとその単語に修正される．
自分はかなりtypoが多いので重宝している．
感想
身の回りにYouCompleteMe使ってる人があんまりいない．
YouCompleteMeはやいし，補完賢いしかなりイイ．