時々とおまわり

プログラミング雑記

vscodeでerbファイルをフォーマットする

Sinatraを使ったメモアプリの開発時にerbがフォーマットされなかったので設定しました。

結論

vscode拡張機能のBeautifyを使う。

なぜBeautifyなのか

似たようなフォーマッタとして拡張機能のPrettierがあるがerbファイルが上手くフォーマットされないらしいのでBeautifyを選択しました。

erbファイルのフォーマット設定

デフォルトではerbファイルをHTMLとして認識してくれないので追加で設定が必要です。

  1. vscodecmd + , で設定が開くのでbeautify と検索
  2. Beautify: LanguageEdit in settings.json をクリック
  3. settings.json が開きBeautifyのLanguage設定が追記される
  4. erbhtml 設定に追加
//settings.json

{
  ...
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json",
                "jsonc"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
        },
        "css": [
            "css",
            "less",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "erb" //追記する
        ]
    }
}

自動フォーマットを設定

ここでの設定はBeautify拡張機能に限らずvscode内の全てすのフォーマッタの自動修正に影響します。

setting.json に下記を追記。

//settings.json
{
  ...
    //ペースト時の自動フォーマット
    "editor.formatOnPaste": true,
    //入力時の自動フォーマット
    "editor.formatOnType": true,
    //保存時の自動フォーマット
    "editor.formatOnSave": true,
}

まとめ

erbファイルだけフォーマットされていないのが気になっていたので解消できてスッキリ。 エディタの設定でいつも時間を溶かしてしまうけどサクッとできたので良かった。

参照

Beautify - Visual Studio Marketplace

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