formatting document in VSCode with Quarto breaks option syntax

[lostmygithubaccount]

xref: quarto-dev/quarto-cli#8576

Bug description

I was told by @mcanouil here that I got my syntax wrong: quarto-dev/quarto-cli#8574 (reply in thread)

I was wondering how that happened and figured it out. If you use the correct syntax and then format your document in VSCode using the Quarto extension, it adds a space. Since it's a single space in what looks like a Python comment, it's a bit hard to notice.

Steps to reproduce

Create a cell in a Quarto document that has an option comment:

```{python}
#| panel: input
ui.input_text("species", "Species:", value="Gentoo")
```

use keybindings or right click to format document with -> choose Quarto:

click it, and a space appears!

Expected behavior

I would not expect formatting the cell w/ the Quarto extension in VSCode to create syntax errors

Actual behavior

formatting the cell w/ the Quarto extension in VSCode creates syntax errors

Your environment

• IDE: VSCode w/ Quarto extension
• computer: Mac

Quarto check output

Quarto 1.4.542
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.542
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.11.7
      Path: /Users/cody/repos/pypi-analytics/venv/bin/python3
      Jupyter: 5.7.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.3.2
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library
      knitr: 1.45
      rmarkdown: 2.25

[✓] Checking Knitr engine render......OK

[medmaca]

I'm having the same issue, it's extremely frustrating.

To clarify I've a .qmd document containing both python/r blocks. The {r} blocks are formatted correctly while the {python} blocks suffer the issue that the #| have spaces inserted.

[mcanouil]

About the formatting space, there is nothing Quarto can do about it.
The formatting is actually not done by Quarto, i.e., Quarto calls Black.

• Support Quarto-style comment blocks psf/black#3557
• Exceptions to comment spacing psf/black#3668 => add a reaction on the original post to show interest (not a comment)

And actually this issue is a duplicate of:

• [vscode] Python formatter breaks comment pipe #| on code blocks #135

What you can do is to add an exception to the rules being applied as for autopep8:

• [vscode] Python formatter breaks comment pipe #| on code blocks #135 (comment)

[medmaca]

@mcanouil, thanks for the swift reply. Can you clarify if it possible to select which formatter Quarto uses for the python blocks? While I can modify the preferences for autopep8 to not correct #| , I'm not sure how to force Quarto to use autopep8 rather than black for formatting.

[lostmygithubaccount]

for what it's worth, I would still consider this a Quarto VSCode extension issue and not a black issue -- the issue arises because the syntax Quarto expects differs from the defaults black providers, causing issues for Quarto users (not black users)

as a Quarto user, it is frustrating to run into this, and especially then be told in a condescending tone by one of the maintainers:

Syntax matters.

You should start playing with the example, then tweak the example, and finally try your own thing.
There are no shortcuts to learn something.

when in fact it's the extension from Quarto that I installed that caused the issue

[mcanouil]

Formatter configuration are detailed in their respective documentation.

The formatter does not seem to be hardcoded so it likely uses the one you defined as formatter. (I am not very familiar with the Quarto extension codebase)

[mcanouil]

I think there is some miss-understanding here which I might be in part responsible because I did not know at that time that it was Black formatting that was causing the extra space.
Quarto has no control about what formatters does or not and won't set formatting configuration because it will have impact on other aspects of a user's project.

The issue with Python Shinylive inside Quarto not recognising # | is something else.
Far as I know and tested, that's this only thing not supporting # |. (quarto-dev/quarto-cli#8574 (comment))

Edit: Quarto Shinylive not supporting # | is now being tracked in quarto-ext/shinylive#67
Edit: it turns out to be shinylive directly: posit-dev/shinylive#196

in a condescending tone by one of the maintainers

This is your interpretation of a non native speaker writing in English. This kind of comment does not help in any way addressing the initial issue or the wording issue.
This kind of personal attack is also against the Code of Conduct.
For transparency, I'm not a "maintainer", I'm only a contributor mostly on issues/discussions.

Important

We appreciate your interest in the Quarto project, but the content above violates our Code of Conduct.

As a member of the Quarto community, you are expected to follow our Code of Conduct, which outlines the standards of behavior and communication that we value. The Code of Conduct applies to all online interactions within the Quarto project, and it is enforced by the Quarto team. By participating in the Quarto community, you agree to abide by the Code of Conduct and respect the rights and dignity of others. You can find the Code of Conduct at https://github.com/quarto-dev/quarto-cli?tab=coc-ov-file#readme.

Thank you for your cooperation and contribution. 🙏

[gadenbuie]

I'll add support to shinylive for # |. This isn't the first Quarto extension I've seen broken by this kind of issue; it's unfortunate that black and ruff format add spaces to #| (or other cases like #<< becoming # <<).

It might be too late for this, but neither black nor ruff make this kind of change to lines with two hashes, e.g. ##|. It might be worth Quarto adding support in this direction, too.

# Test with black
echo '
#| test: this
##| test: this
' | uvx black -q - 
#> # | test: this
#> ##| test: this

# Test with ruff format
echo '
#| test: this
##| test: this
' | uvx ruff format -q -
#> # | test: this
#> ##| test: this

[mcanouil]

The new release of shinylive supports # |.

• https://github.com/posit-dev/shinylive/releases/tag/v0.10.0

The following PR might also help in the future to prevent such issues:

• fix: protect code cell options from formatting #655