はじめに
こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
SPA アプリを作成していると、フロントは Prettier で保存時に自動フォーマットしてくれるから楽だなと思い、Rails 開発も少しおっくうになりますよね。
この記事では Rails で Prettier + @prettier/plugin-ruby で整形する方法を紹介します。
著者の環境
- Rails 8.0.3
- Ruby 3.4.4
- Devcontainer 使用
1. VS Code のsettings.jsonのスコープ
まずはちょっとだけ前提知識。VS Code の設定は保存場所によって反映範囲が違います。
| スコープ | 保存場所 | 適用範囲 |
|---|---|---|
| User | ローカル PC or コンテナ | すべてのプロジェクトに適用 |
| Remote（Dev Container User） | コンテナ内 | そのコンテナで開くすべてのプロジェクトに適用 |
| Workspace |
.vscode/settings.json（プロジェクト内） |
そのワークスペースだけに適用 |
今回はRails プロジェクトだけに反映させたいので、Workspace 設定を使います。
setting.json の開き方ですが、左下の歯車アイコンから設定を開き、上記赤で囲んである ワークスペースを選択した後に setting と入力すれば、下のほうに setting.json という文言があるのでそこから開くことができます。
2. Prettier のインストール
Rails プロジェクトのルート（例：/app/juku-cloud-backend）で以下を実行します。
cd /app/juku-cloud-backend
npm init -y # package.jsonがまだなければ
npm install --save-dev prettier @prettier/plugin-ruby
そして、同じ場所に .prettierrc を作成します。
{
"plugins": ["@prettier/plugin-ruby"]
}
3. VS Code の Workspace 設定
VS Code でコマンドパレットを開き、
Preferences: Open Workspace Settings (JSON) を選び、
.vscode/settings.json に以下を記述します。
{
"[ruby]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"prettier.prettierPath": "./juku-cloud-backend/node_modules/prettier"
}
ポイント
-
"editor.defaultFormatter"を Prettier に設定することで、保存時に Ruby ファイルも自動整形されます。 -
"prettier.prettierPath"では、このプロジェクト専用の Prettier を使うように指定します（グローバルの Prettier と混ざらないようにするため）。
4. .gitignoreに node_modules を追加
node_modulesは容量も大きく、他の環境でnpm installすれば再生成できるので Git 管理は不要です。
.gitignoreに以下を追加しましょう。
node_modules/
package.json / package-lock.json / .prettierrc / .vscode/settings.json は Git 管理してください。
チーム全員で同じフォーマットルールを共有できます。
5. Gemfile にprettier 関連のgem を追加
2025/8/12 追記
完全prettier gem を書く記述を忘れていました。
以下を追記しておいてください
# Gemfile
group :development do
gem "prettier_print", "~> 1.0"
gem "syntax_tree", "~> 6.0"
gem "syntax_tree-haml", "~> 4.0"
gem "syntax_tree-rbs", "~> 1.0"
end
---
## まとめ
- Rails 8.0.3（Ruby 3.4.4）でも Prettier は使える
- `@prettier/plugin-ruby` を使えば、Ruby ファイルも JavaScript や TypeScript と同じ感覚で整形可能
- VS Code では**Workspace 設定**を使って、プロジェクト限定でフォーマッターを Prettier に変更
- `.gitignore`で`node_modules`を除外しつつ、設定ファイルは Git で共有する
これで Rails のコードも、**保存するだけでサクッときれいに**整形されます。
開発のたびに手動でコードを直す必要がなくなるので、気持ちよくコーディングできますよ！