Hot Reload Shortcut for VS Code's Terminal When NOT in Debug Mode

[psygo]

Use case

I typically don't use Debug Mode on VS Code. I know I probably should invest some time to learn more about it, but, regardless of my lack of knowledge, I feel like there should be a shortcut or setting option to hot reload or hot restart the app simply through the terminal.

Proposal

So far, I'm using the multicommand extension to do this, but I actually don't know how to concatenate it with the ctrl + s action in VS Code, because I couldn't find the corresponding action in the VS Code settings.

In the settings.json:

"multiCommand.commands": [
    {
        "command": "multicommand.hotReloadCustomShortcut",
        "sequence": [
            {
                "command" : "workbench.action.terminal.sendSequence", 
                "args" : {"text" : "r"}
            },
        ]
    }
],

And, in the keybindings.json:

{
    "key": "alt+r",
    "command": "multicommand.hotReloadCustomShortcut"
},

alt + r is already taken by Terminal: Toggle find using regex as a VS Code default, by I overwrite it anyway (because I mostly don't care :P).

Is there a better solution to this? Does Flutter have any plans of implementing this already?

[dnfield]

This issue is more appropriate for https://github.com/Dart-Code/Dart-Code/issues

/cc @DanTup

[DanTup]

This isn't something likely to be supported - the terminal in VS Code is just a terminal - we have no idea what's running in it (whether it's a Flutter process or something asking you to press r to confirm deleting files).

There's also really no reason to do this - if you don't want to debug, you can use Debug -> Start Without Debugging which will run without debugging but you'll still get all of the other integration from the extension (like hot-reload-on-save). Though FWIW, I don't think there's really anything to learn to run with debugging - just press F5 to launch the app and if you want to use breakpoints/stepping you can, but otherwise it'll mostly behave the same as running from the terminal, except with the possibility to use the additional features (like hot reload on save, hot reload/restart from the toolbar, launching DevTools and the widget inspector, etc.).

If there are issues with running under the debugger that make the terminal seem attractive, please do file issues (in the Dart-Code) repo. It would be much better spending effort addressing that than trying to improve the experience of running in the terminal (which will never be great given the limited access to it).

Thanks!

[psygo]

Thanks for the fast feedback! I'm gonna give Debug mode a try after your tips.

But, still, I have some thoughts to share:

This isn't something likely to be supported - the terminal in VS Code is just a terminal - we have no idea what's running in it (...)

You likely know more about this than I, but isn't it an integrated terminal? I don't know if you could extract information from it, but you certainly can send data to it though, e.g. the workbench.action.terminal.sendSequence I used in my example.

And, for this use case, would it be necessary to know what's being run? I think that should be on the user; if she's running garbage on it and then presses to hot-reload/hot-restart, it's mostly her fault if it breaks, the shortcut only hot-reloads/hot-restarts. I make this mistake sometimes when I accidentally send the r to another open integrated terminal I have open, nothing much, and it's on me for not remembering it.

There's also really no reason to do this (...)

If there's no reason to allow a shortcut for the terminal, why is there one for allowing it in Debug mode? It seems to me much more consistent, then, to not do it for either. If you choose to do it only for Debug mode, it seems to imply that you (or the team) would rather have people using it than the terminal — which is ok, but is that what you mean?

And, besides all that, although using Debug → Start Without Debugging is a nice suggestion (and probably more pleasant for most situations), it seems to be a 2-step equivalent to the 1-step of using the terminal.

If there are issues with running under the debugger that make the terminal seem attractive, please do file issues (in the Dart-Code) repo.

Are hot-reload/hot-restart issues solved elsewhere? I thought hot-reload/hot-restart were specific to Flutter...

---

To me, even though you might still object, having a standardized way of sending a signal to the terminal in order to command it to hot-reload/hot-restart would only beneficial to the developer — I would be willing to bet 7:3 that, if you ask other developers about this, their answer would be "why not?".

Anyway, thanks for the shared thoughts and interaction! Keep up with the good work!

[DanTup]

And, for this use case, would it be necessary to know what's being run? I think that should be on the user; if she's running garbage on it and then presses to hot-reload/hot-restart, it's mostly her fault if it breaks, the shortcut only hot-reloads/hot-restarts.

Sure, but then this feature wouldn't be "a shortcut to hot-reload", but rather "a shortcut to send an 'r' to the integrated terminal". If it was implemented, the request to make it run on-save probably wouldn't be far behind, and that wouldn't work because of this restriction. It feels like a strange thing to build in to the extension when it's not the intended way to run apps - the IDE runs Flutter in a special mode that provides an API to do this properly (and can support things like on-save).

If there's no reason to allow a shortcut for the terminal, why is there one for allowing it in Debug mode?

It's a fully supported feature in debug mode. The app is run in a way that provides an API for the editor to provide lots of additional features (like hot-reload, hot-restart, debugging, structured error messages, opening the widget inspector). It's not that being able to hot reload isn't useful, it just doesn't make sense to start building an API on top of the Flutter console interface that is designed for users when it has a perfectly good machine API.

And, besides all that, although using Debug → Start Without Debugging is a nice suggestion (and probably more pleasant for most situations), it seems to be a 2-step equivalent to the 1-step of using the terminal.

I'm not sure I follow. Running this way is just pressing Ctrl+F5. This is less steps than switching to the terminal and typing flutter run and it provides a lot more functionality. It's also less steps to reload, because it'll hot-reload on-save for you, you don't need to invoke a shortcut at all.

Are hot-reload/hot-restart issues solved elsewhere? I thought hot-reload/hot-restart were specific to Flutter...

The Dart-Code issue tracker is for issues for both VS Code extensions (similar to how this repo has issues for flutter/flutter, flutter/engine, flutter/plugins) for convenience (and because it's often hard for users to know which issues would go where - for ex. the debugger for Flutter is built on top of the Dart one and only adds a small amount of additional functionality).

having a standardized way of sending a signal to the terminal in order to command it to hot-reload/hot-restart would only beneficial to the developer

If you're running from the terminal I can understand that this seems useful, but from the extension's perspective this feature would not be to hot-reload, but to "send an 'r' to the active terminal", and running in the terminal is not the expected way to run Flutter apps (for several reasons). The integrated terminal is really just a terminal - yes we can send key-presses to it, but you should consider it a separate terminal that just happens to be hosted inside the editor. It would be strange for us to send keypresses to an external terminal and this isn't really that difference.

If you find friction when running using F5/Ctrl+F5 that makes the terminal seem like a good choice, please do file bugs and we can discuss. But otherwise, running from the terminal seems sub-optimal in every way and it would be better not to build features that might not work reliably on top of it.

(If you want to discuss further, feel free to open an issue at https://github.com/Dart-Code/Dart-Code for discussion - it probably makes more sense there :-))

[psygo]

Thanks for the very enlightening answer.

I've been using Flutter for 3 months and I didn't know that the corresponding VS Code extension was designed to be used with the Debug mode.

Most of the courses and videos I've participated in and watched did not feature Debug mode in a prominent enough fashion to convey the commitment you (the Flutter team) are putting in. From that perspective, I think many other developers share a similar view. So, I would suggest having a more explicit message somewhere that might indicate to the developer the intended use, for example:

• Even though there is an animation on the Dart Code VS Code extension using it in Debug mode, to the developer, it might seem like an option of use case, and not the intended one.
• Shouldn't this information be featured on Dart Code's README.md? Something like "For an optimal experience, please consider using Dart Code in Debug mode (...)".
  • A similar message could be featured in the Flutter VS Code docs, which does recommend it, but does not say anything about it being the intended debugging API.

I could create corresponding PRs for my suggestions, but, first, let me know what you think and if they are, really, good suggestions.

[DanTup]

I think the Flutter docs already cover this fairly well:

Start debugging by clicking Debug > Start Debugging from the main IDE window, or press F5.

There are also sections for running without breakpoints and running with breakpoints. I'm not sure if more docs will help but I'll tweak the Dart + Flutter extension READMEs to specifically mention launching with F5/Debug menu where they mentions debugging. FWIW, this is how other language integrations in VS Code work - you need to run them using the integration to get any of the debugging features.

If there was an easy way to detect the user running flutter in the terminal (and it was a command that can be run with better integration through the extension like run, clean, or create) I'd definitely like to show a notification to guide the user towards the built-in options, but unfortunately I don't think that's possible. We do show a notification telling you to press F5 to run if you create a project using the Flutter: New Project command though.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.