Comment on page
Prettier
以下、開発プロジェクトへのインストール手順を説明します。
開発プロジェクトにおいて、yarnでnodeパッケージが管理されている前提です。
まずは、開発環境のみの依存パッケージとして、prettier をインストールします。
% yarn add --dev prettier
必要に応じて、prettier-rubyもインストールします。
% yarn add --dev @prettier/plugin-ruby
プロジェクトルートに以下のファイルを作成します。
.prettierrc
{
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": false,
"endOfLine": "lf",
"printWidth": 120
}
上記の設定は、当社で使っているデフォルトの設定です。例えば、
printWidthは、デフォルトの80だと少し狭く、フォーマットしたときに、過度に改行が入ってしまうため、120にしています。Railsのroutesファイルなどのように、なるべく改行をせずに一行で書いてしまいたいような特殊なコードは、pretterでのフォーマットがかからないように、ignoreファイルをプロジェクトルートに追加します。
.prettierignore
node_modules
yarn.lock
package-lock.json
public
/config/routes.rb
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
以下、RubyMineやVisual Studio Codeの設定を各自行います。
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を再起動するとうまくいきます。
上記プラグインをインストールした上で、以下のように、
.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は任意の設定で、保存時に自動的にフォーマットをかけるかを設定します。