前提
- ES6で開発する。
- javascript補完にはternjsを使う。
- javascriptスタイルガイドはeslint（airbnb）を使う。
JavaScriptのSyntax関連プラグイン
- othree/yajs.vim
- othree/es.next.syntax.vim
- othree/javascript-libraries-syntax.vim
- maxmellon/vim-jsx-pretty
- ternjs/tern_for_vim
yajs.vim、es.next.syntax.vim、javascript-libraries-syntax
vimでjavascriptのsyntax highlightingやindetationのために使っていたのは「vim-javascript」というものだった。
以前まではこれで十分だったが、reactなどには対応されていない部分があり、「yajs.vim」で乗り換えた。
syntax highlightingの比較画面をみればどっちがいいのかわかると思う。
ECMAScript（ES）で開発するので、同じ人が作った「es.next.syntax.vim」も入れる。
「javascript-libraries-syntax.vim」を使えばjQueryやAngularJSなど他のライブラリにも綺麗に表示される。
Plug 'othree/yajs.vim', { 'for': ['javascript','javascript.jsx'] }
Plug 'othree/es.next.syntax.vim', { 'for': ['javascript','javascript.jsx'] }
Plug 'othree/javascript-libraries-syntax.vim', { 'for': ['javascript','javascript.jsx'] }
javascript-libraries-syntaxは使いたいライブラリを指定する必要がある。
functionを作って.jsファイルを開くときに呼び出せばいい。
function! EnableJavascript() " Allow JSX in normal JS filesletg:jsx_ext_required =0 " Setup used librariesletg:used_javascript_libs ='jquery,underscore,react,flux,jasmine,d3'letb:javascript_lib_use_jquery =1letb:javascript_lib_use_underscore =1letb:javascript_lib_use_react =1letb:javascript_lib_use_flux =1letb:javascript_lib_use_jasmine =1letb:javascript_lib_use_d3 =1endfunction
autocmd MyVimrc FileType javascript,javascript.jsx call EnableJavascript()これは僕の設定で、他のJavaScriptライブラリを有効にする必要がある方はreadmeを参考にしていただければと思う。
ちなみに、MyVimrcはautocmd!をやってくれるものだ。
augroup MyVimrc
autocmd!
augroup END
vim-jsx-pretty
jsxのSyntaxフラグインとして「mxw/vim-jsx」を使っていたが、
閉じる"｝"で警告の表示になっていて「vim-jsx-pretty」に変更した。
readmeにDemo画面が出ているので、どっちがいいのか確認してみよう。
Plug 'maxmellon/vim-jsx-pretty', { 'for': ['javascript','javascript.jsx'] }
tern_for_vim
ternjsを使えばpowerfulなコード補完が可能だ。
いろんなEDITORに対応されていてvim pluginも提供している。
npmが設置されている必要がある。
Plug 'ternjs/tern_for_vim', { 'for': ['javascript','javascript.jsx'],'do': 'npm install' }
ternjsの公式サイトのドキュメントよりatomのドキュメントがもっと参考になった。
次は、atomのドキュメントを参考にして作成した。
% vim ~/.tern-project
.tern-projectファイルを次のように作成する。
{"ecmaVersion":6,"libs":["browser","ecma5","ecma6","ecma7"],"loadEagerly":["node_modules/react-dom/**/*.js","node_modules/react/**/*.js","node_modules/whatwg-fetch/fetch.js","src/**/*.js"],"plugins":{"es_modules":{},"node":{},"doc_comment":{"fullDocs":true,"strong":true}}}| プロパティ | 説明 |
|---|---|
| ecmaVersion | デフォルトで使うecmaを指定 |
| libs | 入力補完に使うlibraryを指定 |
| loadEagerly | libs以外に入力補完に使えたいlibraryを指定 |
| dontLoad | 入力補完に使えたくないlibraryを指定 |
| plugins | サーバープラグインを指定 |
loadEagerly
名前の通りeager loadなので、使う場合はそれなりにコストが高い。
node_modules以下を全部読み込むのはやめた方がいい。
dontLoad
確実に使えたくないものを指定するとき使う。
plugins
もっと多いが、詳細はternjsの公式マニュアルを参考していただければと思う。
ここでは設定ファイルに書かれているものだけ説明する。
| プラグイン | 説明 |
|---|---|
| es_modules | ES6のimportとexportに対応 |
| node | nodeで使う変数やプラグインのloadに対応 |
| doc_comment | jsdocスタイルのコメントに対応 |
詳細が知りたい場合は下記のリンクを参考にしよう。
Airbnbのスタイルガイドの適用
% vim ~/.eslintrc
.eslintrcファイルを次のように作成する。
{"parser":"babel-eslint","env":{"browser":true,"node":true},"settings":{"ecmascript":6,"jsx":true},"plugins":["react","import"],"rules":{"react/prefer-stateless-function":0,"react/jsx-filename-extension":[1,{"extensions":[".js",".jsx"]}],},"extends":"airbnb"}設定ファイルをみれば大体わかる。
詳細は次の記事を参考にしよう。
その他のVimプラグイン
- honza/vim-snippets
- Shougo/vimproc.vim
- Shougo/neoyank.vim
- Shougo/neosnippet
- Shougo/neosnippet-snippets
- Shougo/neocomplete
- ervandew/supertab
- scrooloose/syntastic
これはあくまで、スタイルガイドやコードの補完、スニペットに関するプラグインだけだ。
Vimを使っている開発者であればこのくらいは使いこなした方がいいと思う。
このほかにも開発に役立つプラグインは盛りだくさんあるが、次の機会にね。