Question

我在Mac OS的Visual Studio Code中按⌥ + ⇧ + F ，这是Format Document的快捷方式，用于格式化文件名为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代码。

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

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

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

Answer 4

现在（2019年3月），我认为更漂亮，更漂亮的红宝石是最好的选择：它可以处理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 5

您可以使用Rufo格式化Ruby代码。它是一个自以为是的格式化程序（如果您熟悉它，就像Prettier一样）。

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

Answer 6

我使用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 7

gem install htmlbeautifier

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

Answer 8

要格式化红宝石文件，不需要任何额外的插件，您只需映射一些键即可执行“ editor.action.reindentLines”

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

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

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

Answer 9

现在可以：

在VS Code中安装ruby-rubocop
转到文件->首选项->设置
搜索编辑器：默认格式化程序，然后选择“ misogi.ruby-rubocop”
转到文件->首选项->键盘快捷键
搜索Ruby：rubocop自动更正。您可以在其中找到运行rubocop的快捷方式，以便按照rubocop设置自动格式化ruby代码。

您也可以右键单击ruby文件，然后会发现“格式化文档”选项，一旦安装了ruby-rubocop，就会触发“ Ruby：rubycop自动更正”。

Answer 10

更新Visual Studio代码的settings.json：

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

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

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"
}

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

10 个答案: