VSCode extension : Render on Save not working as expected

[declann]

Bug description

Hi!

Using VSCode extension Render on Save doesn't appear to be obeyed for my website project in the latest 1.4 Quarto.

quarto preview (i.e. bypassing extension) is a good workaround for my usecase, but interested in whats going wrong and getting this working inside VSCode.

Thanks!
Declan

Steps to reproduce

quarto create
# then select project, website, name: the-website
cd the-website
code .
# F1 > Quarto : Render Project
# edit index.qmd or about.qmd, no reload, despite Render on Save set.

Expected behavior

Expect a reload as I save .qmd pages (because Render on Save is turned on in extension preferences)

Actual behavior

No refresh, I need to Render pages individually to pick up changes

Your environment

Ubuntu 22.04.2 LTS
VSCode Quarto extension v1.91.0

Quarto check output

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.6: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.4: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.294
      Path: /opt/quarto/bin

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

[mcanouil]

I cannot reproduce.

Screen.Recording.2023-08-07.at.21.55.11.mov

[declann]

Might be OS specific. Is this on Ubuntu?
Quarto version? and is this Render Project command?

my experience now:

Screencast.from.12-08-23.02.31.53.webm

[mcanouil]

The issue is in your setup.

See https://github.com/mcanouil/quarto-issues/tree/main/quarto-cli-6440.

Screen.Recording.2023-08-12.at.11.15.53.mov

Note: I am using the latest versions of everything.

[declann]

Seems like the button has a different behavior to what I am using:

Press F1 > Quarto: Render Project command

Are you reproducing my issue with that path?

Render button works for me but doesn't give me the functionality I want since I am developing multiple pages of a website, i.e. it doesn't render on save across .qmd files. Separate issue but think that for projects Render Project is more sensible for the UI?

Another subtle difference I notice (besides different quarto preview commands) is that the Render button view includes a zoom setting and defaults to Auto.

Hopefully it's not a lot of work to either bring Render on Save functionality into the Quarto Render command path or else bring those code paths closer if it makes sense? (and if you reproduce behavior I see)

In the meantime, I will use quarto preview manual command and external browser.

[mcanouil]

I am developing multiple pages of a website

As any website by definition.

I don't understand your issue with using the default preview button.
render project is to render everything in the project, see the --render all.

Screen.Recording.2023-08-12.at.12.53.00.mov

[declann]

You hit multiple Render buttons to show live updates to separate pages - this isn't merely saving the file, which is what I expect by Render on Save when working with a website.

We can argue this expectation might be bad for the button (its unclear if Render should apply to the page or the project - it clearly applies to the page), but when I run Render Project then I think that goes away, and my expectation is also how things work when running quarto preview outside of the extension.

So try this to reproduce:

Hit Render on the index.qmd file, then navigate to About in the preview, then edit-save About.qmd - does it update? No? Should it?

Separately:

Run Render Project command via F1, follow the same process - does it update - if not - you are reproducing what I'm experiencing, and it is not working as I'm expecting. It is a bug, unless my expectation is bad.

Finally:

Run quarto preview in the project folder without using the extension. Edit-save about.qmd, you see a live refresh. Edit-save index.qmd, a live refresh that navigates to the index page. This is the DX I am expecting from Render on Save, and certainly, it works better for me when dealing with projects (multiple pages).

[mcanouil]

Did you look at the video?
I went back twice to edit and see the previewed pages.
Where do you see me hit render every time?

[declann]

Oh, you hovered where I thought you clicked. So you clicked once. Apologies.

So this is what I'm understanding from the video:

You are getting a live render for index.qmd - as that is where you clicked the button.

When you edited index.qmd where you were navigated to the About page, the preview was brought back to the index page.

However when you edited about.qmd from browsing at the index page, the preview was not brought back to the About page.

quarto preview has a different behavior that appears to be deliberate and preferable.

The button is a little ambiguous because it does not say Render Project, however the command Render Project does not appear to respond to Render on Save at all.

