YAML-formatted HEREDOC strings break VSCode syntax highlighting

[trishrempel]

Description

YAML-formatted HEREDOC strings break VSCode syntax highlighting

Ruby LSP Information

Ruby LSP Information

VS Code Version

1.94.2

Ruby LSP Extension Version

0.8.7

Ruby LSP Server Version

0.20.1

Ruby LSP Addons

• Ruby LSP Rails

Ruby Version

3.3.1

Ruby Version Manager

shadowenv

Installed Extensions

Click to expand

• markdown-mermaid (1.25.0)
• vscode-tailwindcss (0.12.11)
• gitlens (15.6.2)
• prettier-vscode (11.0.0)
• copilot (1.241.0)
• copilot-chat (0.21.2)
• vscode-graphql-syntax (1.3.6)
• remote-containers (0.388.0)
• remote-ssh (0.115.0)
• remote-ssh-edit (0.87.0)
• remote-explorer (0.4.3)
• ruby-extensions-pack (0.1.12)
• ruby-lsp (0.8.7)
• sorbet-vscode-extension (0.3.37)
• markdown-all-in-one (3.6.2)

Ruby LSP Settings

Click to expand

Workspace

{}

User

{
  "enableExperimentalFeatures": false,
  "enabledFeatures": {
    "codeActions": true,
    "diagnostics": true,
    "documentHighlights": true,
    "documentLink": true,
    "documentSymbols": true,
    "foldingRanges": true,
    "formatting": true,
    "hover": true,
    "inlayHint": true,
    "onTypeFormatting": true,
    "selectionRanges": true,
    "semanticHighlighting": true,
    "completion": true,
    "codeLens": true,
    "definition": true,
    "workspaceSymbol": true,
    "signatureHelp": true,
    "typeHierarchy": true
  },
  "featuresConfiguration": {},
  "addonSettings": {},
  "rubyVersionManager": {
    "identifier": "auto"
  },
  "customRubyCommand": "",
  "formatter": "auto",
  "linters": null,
  "bundleGemfile": "",
  "testTimeout": 30,
  "branch": "",
  "pullDiagnosticsOn": "both",
  "useBundlerCompose": false,
  "bypassTypechecker": false,
  "rubyExecutablePath": "",
  "indexing": {},
  "erbSupport": true
}

Reproduction steps

1. Start the Ruby LSP with VSCode
2. Open a Ruby file
3. Add a HEREDOC with YAML syntax
4. See unexpected behavior

After adding the sample YAML string, or any string of YAML format:

    bad_heredoc_highlighting = <<~YAML
      property: abc
      another_property: def
    YAML

The closing HEREDOC and every line thereafter are formatted incorrectly.

[andyw8]

~Do you have any YAML extensions installed?~ Edit: I see you don't.

Related: https://github.com/Shopify/ruby-lsp/issues/2404

[andyw8]

Update: I can reproduce, and it appears this problem is caused by the YAML Language Basics support, built-in to VS Code. If I disable that, the bad highlighting on the Ruby lines goes away (at the cost of losing all YAML highlighting though).

So it seems that workaround for now is to use the Red Hat YAML extension, but this is likely something that needs to fixed in VS Code itself.

[vinistock]

I think VS Code recently shipped with an improved built-in YAML extension. The main issue is that it can handle syntax errors, but it doesn't realize that in a squiggly heredoc the indentation will be ignored.

That is:

def something
  # The something key here is not starting from indentation level zero, which is indeed a syntax
  # error for YAML. The catch is that the squiggly heredoc ignores the indentation, so it's actually
  # zero
  <<~YAML
    something: true
  YML
end

I'm not sure if there's a way for our grammar to tell VS Code "please ignore the indentation inside this this section".

[andyw8]

btw here's where that code lives: https://github.com/microsoft/vscode/tree/main/extensions/yaml

I notice there was a recent revert which might affect this.

[snutij]

It seems to have been fixed with the October release that happened yesterday. 👍

[andyw8]

Thanks, I've confirmed.

[gerardo-navarro]

I have noticed the same error only for GraphQL-based multiline heredoc string in ruby.

FYI: I have a graphql extenstion installed in vs code. This graphql seems to recognize this mulitline heredoc as a graphql snippet and wants to apply its hightlighting rules.

Here is what happens when the multiline heredoc is abbreaviated with GQL. The syntax highlighting for the rest of the ruby code is incorrect.

Here is what happens when the multiline heredoc is not abbreaviated with GQL, but with something that is not recognized by another extension. The syntax highlighting for the rest of the ruby code is now correct.

Is it possible to solve this GraphQL-based multiline heredoc strings in the way as was done for YAML-based multiline heredoc strings?

[vinistock]

@gerardo-navarro that is the same issue as #2492, which is the problem of interpolation in the middle of a heredoc using a language identifier. There's a lot more context in that issue.

The essence of the problem is that the grammar gets confused with the interpolation. Using GQL as the heredoc delimiter will assign the code inside the string as GraphQL, but the interpolation part is not valid GraphQL, which throws off the highlighting.

The best solution would be to not assign the heredoc to the GraphQL identifier if there's interpolation involved, but we haven't designed a solution yet.

You can also just use a different delimiter for the heredocs that have interpolation, which should no longer assign the GraphQL identifier and mitigate the issue (e.g.: <<~QUERY).