Help us understand the problem. What is going on with this article?

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を使っている開発者であればこのくらいは使いこなした方がいいと思う。
このほかにも開発に役立つプラグインは盛りだくさんあるが、次の機会にね。

park-jh
プルスタックエンジニアになれるまで頑張ろう。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした