web-dev-qa-db-ja.com

VS CodeでRubyまたは.erbファイルを自動フォーマットするにはどうすればよいですか？

押す ⌥ + ⇧ + F Visual Studio Code for macOSでは、 Format Document へのショートカットで、foo.rbまたはfoo.html.erbというファイルをフォーマットします。

文書をフォーマットする代わりに、次の文字を印刷します：Ï

ドキュメントをフォーマットするにはどうすればよいですか？

htmlruby-on-railsrubyruby-on-rails-3visual-studio-code
18
Derek

VSCodeで形式の関連付けを設定できるため、.erbファイルは.htmlのように扱われます。

[ファイル]-> [設定]-> [設定]->右上隅の[...]をクリックし、[settings.jsonを開く]に移動します。

次に、このコードをsettings.jsonに追加します

"files.associations": {
   "*.html.erb": "html"
}

これが私がこの問題を解決した方法です。コードのハイライトの一部を削除しますが、HTMLドキュメントのようなHTMLテンプレートを自動フォーマットします。

19
Никита Львов

最近（2019年3月）、prettier-Rubyを使用したprettierが最適なオプションだと思います。Ruby、ERB（HTMLとして）、JS、その他多数を処理できます。

prettier script.rb # will show you the formatted script
prettier --write script.rb # will overwrite the file with the formatted script

Prettier VS Codeプラグインを使用して、それを自動的に行うことができます。 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

https://github.com/prettier/plugin-Ruby

2
localhostdotdev

VS Codeのこれらの設定はすべてsettings.jsonファイル：

"Ruby.rubocop.onSave": true,
"editor.formatOnSaveTimeout": 5000,
"editor.formatOnSave": true,
"files.associations": {
    "*.erb": "erb"
},

設定ファイルを保存します。 VS Codeに「Ruby-rubocop」および「ERB Formatter/Beautify」拡張機能をインストールします。両方の拡張機能のドキュメントに従って、gem依存関係をインストールします。 VS Codeを再起動します。

保存時のフォーマット機能は、ファイルが実際に保存された場合にのみトリガーされます（ファイルを変更した場合にのみ発生します）。変更のないファイルを保存しても、保存時フォーマットはトリガーされません。

1
Andrew Koster

Rufo を使用して、Rubyコードをフォーマットします。これは、 Prettier は、JSに慣れている場合です。

vscode-rufo 拡張機能を使用して、VSCodeと統合できます。

1
Renaud Chaput
gem install htmlbeautifier

ctrl + Shift + P（またはMacの場合はCommand + Shift + P）を使用してエディターで提供される検索機能を使用して、format documentを検索します。

0
Bhagwan Rajput