Vim
JavaScript
es6
React
ESLint

VimでReactの開発を楽々

More than 1 year has passed since last update.


前提


  • ES6で開発する。

  • javascript補完にはternjsを使う。

  • javascriptスタイルガイドはeslint(airbnb)を使う。


JavaScriptのSyntax関連プラグイン


  • pangloss/vim-javascript

  • othree/yajs.vim

  • othree/es.next.syntax.vim

  • othree/javascript-libraries-syntax.vim

  • othree/html5.vim

  • maxmellon/vim-jsx-pretty

  • ternjs/tern_for_vim


vim-javascript

vimでのjavascriptの開発を行うとき定番みたいなプラグインだ。

syntaxについてはyajsを使っているがyajsはindentationを提供していない。

再度確認したが、vim-javascriptがないとindentationが効かなかった。

Plug 'pangloss/vim-javascript', { 'for': ['javascript', 'javascript.jsx'] }


yajs.vim、es.next.syntax.vim、javascript-libraries-syntax

vimでjavascriptのsyntax highlightingやindentationのために使っていたのは「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()

" Setup used libraries
let g:used_javascript_libs = 'jquery,underscore,react,flux,jasmine,d3'
let b:javascript_lib_use_jquery = 1
let b:javascript_lib_use_underscore = 1
let b:javascript_lib_use_react = 1
let b:javascript_lib_use_flux = 1
let b:javascript_lib_use_jasmine = 1
let b:javascript_lib_use_d3 = 1
endfunction
autocmd MyVimrc FileType javascript,javascript.jsx call EnableJavascript()

これは僕の設定で、他のJavaScriptライブラリを有効にする必要がある方はreadmeを参考にしていただければと思う。

ちなみに、MyVimrcはautocmd!をやってくれるものだ。

augroup MyVimrc

autocmd!
augroup END


html5.vim

htmlのファイル内でcssのindentationが効かなかったので、othreeさんのhtml5.vimプラグインを入れた。(追記 2017.7.7)

Plug 'othree/html5.vim'

そして、すべて確認したことではないが、以下の機能を提供している。


  • Support all new elements and attribute.

  • Support SVG and MathML

  • Support microdata.

  • Support RDFa.

  • Support WAI-ARIA.

  • Support Electron webview.


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を使っている開発者であればこのくらいは使いこなした方がいいと思う。

このほかにも開発に役立つプラグインは盛りだくさんあるが、次の機会にね。