LoginSignup
4
2

More than 1 year has passed since last update.

Vim-PrettierにはPrettierが入っていないだと…

Posted at

https://images.unsplash.com/photo-1513124130903-ea989a7706fd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

VimでPrettierを使えるようにする手順のメモ。

対象読者

  • Vimの初心者
  • Macユーザー
  • コード整形にPrettierを使いたい人
  • VScodeのPrettierしか使ったことがなく、Prettierを単体でインストールしたことがない人

本記事でわかること

  • Vim-Prettierのインストール方法
  • Vim-Prettierの設定

それではまず、Vim-Prettierのインストール方法から説明していこう。

Vim-Prettierのインストール方法

https://images.unsplash.com/photo-1598970434795-0c54fe7c0648?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

Vimのプラグインのインストールにはいくつか方法がある。ここではVimのバージョン8から標準搭載されたパッケージマネージャを使った方法のみ扱う。

次のコマンドをTerminalで実行:

git clone --depth 1 [https://github.com/prettier/vim-prettier](https://github.com/prettier/vim-prettier) ~/.vim/pack/plugins/start/vim-prettier

実行後にいくつかダウンロードが行われ、次のディレクトリができているはずだ。

~/.vim/pack/plugins/start/vim-prettier

続いて、Prettier本体をインストールしよう。

Prettier本体のインストール

https://images.unsplash.com/photo-1517384444713-ec340d75746d?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

グローバルにインストールしたい場合:

npm i -g prettier

ローカルにインストールしたい場合:

cd ~/.vim/pack/plugins/start/vim-prettier
npm install

これでVimでPrettierを使う準備は整った。

次はVim-Prettierの使うための設定について見ていこう

Vim-Prettierの設定

仮でIndex.jsという名前のファイルを用意する。

Index.jsをVimで開いて、次のコードを記述:

let array={0:"zero",1:"one"};

このコードをPrettierで整形:

  • NOMARL modeに切り替え
  • 次のコマンドを実行:

    :Prettier

すると、コードが次のように、スペースが追加されただろう。

let array = { 0: "zero", 1: "one" };

もし:Prettierを実行後に次のエラーメッセージが出た場合、Prettierがインストールされていない。

no prettier executable installation found

Prettier本体のインストールからやり直そう。

ただ、毎回整形するときに:Prettierと入力するのは面倒だろう。

条件に応じて自動で整形するように設定しよう

Prettierを自動実行するための設定

https://images.unsplash.com/photo-1483058712412-4245e9b90334?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

vimrcファイルを開く:

vim ~/.vimrc

次のコードをコピペでvimrcファイルにはりつけ:

augroup fmt
autocmd!
autocmd BufWritePre,TextChanged,InsertLeave *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*.md,*.vue,*.svelte,*.yaml,*.html PrettierAsync
augroup END

これでPrettierが次の場合実行される。

  • ファイルが保存される前
  • テキストが変更された後
  • INSERTモードから抜けた後

コードがキビキビ整形されて快感ではないだろうか?

余談

はじめVim-Prettierをインストールしたとき、Prettierが同梱されているものと思い込んでいた。

これまでVScodeでPrettierを使用していて、そのとき使っていたPrettierは拡張機能のインストールと同時にPrettier本体もインストールされていた(はず)ため、自らPrettierをインストールした経験がない。

思い込みによって、Vim-Prettier実行(:Prettier)にエラーメッセージが出ていたが、まさかPrettier本体をインストールされていないとは思わなかった。

エラー内容を検索したところ、このQiita記事によって解決した。

一応Vim-Prettierの公式ドキュメントにもPrettier本体がない場合はインストールするよう書いているが見落としていた。

こんなことで時間を消費しないようエラーメッセージの内容をよく解釈するよう気をつけたい。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2