今日は意外と時間かかったコードを自動で整形してくれる拡張機能を入れてみたのでそちらを記事に書いていこうと思います。
調べても思ったより上手くいかなくて、手こずったためこれから導入する人の少しでも参考になれば幸いです
まずはrufoというgemをインストールします
$ gem install rufo
VScodeの拡張機能でrufoと検索してダウンロードします
終わり
これで一括でrufoでコードを整形できる
$ rufo .
特定のファイルだけ走らせる時
$ rufo ファイル名(ディレクトリ名)
例: $rufo app/views/layouts/application.html.erb
ちなみにrufoでのコード整形の詳細設定の一例を書いておきます
プロジェクトフォルダ直下に.rufoファイルを作成
.rufo
parens_in_def :yes //これでメソッドに引数を渡すときに()が自動で生成される
trailing_commas :always //これで配列の要素の後ろに必ず,がつくようになる
parens_in_def :yes
def bar(x, y)
end
trailing_commas :always
[
1,
2,
]
でもこれだけだとerbファイルのコード整形には対応できないので、"beautify"を使ってerbにも対応できるようにしていく
VScodeの拡張機能からbeautifyと検索してインストール
setting.jsonファイルは写真の右上の方にある設定の右にあるファイルのマークのやつ
setting.jsonファイルに下記を追加
.setting.json
"editor.formatOnSave": true, //保存時にファイル全体をフォーマット
//"*.html.erb"を"erb"とする
"files.associations": {
"*.html.erb": "erb"
},
"beautify.language": {
"js": {
"type": [
"javascript",
"json",
"jsonc"
],
"filename": [
".jshintrc",
".jsbeautifyrc"
]
},
"css": [
"css",
"less",
"scss"
],
"html": [
"htm",
"html",
"erb" //"erb"に対応するように追加
]
},
"[erb]": {
"editor.defaultFormatter": "HookyQR.beautify"
}
これで保存した時に自動的にコードが整形されるようになります
最後に
詳しい詳細や設定はgithubなどをみてみてください
間違ってる事などありましたら教えて頂けると助かります