如何在 VS Code 中自动格式化 Ruby 或 .erb 文件？

Question

我在 Visual Studio 中按 ⌥ + ⇧ + F macOS，Format Document 的快捷方式，用于格式化名为 foo.rb 或 foo.html.erb.

的文件

它没有格式化文档，而是打印出这封信：Ï

如何获取它来格式化文档？

Answer 1

你可以使用 Rufo to format your Ruby code. It is an opinionated formatter (like Prettier 用于 JS，如果你熟悉它的话）。

您可以使用 vscode-rufo 扩展将其与 VSCode 集成。

Answer 2

您可以在 VSCode 中设置格式关联，因此 .erb 文件将被视为 .html。

转到文件->首选项->设置->单击右上角的...->打开settings.json

然后把这段代码添加到你的settings.json

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

我就是这样解决这个问题的。它会删除一些代码亮点，但会像 HTML 文档一样自动格式化 HTML 模板。

Answer 3

现在（2019 年 3 月）我认为 prettier 和 prettier-ruby 是最好的选择：它可以处理 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

Answer 4

gem install htmlbeautifier

通过编辑器中提供的搜索功能，使用 Ctrl +Shift+ P（或 Mac 上的 Command + Shift + P），然后搜索格式化文档。

Answer 5

要格式化你的 ruby 文件，你不需要任何额外的插件，你可以只映射一些键来做 "editor.action.reindentLines"

如果您使用 vscode-vim 插件，您可以将其添加到您的设置中：

 "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": ["=", "="],
            "commands": ["editor.action.reindentlines"]
        }
    ],

然后在正常 vim 模式下，== 将重新格式化您的文件。

Answer 6

您将需要在 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 代码。

保存时格式化功能只会在文件实际保存时触发（只有在您更改文件时才会发生）。保存没有更改的文件不会触发保存时格式。

Answer 7

我使用 rubocop 而不是 rufo。

一开始我用的是rufo。但是，我遇到了问题

{
  boo: {
    a: 1,
    b: 2,
    c: 3
  }
}

它总是为我格式化为

{
  boo: {
    a: 1,
    b: 2,
    c: 3,
  },
}

在c: 3和boo: {}后面加两个,。正是它让我的 rubocop 总是失败。

至于，我在项目中使用了rubocop。为什么不用它直接格式化我的代码呢！

如果您有兴趣，可以按以下方式进行：

安装插件 VSCode ruby，然后在 settings.json

中添加以下代码片段

  "ruby.format": "rubocop",
  "ruby.intellisense": "rubyLocate",
  "ruby.useBundler": true,
  "ruby.lint": {
    "rubocop": {
      "useBundler": true
    }
  },

保存。有用~~(祝你)

Answer 8

现在可以：

在 VS 代码中安装 ruby-rubocop
转到文件 -> 首选项 -> 设置
搜索编辑器：默认格式化程序和select“misogi.ruby-rubocop”
转到文件 -> 首选项 -> 键盘快捷键
搜索 Ruby：由 rubocop 自动更正。你有运行 rubocop 的快捷方式，以便根据你的 rubocop 设置自动格式化你的 ruby 代码。

您也可以右键单击您的 ruby 文件，您会找到“格式化文档”选项，一旦安装 ruby-rubocop，该选项就会触发“Ruby：rubocop 自动更正” .

Answer 9

更新Visual Studio代码的settings.json：

File -> Preferences -> Settings -> Extensions -> Scroll down and find "Edit in settings.json"

或者在您的 OS

中的这些路径中

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

来自 Visual Studio Code Ruby extension 他们推荐用作初始配置的文档：

"ruby.useBundler": true, //run non-lint commands with bundle exec
"ruby.useLanguageServer": true, // use the internal language server (see below)
"ruby.lint": {
  "rubocop": {
    "useBundler": true // enable rubocop via bundler
  },
  "reek": {
    "useBundler": true // enable reek via bundler
  }
},
"ruby.format": "rubocop" // use rubocop for formatting

也请查看 linting 文档以进一步改进。另外如前所述，您可以添加 .erb 应该被视为 .html:

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

Answer 10

如果您使用 prettier 来格式化 html/css/js 文件，值得一试 prettier-erb-plugin。只需添加到您的 .prettierrc:

  "plugins": ["@prettier/plugin-ruby", "prettier-plugin-erb"]

或者用yarn安装：

yarn add -D prettier @prettier/plugin-ruby prettier-plugin-erb

并确保 VSCode 使用来自 node_modules 的本地版本的 prettier（或者，您也可以全局安装这些插件）。 Prettier VSCode 插件通常将自己声明为默认格式化程序，但为了以防万一，请确保在您的 settings.json 中 NOT 编写如下内容：

    "[erb]": {
        "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
    },

如何在 VS Code 中自动格式化 Ruby 或 .erb 文件？

How do I auto format Ruby or .erb files in VS Code?

html

ruby

ruby-on-rails

ruby-on-rails-3

visual-studio-code