Prettier

Prettierとは

おもにJavaScriptなどのフロントエンド系のソースコードのフォーマッタです。プラグインを追加することでRubyなどの言語にも対応可能です。詳細は公式サイトを参照してください。

以下、開発プロジェクトへのインストール手順を説明します。

Prettierのインストール

開発プロジェクトにおいて、yarnでnodeパッケージが管理されている前提です。

まずは、開発環境のみの依存パッケージとして、prettier をインストールします。

% yarn add --dev prettier

prettier-rubyのインストール

必要に応じて、prettier-rubyもインストールします。

% yarn add --dev @prettier/plugin-ruby

なお、prettier-rubyは、gemでもインストール可能ですが、JS用のprettierと別管理にしたくないので、上記のようにnodeパッケージのプラグインとしてインストールしています。

Prettierの設定ファイルを追加

プロジェクトルートに以下のファイルを作成します。

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": false,
  "endOfLine": "lf",
  "printWidth": 120
}

上記の設定は、当社で使っているデフォルトの設定です。例えば、printWidthは、デフォルトの80だと少し狭く、フォーマットしたときに、過度に改行が入ってしまうため、120にしています。

Prettierのignore設定を追加

Railsのroutesファイルなどのように、なるべく改行をせずに一行で書いてしまいたいような特殊なコードは、pretterでのフォーマットがかからないように、ignoreファイルをプロジェクトルートに追加します。

.prettierignore

node_modules
yarn.lock
package-lock.json
public

/config/routes.rb

Linterとの競合回避

RuboCop

rubocopも併用しているプロジェクトの場合、rubocopに定義されているスタイル関連のルールとprettierのフォーマットが競合して、gitのpre-commitにrubocopのチェックを行っているとリポジトリにコミットできなくなってしまいます。

そういった場合のために、rubocopでprettierと競合するルールをオフにするための設定が、prettier-rubyには含まれていて、この設定をプロジェクト用の.rubocop.ymlで継承します（参考：公式サイト）。

.rubocop.yml

inherit_from:
  - node_modules/@prettier/plugin-ruby/rubocop.yml # rubocopのルールと衝突しないための設定

また、これ以外にも、rubyの後置ifや後置whileなどのフォーマットをprettierにまかせてしまいたいので、以下のように.rubocop.ymlにルールを追加します。

.rubocop.yml

# 後置ifのフォーマットはprettier-rubyに任せたいので、rubocopのチェックは外す
Style/IfUnlessModifier:
  Enabled: false

# 後置while、untilのフォーマットもprettier-rubyに任せたいので、rubocopのチェックは外す
Style/WhileUntilModifier:
  Enabled: false

Editorの設定

以下、RubyMineやVisual Studio Codeの設定を各自行います。

RubyMine

最新のRubyMineでは、Prettierプラグインはデフォルトでインストール済なので、設定だけ行います（参考：公式サイト）。

JavaScriptやTypeScriptだけでなく、Rubyもフォーマットの対象にする場合は、設定画面で、Preferences -> Languages & Frameworks -> JavaScript -> Prettier から、Prettier Packageを{Project Root}/node_modules/prettierに設定した上で、Run for filesの部分でrbも含まれるように、以下のように変えておきます。

Run for files部分の設定

{**/*,*}.{js,ts,jsx,tsx,rb,rake}

On save のチェックをいれておくと、⌘S を押したときにフォーマットがかかります。 設定保存後もprettierが動作しない場合は、一度RubyMineを再起動するとうまくいきます。

Visual Studio Code

prettier-vscodeプラグインを使います。

上記プラグインをインストールした上で、以下のように、.vscode/settings.jsonをプロジェクトルートに追加して、言語ごとにフォーマットの設定をします。チームメンバーのvscodeの設定状況によっては、このファイルはリポジトリにpushして他のメンバーと共有してもよいです。

.vscode/settings.json

{
  "[ruby]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

なお、editor.formatOnSaveは任意の設定で、保存時に自動的にフォーマットをかけるかを設定します。

本サイトの更新情報は、Twitterの株式会社プレセナ・ストラテジック・パートナーズエンジニア公式アカウントで発信しています。ご確認ください。