[mcanouil]

Currently Quarto does not follow/sync with code changes when previewing, so you have to navigate to the pages you changed.
This should get better with #6518 as Quarto will have more knowledge of which document creates which pages, etc.

Regarding the "ambiguous" naming, this has been discussed in Quarto team. render button does render everything, but also preview if possible the document(s).
Regarding, the command associated with Render Project, I am not sure if it is a bug/conflict or a design that render-on-save: true does not work when --render all.

[github-actions]

Thank you for using Quarto and reporting an issue!

Unfortunately, this issue is now considered stale because it has been opened since 14 days without providing a "working" reproducible example to help us investigate.
If you are still facing the issue, please review the "Bug Reports" guide on how to provide a fully reproducible example as a self-contained Quarto document or a link to a Git repository.
Without a reproducible example, it is unlikely that the issue will be addressed.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[mcanouil]

Regarding, the command associated with Render Project, I am not sure if it is a bug/conflict or a design that render-on-save: true does not work when --render all.

@cscheid @jjallaire any pointer here? I would personally assume, --render all would still respect the option even if only for the format being previewed.

[cscheid]

(@mcanouil sorry to revive this old issue, but I don't understand your question here, and I'd like to.)

[mcanouil]

If I recall properly, setting render-on-save: true in VSCode has no effect when rendering a project using the command from the command palette.
It only applies when previewing one format.

I am not sure it still applies as the extension and Quarto CLI had many changes in that area in the past year.

I'll try to "reproduce" (remember) with current versions later this week.

[cscheid]

If I recall properly, setting render-on-save: true in VSCode has no effect when rendering a project using the command from the command palette.

Sorry, I still don't understand. it's "render-on-save", not "save-on-render". Why should an option that triggers on save have any effect on a command that is about rendering?

[mcanouil]

I think at that time, there was a preview but it was not trigger on save when "render all".

[mcanouil]

But I really need to check and test again the VSCode commands (I don't use the render on save option in my day to day work).

For instance the command has been renamed since this issue.

[mcanouil]

Let's close this as, I tried and everything seems to work as I would expect (at least now).

The original post issue was a confusion with preview/render and the render-on-save option designed to work with quarto preview.
Also note that since then, the button has been renamed to be more consistent with the Quarto command it triggers.

[mcanouil]

Re-qualifying this as support and closing.

In case, there is still an issue, please go to https://github.com/quarto-dev/quarto.

[declann]

If the original issue was a confusion, I don't think the UI change addresses this.

The button says Preview, but quarto preview command redirects the browser to the actively edited ('saved') document.
Render on Save suggests that something happens when quarto files are saved. But nothing happens most of the time in my normal workflow on websites because -

the Preview command is tied to a single qmd file - including for a website project. I can only determine this by studying the command that's issued.

Preview This Page as button would mitigate my confusion. Preview doesn't improve it.

[mcanouil]

• VSCode Extension : Preview not working as expected for websites quarto#472

Issue is more related to VSCode extension than Quarto CLI, i.e., VSCode extension is missing a "preview project" command. Currently, the quarto preview command always take an input file so only that file is watched for changes.
See quarto-dev/quarto#472 (comment)

[VivaldoMendes]

Hi all,

I have the same problem.

I am on a Windows 10 machine, Quarto v1.5.56, VSCode v1.92.2 (user setup). I am editing a website using Quarto. Everything works fine except for previewing the changes I produce in the document.

Suppose I produce some changes in the document and try previewing them by typing the usual shortcut Shift+Ctrl+K. The problem pops in in that case: I can see those changes only if I close the Quarto preview pane and do Shift+Ctrl+K again. This is annoying if we have a lot of changes to test in the document. How can I solve this problem? I searched in forums like these and tried to implement the solutions that have been proposed, but I have yet to be successful so far.

Thanks.

[mcanouil]

@VivaldoMendes This issue is closed. Please open a new GitHub Discussion possibly referencign this issue. Thank you!