Sinatraを使ったメモアプリの開発時にerbがフォーマットされなかったので設定しました。
結論
なぜBeautifyなのか
似たようなフォーマッタとして拡張機能のPrettierがあるがerbファイルが上手くフォーマットされないらしいのでBeautifyを選択しました。
erbファイルのフォーマット設定
デフォルトではerbファイルをHTMLとして認識してくれないので追加で設定が必要です。
- vscodeで
cmd + ,で設定が開くのでbeautifyと検索 Beautify: LanguageのEdit in settings.jsonをクリックsettings.jsonが開きBeautifyのLanguage設定が追記されるerbをhtml設定に追加
//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ファイルだけフォーマットされていないのが気になっていたので解消できてスッキリ。 エディタの設定でいつも時間を溶かしてしまうけどサクッとできたので良かった。
