あまブログ

ドキドキ......ドキドキ2択クイ〜〜〜〜〜〜〜ズ!!

【VSCode+Prettier】Railsのコードを自動フォーマットする

Rails Ruby VSCode

この記事では、Prettier for Rubyを使って、Railsのコードを自動フォーマットする方法を紹介します。

VSCodeでファイルを保存する際に自動フォーマットできるようになります。

1. 検証環境

  • Ruby：3.1.0
  • Rails：6.1.4.7
  • node：16.13.0
  • yarn：1.22.19
  • bundler：2.3.6
  • VSCode：1.78.2
  • prettier：2.8.8
  • @prettier/plugin-ruby：3.2.2

2. 設定手順

2-1. @prettier/plugin-rubyのインストール

以下のコマンドを実行して、prettierと@prettier/plugin-rubyをインストールします。

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

2-2. gemのインストール

次に、必要なgemをインストールします。

Gemfileに以下を追記。

group :development do
  gem 'prettier_print'
  gem 'syntax_tree'
  gem 'syntax_tree-haml'
  gem 'syntax_tree-rbs'
end

以下のコマンドを実行して、gemをインストール。

$ bundle install

2-3. prettier-vscodeのインストール

VSCodeの拡張機能にprettier-vscodeを追加します。

VSCodeを開く→ ⇧⌘X →prettierで検索

marketplace.visualstudio.com

settings.jsonに以下を追記。

{
  "[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
}
  • settings.jsonの開き方
    • ⇧⌘Pでコマンドパレットを開く
    • open settingsで検索
    • Preferences: Open User Settings (JSON)を選択

2-4. rubocopと一緒に使う場合

.rubocop.ymlに以下を追記。

inherit_from:
  - node_modules/@prettier/plugin-ruby/rubocop.yml

こうすることでRubocopとPrettierのルールが衝突しなくなります。

以上で設定は終了です。

3. フォーマット結果

以下のapp/models/user.rbをVSCode上で⌘Sで保存すると、

# frozen_string_literal: true

class User < ApplicationRecord
  validates :password, length: { minimum: 4 }, confirmation: true, if: :password_required?
end

こうなる↓

# frozen_string_literal: true

class User < ApplicationRecord
  validates :password,
            length: {
              minimum: 4
            },
            confirmation: true,
            if: :password_required?
end

【参考】