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

Question

我在 Visual Studio Code for macOS（Format Document 的快捷方式）中按 ⌥ + ⇧ + F 来格式化一个名为foo.rb 或 foo.html.erb。

它打印出这个字母而不是格式化文档：Ï

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

Answer 1

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

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

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

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

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

Answer 2

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

仅当文件实际保存时才会触发保存时格式化功能（仅当您更改文件时才会发生这种情况）。保存没有更改的文件不会触发保存时格式化。

Answer 3

如果您使用 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 的本地版本（或者，您可能也可以全局安装这些插件）。更漂亮的 VSCode 插件通常将自己声明为默认格式化程序，但以防万一，请确保在您的 settings.json 中 NOT 编写如下内容：

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

Answer 4

您可以使用Rufo 来格式化您的Ruby 代码。它是一个固执己见的格式化程序（如果你熟悉的话，就像 Prettier 用于 JS）。

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

Answer 5

现在（2019 年 3 月）我认为 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 6

gem install htmlbeautifier

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

Answer 7

更新 Visual Studio 代码的settings.json：

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

或者在您的操作系统中的这些路径中

• 视窗%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 8

我使用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中添加如下sn-ps

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

保存。它有效~~（我希望你）

Answer 9

现在可以：

1. 在 VS Code 中安装 ruby​​-rubocop
2. 转到文件 -> 首选项 -> 设置
3. 搜索 Editor: Default Formatter 并选择“misogi.ruby-rubocop”
4. 转到文件 -> 首选项 -> 键盘快捷键
5. 搜索 Ruby：由 rubocop 自动更正。在那里你有运行 rubocop 的快捷方式，以便按照你的 rubocop 设置自动格式化你的 ruby​​ 代码。

您也可以右键单击您的 ruby​​ 文件，您将找到“格式化文档”选项，一旦安装了 ruby​​-rubocop，就会触发“Ruby: autocorrect by rubocop”。

Answer 10

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

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

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

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