まとめ

困っていたこと
Reactで開発していて、 components/{Component名}/index.js としてディレクトリをわけていたら、ステータスラインにファイル名しか表示されないと「どのindex.jsだよ！」となった。

解決策

Before

After

一つ上のディレクトリまで表示することにしました。

やったこと

lightlineを使っていたため、 lightlineのカスタマイズをすることにしました。

公式READMEの"ファイル名と変更サインの間のバーを消すことはできますか？"を参考にしました。

完成形vimrc

.vimrc

let g:lightline = {
      \ 'component_function': {
      \   'filename': 'LightLineFileNameWithParentDir'
      \ }
      \ }

function! LightLineFileNameWithParentDir()
    if expand('%:t') ==# ''
        let filename = '[No Name]'
    else
        let dirfiles = split(expand('%:p'), '/')
        if len(dirfiles) < 2
            let filename = dirfiles[0]
        else
            let filename = dirfiles[-2] . '/' . dirfiles[-1]
        endif
    endif
    return filename
endfunction

解説
lightlineの設定を入れる変数である g:lightline に component_function という、新しい表示項目を生成、もしくは既存の項目を上書きする関数を登録する項目があります。
既存のfilenameという項目はREADMEを見る限り¹ expand('%:t') !=# '' ? expand('%:t') : '[No Name]' で表示されているようなので、それを参考にカスタマイズしました。

ソースコードの中では見つけられませんでしたが.. ↩