Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
23
Help us understand the problem. What is going on with this article?
@koshilife

prettier-ruby VSCode Formatter設定

More than 1 year has passed since last update.

追記 (2019/08/27)

prettier-vscode 2.2 に上げたら、
以下リンクいただいた記事の通りprettier-ruby が効かなくなったので追記。

prettier-ruby VSCode Formatterがprettier-vscode 1.10.0でぶっ壊れた?時にやってみる改善方法

記事を参考に、 prettier-ruby の導入位置をプロジェクトフォルダ配下に変更したら動作するようになりました。

手順:

  • prettier-vscode 再インストール
    • $ rm -rf ~/.vscode/esbenp.prettier-vscode-x.x.x を削除
    • VSCode上で再インストール
  • プロジェクトフォルダで prettier-ruby を 取得
    • $ cd <PROJECT_PATH> ; yarn add --dev prettier @prettier/plugin-ruby

@github0013@githubさん 大変参考になりました! m(_ _)m


@koshi_life です。

Prettierがイケてるという話だったので、Ruby版の prettier-ruby をVSCode上でRubyファイルを保存時に自動でフォーマットされるように設定してみました。

output800-5.gif

VSCode上の設定

STEP1. Prettier拡張をインストール

VSCodeprettier-vscode という拡張をインストールします。

STEP2. Ruby用のプラグインをインストール

prettier-ruby VSCode formatOnSave を参考にしました。

STEP1で導入した拡張がインストールされているディレクトリ (2019/08/27 追記より)
プロジェクトのディレクトリに移動してRuby用のプラグインをインストールします。

# [2019/08/27 追記] 以前のバージョンでは動作したが
# prettier-vscode 2.2 では動作しなかったのでコメントアウト
# $ cd ~/.vscode/extensions/esbenp.prettier-vscode-1.8.1/

# 対象プロジェクトでインストール
$ cd <PROJECT_PATH>
$ npm install @prettier/plugin-ruby

※ Version部分は読み替えたほうが良いかもしれません。

STEP3. VSCodeの settings.json に加筆

  • settings.json に以下、Rubyファイル保存時にフォーマッターをかける設定を加筆。
    "[ruby]": {
        "editor.formatOnSave": true
    },
  • 参考キャプチャ: settings.json 開くまで
    • Preferences -> Settings
      vscode1.png
    • { } 選択
      vscode2a.png
    • settings.json 修正
      vscode3a.png

細かい設定

README.md#configuration 参照。

一括でFormatしたい場合はコマンドラインが楽

コマンドラインのインストール

README.md に書いてある package.json がある前提で以下でインストール。

# npm の場合
$ npm install --save-dev prettier @prettier/plugin-ruby

# yarnの場合
$ yarn add --dev prettier @prettier/plugin-ruby

使い方

# README.md より
$ ./node_modules/.bin/prettier --write path/to/file.rb

# 例: hoge.rb に適用
$ ./node_modules/.bin/prettier --write hoge.rb 
hoge.rb 612ms

# 例: appディレクトリ以下のRubyファイルに一括適用
$ find app -name *.rb | xargs node_modules/.bin/prettier --write
app/models/a.rb 311ms
app/models/b.rb 292ms
app/models/c.rb 342ms
app/models/d.rb 287ms
app/models/e.rb 229ms
...

参考

23
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
koshilife
スタートアップでサーバサイドエンジニアをやっています。 興味の赴くままにクラウド(GCP,AWS)、フロントエンドも齧っていきます。 最近は Zenn https://zenn.dev/koshilife を使っています。
waaq
日程調整自動化ツール waaq Linkを運営しています。「仕事に自由を。」をミッションに掲げたスタートアップです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
23
Help us understand the problem. What is going on with this article?