vim で JavaScript の開発するときに最近いれた設定やプラグインとか

vim javascript

具体的にはセンチャしてて「なんかもっとこう楽になれないの」と思ったので、いろいろ設定をしてた。メモ。

コマンドモードの補完

これは JS とは関係ないけど、知らなかったので。 : で始まるコマンドモードがあきらかに貧弱な挙動しかできないのはなんとかならないの？と思って調べたら、普通に設定かけばいいだけだった。
Vimのコマンドライン補完がこんなに強力な訳がない - Humanity
めも - wildmode ファイル名などの補完方法

" vi 互換をオフにする
" これ自体は前から設定はしていた
set nocompatible
" コマンドモードでの補完設定
set wildmode=longest:full,list

URL エスケープされた文字列を日本語表示する - vim-hideout の導入

Vim の conceal を使って Unicode エスケープシーケンスの表示を見やすくする - C++でゲームプログラミング

インデントをハイライトする - vim-indent-guides の導入

インデントがあきらかに崩れてるのはなおせるけど、微妙に崩れててたまにやりづらいときがある。ので導入した。
nathanaelkane/vim-indent-guides · GitHub
色設定はこんなかんじにした。colorscheme は面倒だし molokai です

" 起動時から使用
let g:indent_guides_enable_on_vim_startup = 1
" 手動で色設定
let g:indent_guides_auto_colors = 0
autocmd VimEnter,Colorscheme * : highlight IndentGuidesOdd  ctermbg=236
autocmd VimEnter,Colorscheme * : highlight IndentGuidesEven ctermbg=black

ついでに現在行のハイライトというかアンダーラインもひいておいた。まあ、これは気持ちの問題。

" カレント行ハイライト
set cursorline
" アンダーラインをひく
autocmd VimEnter,ColorScheme * : highlight CursorLine cterm=underline ctermbg=234

自動でインデントを整形する - javascript-indent の導入

前から知ってたけどついでにいれた。「=G」をタイプしてそれっぽくするとそれっぽく整形される。なんかいま逆に普段の挙動がおかしいけど、まあこれでなおせるからいっかという。
vim-scripts/JavaScript-Indent · GitHub

JS の補完を賢くする - JSComplete

これも前からいれてたけど、なんかうまく動いてるのかうごいていないのかよくわからなかった。neocomplecache をつかってて、その source になったというのはしってたけど、なんでサジェストしてくれないんだろう？と思ってた。

対策としては、source の優先度をあげてやればいいだけだった。ググってもみつからなかったけど、neocomplecache の公式ドキュメントにあった。具体的には let g:neocomplecache_source_rank です。

autocmd FileType javascript,coffee setlocal omnifunc=javascriptcomplete#CompleteJS

let g:neocomplcache_source_rank = {
  \ 'jscomplete' : 500,
  \ }

" dom も含める
let g:jscomplete_use = ['dom']

コメントをもっと楽につくる - JsDoc を導入した

Sencha Touch のソースを読んでても JsDoc 準拠だし、他の人のソースをみると JsDoc 形式のコメントはわりと親切に感じたのでいれた。
JSDoc形式のコメントを追加するVim Script - Qiita [キータ] という経緯があって、 プラグインにしてくれたものを使用している。 heavenshell/vim-jsdoc · GitHub

console.log をもっと楽に入力するスニペットをつくった

print デバッグとはいわないが、いろいろ挙動をみるときにやっぱり console.log は多用するのでスニペットつくって楽にしておいた。neosnippet を使用しているけど、他のスニペットなやつでもできるとおもう。

snippet     log
abbr        console.log(arg);
prev_word   '^'
  console.log(${1:#arg});

snippet     llog
abbr        console.log(label + arg);
prev_word   '^'
  console.log("${1:#label}: " + ${2:#arg});

log ですぐ入力できるスニペットはいいけど、llog で簡単なラベルをつけたログを出力できるようにした。console.log をしこみまくってるとどれがどれだかわかんなくなるからね。

以上

どれほど楽になったかはわからないけど、気持ちは楽になった。まああとは syntastic で jshint してるくらいです。