Neomake - 非同期実行のSyntastic

syntasticを使っていると大きなファイルでsyntax checkなどするとしばらく応答が返らないことがよくある。neovimには非同期でjobを実行する機能があり、それを活かしたpluginとしてNeomakeというsyntasticと同様の機能をもつものがあることを知ったので使ってみた

deinを使っていれば以下のような設定だけでOK

 [[plugins]]                               
 repo = 'neomake/neomake'                  
 hook_add = '''                            
 autocmd! BufWritePost * Neomake           
 '''                                       

ファイルを開いて最初にNeomakeを実行するときだけ一瞬固まるが、その後はNeomake実行時にもカーソルが動かせること確認できた
ちなみにvimでも動くが非同期実行はできない

デフォルトの設定ではerrorを見つけた際もlocation listが開かないので:lopenを使う
もしくは以下の設定を入れれば自動で開くようになる

let g:neomake_open_list = 2

syntasticと同じく、:NeomakeInfoで現在どのmakerが有効なのか確認できる（makerとはsyntasticで言うcheckerのこと）

また、makerのカスタマイズもsyntasticと同様の形でできる

"let g:neomake_{ filetype }_{ makername }_maker
let g:neomake_javascript_jshint_maker = {
    \ 'args': ['--verbose'],
    \ 'errorformat': '%A%f: line %l\, col %v\, %m \(%t%*\d\)',
    \ }
let g:neomake_javascript_enabled_makers = ['jshint']

errorを示すsignの変更も可能
もちろんwarningやinfoなども別々に可能

let g:neomake_error_sign = {
  \ 'text': 'E',
  \ 'texthl': 'ErrorMsg',
  \ }

詳しくはhelpで

参考

• https://github.com/neomake/neomake
• https://www.gregjs.com/vim/2015/linting-code-with-neomake-and-neovim/

vimでコマンドの出力をキャプチャする

特定のファイルにコマンドの出力を書き出したいときはこれ
!をつけることで新規のファイルでも書き込める

:redir! > file
:echo 'aaa'
:redir end

これでaaaという文字列がfileに書かれる
ちなみにredirはrediと省略して書ける
また、rediはredirectの略
ファイルに追記したい場合は>>を使えばよい

:redi >> %
:echo 'bbb'
:redi end

これでbbbという文字列が現在編集中のファイルの末尾に追記される(bufferに反映させるには:e!する必要あり)

出力をレジスタに入れることもできる

:redi @a
:echo 'testtest'
:redi end

レジスタに入れてしまえば後はbufferで好きなように使える

redi endが実行されるまでの出力すべてがキャプチャされるため、その間にエラーなどが発生すればそれもすべてキャプチャされることに注意

es6でreactを使うときのメモ

reactを触ってみた
せっかくなので新しい形で使いたくes6の形にしたら、reactの元の書き方では動かないところがあったのでメモしておく

1. getInitialState

# es6以前
var Component = React.createClass({
  getInitialState: function() {
    return {data: []};
  },

es6ではgetInitialStateというメソッドを定義しても動かない。以下のように定義する。

# es6
class Component extends React.Component {  
    constructor() {                                            
        super();                                               
        this.state = {                                         
            data: [],
        };                                                     
    }                                                          

2. props

render: function() {
    <Component id=1 />
}

このように呼び出されるComponentがあった場合、

# es6以前
var Component = React.createClass({
  getInitialState: function() {
    return {data: Store.getData(this.props.id)};
  },

# es6
class Component extends React.Component {  
    constructor(props) {                                            
        super(props);                                               
        this.state = {                                         
            data: Store.getData(props.id)},
        };                                                     
    }                                                          

es6ではconstructor内でpropsにアクセスするために引数として受け取る必要がある

3. callbackのthis

callbackとして登録したメソッド内で呼ばれるthisがundefinedになる
例えば、es6で以下のように書いてcallbackとして登録すると実行時にthisがundefinedとなる

render() {
    return <button onClick={this.callback} />
}

callback(event) {
    console.log(this.state.data);
}

なので以下のようにbindを利用する

render() {
    return <button onClick={this.callback.bind(this)} />
}

参考

• http://qiita.com/cubdesign/items/ee8bff7073ebe1979936
• http://qiita.com/koba04/items/bc13d1f42964278ae14e

入門 React ―コンポーネントベースのWebフロントエンド開発