【簡単】vsCodeでRubyのerbファイルを自動フォーマットする方法

今回Railsの勉強をしていてerbファイルも自動整形できるようにしたいと思い色々調べていたら、Beautiifyという拡張機能がありそれを使うと自動整形できるようになりました。

今回はその方法を紹介しようと思います。
ご指摘や、「もっとこうした方がいい」などありましたらコメントいただけると幸いです。

Beautifyをインストール

エディターの一番左の上から5番目にあるアイコン(三角のマークがあるアイコンの下）をクリックして検索窓にBeautifyと入力してBeautifyをクリック。
下の画面が出るのでinstallをクリック。（画像はインストール済みなのでUninstallになってます）

settings.jsonを記述する。

コマンドキー(Windowsはctrl)と,キーを押しSettings画面を開き、Beautify:languageと検索してください。
その後少し小さい文字で書かれたEdit in setting.jsonをクリックすると、settings.jsonが開くので以下のように記述してください。

settings.json

．．．

"beautify.language": {
    "js": {
      "type": ["javascript", "json"],
      "filename": [".jshintrc", ".jsbeautifyrc"]
      // "ext": ["js", "json"]
      // ^^ to set extensions to be beautified using the javascript beautifier
    },
    "css": ["css", "scss"],
    "html": ["htm", "html", "erb"] //"erb"を追加
    // ^^ providing just an array sets the VS Code file type
  }

htmlの項目に"erb"を追加するとフォーマットされるようになりました。
ついでにjsとcssもフォーマットされるように設定しときましたが別に必要ない方は書かなくてもいいと思います。

補足

保存したときに自動整形されない方

以下のコードをsettings.jsonに追加して保存してください。

"editor.formatOnSave": true, // ファイル保存時に自動フォーマット

これで保存時に自動整形されるようになったと思います。

まとめ

コード整形はあまり本質的なことではないと私は考えてますのでリソース節約のために導入しました。
よければ導入してみてください。