【vim】vim-prettierがPrettier: failed to parse bufferで動かないときに確認すること

どうもてぃ。

vim + JavaScript/TypeScriptで悩まされる日々が続いておりました。

が、とうとう決着をつけることが出来て感謝カンゲキ雨嵐です（何に？）

何がおきていたか

当方、vimmmmmmmmmmmmmmmmmmmmmerです。

フロントエンド開発で重要になってくるprettierのプラグイン、vim-prettierを使用しているのですが、いかんせん上手く動かない。

題名どおりのエラーがjs/jsx/tsファイルで起き、prettierが動かないという自体が起きてました（tsxファイルだと何故か動く）。

代替えとしてdense-analysis/aleを使用している人がいたりいなかったり。

自分の方でもaleを使用してprettierを掛けるのですが、以下のように楽しいことになります。

これがマジでムカつく。

最近は色んな所でjsを触る機会が増えてきたため、いい加減直そうと思い調査に走りました。

調査

同じように悩んでる方がたくさんいるようでした。

github.com

github.com

github.com

issue内で書かれてるものを自分の方で試してみても全く効果はなかったのでライブラリのオプションを確認していくことに。

試したこと その１

prettierの入っているプロジェクト内で:PrettierCliPathで何が出てくるか確認。

これに関してはprettierと返ってきたのでプロジェクト内のprettierが実行されてるっぽい。

もしかしたら、vim-prettierのバグでプロジェクト内のprettierを認識できてない可能性がある…ということでglobalで使用しているprettierを使うようにオプション指定。

.vimrcに下記を追加。

# which prettierで出てきたやつを指定
let g:prettier#exec_cmd_path = '/home/motty/.asdf/shims/prettier'

:PrettierCliPathで上記パスが出てきたけど、:Prettierは上手くいかない…。

予想が外れたので次。

試したこと その２

これが正解でした。

何事も解決は公式が書いてるだろうと、vim-prettier本体のドキュメントを見に行くことに。

ローカルにあるprettier.txtを確認（自分のパスは/home/motty/.cache/dein/repos/github.com/prettier/vim-prettier/docでした）

と、自分の.vimrcで設定してある項目に目がつきました。

  " flow|babylon|typescript|css|less|scss|json|graphql|markdown or empty string
  " (let prettier choose).
  " default: ''
  let g:prettier#config#parser = ''

自分はparserをbabylonを指定してました。以前、vim-prettierが動かなかったときにbabylonを指定したら上手く行ったからです。かなり安直な考え。

もしや…と思いdefault状態に戻すことに。以下自分のvim-prettier設定です。

  " vim-prettier
  call dein#add('prettier/vim-prettier', {
       \ 'do': 'yarn install',
       \ 'branch': 'release/1.x',
       \ 'for': [
       \ 'javascript',
       \ 'typescript',
       \ 'typescriptreact',
       \ 'css',
       \ 'less',
       \ 'scss',
       \ 'json',
       \ 'graphql',
       \ 'vue',
       \ 'yaml',
       \ 'html'
       \]})
  let g:prettier#autoformat = 0
  let g:prettier#quickfix_enabled = 0
  let g:prettier#config#semi = 'false'
  let g:prettier#config#single_quote = 'true'
  let g:prettier#config#bracket_spacing = 'true'
  let g:prettier#config#parser = ''
  let g:prettier#exec_cmd_path = '/home/motty/.asdf/shims/prettier'
  " autocmd BufWritePre *.js,*.jsx,*.ts,*.tsx,*.vue,*.css,*.scss,*.json PrettierAsync

:Prettierを動かすと…

うまくいったぁぁぁああああああああああああああああああああああああああああああああああ

つーか、babylonのリポジトリはすでに４年前に開発終了してましたね。

github.com

babelのモノレポ化前の名残らしく、今は@babel/parserとして開発されているそうです。そら動かんわ。

終わり

色んなものを定期的にメンテナンスしましょう。

今年中にvimrcの整理/toml化へ向けてがんばります。ALEのムカつく問題も残ってますしね。