Prettier
最終更新
役に立ちましたか？
おもにJavaScriptなどのフロントエンド系のソースコードのフォーマッタです。プラグインを追加することでRubyなどの言語にも対応可能です。詳細はを参照してください。
以下、開発プロジェクトへのインストール手順を説明します。
開発プロジェクトにおいて、yarnでnodeパッケージが管理されている前提です。
まずは、開発環境のみの依存パッケージとして、prettier をインストールします。
必要に応じて、prettier-rubyもインストールします。
なお、prettier-rubyは、ですが、JS用のprettierと別管理にしたくないので、上記のようにnodeパッケージのプラグインとしてインストールしています。
プロジェクトルートに以下のファイルを作成します。
上記の設定は、当社で使っているデフォルトの設定です。例えば、printWidthは、デフォルトの80だと少し狭く、フォーマットしたときに、過度に改行が入ってしまうため、120にしています。
Railsのroutesファイルなどのように、なるべく改行をせずに一行で書いてしまいたいような特殊なコードは、pretterでのフォーマットがかからないように、ignoreファイルをプロジェクトルートに追加します。
また、これ以外にも、rubyの後置ifや後置whileなどのフォーマットをprettierにまかせてしまいたいので、以下のように.rubocop.ymlにルールを追加します。
以下、RubyMineやVisual Studio Codeの設定を各自行います。
JavaScriptやTypeScriptだけでなく、Rubyもフォーマットの対象にする場合は、設定画面で、Preferences -> Languages & Frameworks -> JavaScript -> Prettier から、Prettier Packageを{Project Root}/node_modules/prettierに設定した上で、Run for filesの部分でrbも含まれるように、以下のように変えておきます。
On save のチェックをいれておくと、⌘S を押したときにフォーマットがかかります。 設定保存後もprettierが動作しない場合は、一度RubyMineを再起動するとうまくいきます。
上記プラグインをインストールした上で、以下のように、.vscode/settings.jsonをプロジェクトルートに追加して、言語ごとにフォーマットの設定をします。チームメンバーのvscodeの設定状況によっては、このファイルはリポジトリにpushして他のメンバーと共有してもよいです。
なお、editor.formatOnSaveは任意の設定で、保存時に自動的にフォーマットをかけるかを設定します。
も併用しているプロジェクトの場合、rubocopに定義されているスタイル関連のルールとprettierのフォーマットが競合して、gitのpre-commitにrubocopのチェックを行っているとリポジトリにコミットできなくなってしまいます。
そういった場合のために、ていて、この設定をプロジェクト用の.rubocop.ymlで継承します（参考：）。
最新のRubyMineでは、Prettierプラグインはデフォルトでインストール済なので、設定だけ行います（参考：）。
プラグインを使います。
本サイトの更新情報は、Twitterので発信しています。ご確認ください。