Vim
JavaScript
ECMAScript2015

vimのECMASCript2015環境をイイ感じにする

More than 1 year has passed since last update.

おしながき

  • 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用の設定
let g:jsx_ext_required = 1        " ファイルタイプがjsxのとき読み込む.
let g:jsx_pragma_required = 0     " @から始まるプラグマでは読み込まない.

augroup Vimrc
  autocmd!
  autocmd BufNewFile,BufRead *.jsx set filetype=javascript.jsx
augroup END 

es6のsyntaxハイライトプラグインはいくつかあるが,yajs.vimが一番見やすいと感じた.
各種ハイライトの比較は,この記事 が非常に分かりやすかった.

強力な補完

ss1.gif

Plug 'Valloric/YouCompleteMe'
let g:ycm_collect_identifiers_from_tags_files = 1
let g:UltiSnipsExpandTrigger = '<C-j>'
let g:UltiSnipsJumpForwardTrigger = '<C-j>'
let g:UltiSnipsJumpBackwardTrigger = '<C-k>'
let g: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 setlocal omnifunc=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

ss2.gif

ファイル保存時にeslint --fixを走るようにして自動でセミコロンやインデントを整形するようにしている.eslintの設定ファイルがプロジェクトルートに存在しなかった時は,ホームディレクトリにあるairbnbをベースにした設定ファイルを利用するようにしている.

command! EsFix :call vimproc#system_bg("eslint --fix " . expand("%"))
augroup javascript
  autocmd!
  autocmd BufWrite *.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開かないようにしたり細々した設定.
let g:quickrun_config = get(g:, 'quickrun_config', {})
let g: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')
  let g:quickrun_config['javascript/watchdogs_checker'] = {
        \   'type' : 'watchdogs_checker/eslint',
        \ }
  let g:quickrun_config['javascript.jsx/watchdogs_checker'] = {
        \   'type' : 'eslint',
        \ }
endif
" 次のファイルタイプのバッファが保存されたらwatch-dogsがquick-run走らせてくれる
let g:watchdogs_check_BufWritePost_enables = {
      \ 'javascript'     : 1,
      \ 'javascript.jsx' : 1,
      \ }

細々したテクニック

  • JsDocを折りたたむ

JsDocが常に表示されていると邪魔なのでfoldingする.

~/.vim/after/ftplugin/javascript.vim
setlocal foldmethod=marker
setlocal foldmarker=/*,*/

こうすることでJsdocが折りたたまれてイイ感じになる.

ss3.gif

  • Commitメッセージのtypoを防ぐ
~/.vimrc
autocmd Vimrc VimEnter COMMIT_EDITMSG setlocal spell

ss4.gif

タイポと思われる単語がハイライトされる.ハイライトされた単語の上でz=をタイプすることで,修正候補の単語一覧が表示されて選択するとその単語に修正される.

自分はかなりtypoが多いので重宝している.

感想

身の回りにYouCompleteMe使ってる人があんまりいない.
YouCompleteMeはやいし,補完賢いしかなりイイ.

追記

yajs.vim と vim-jsx を併用するとインデントがコンフリクトして壊れてしまうようです.

またvim-jsxのjsx部分のsyntaxハイライトは完璧ではないので,jsx部分を綺麗にハイライトするためのpluginを作成しました

https://github.com/MaxMEllon/vim-jsx-pretty

Plug 'mxw/vim-jsx'

Plug 'MaxMEllon/vim-jsx-pretty'

に変更するだけで大丈夫です.