language-tools
language-tools copied to clipboard
vuejs
[Feature request] improve `Hot Reload` feature
At the moment, if we want to use the hot reload functionality, then we need to write this to the VSCode settings.json:
"files.autoSave": "afterDelay",
and run this command:
npm run serve
This functionality is well suited for those cases when we edit html or css but when we write a logic of the app, this is not the optimal option, because during the software development process there is constant and unnecessary compilation of code.
The solution to this problem could be if we write in settings.json this:
"files.autoSave": "onFocusChange",
or even this:
"files.autoSave": "off",
But it's a compromise, why compromise if you don't have to compromise?
There are two solutions; One is a button on the taskbar, how this is done in the Visual Studio IDE 2022
and another solution is Flutter extension for VSCode:
https://github.com/vuejs/language-tools/assets/38082501/8e909c3f-3639-4d6d-b751-918a3ab7e6d2
As you can see from the video, Flutter developers have not disabled the coolest VSCode feature:
"files.autoSave": "afterDelay"
It would be good if we combine these two methods and do this: let's write again in settings.json:
"files.autoSave": "afterDelay",
then let's create a small menu on the VSCode taskbar:
run the command:
npm run serve
Then if we select Hot Reload, everything happens as before: the system looks at the changes in the files and compilation occurs instantly but if we select Reaload on Click:
then compilation occurs only when the Ctrl+S buttons on keyboard (or triangle button on taskbar) are clicked.
So, my request is not only about Hot Reload but smooth switching between Hot Reload and Reload on Click.
Do you mean the vue extension should integrate with the bundler and hot-reload when you change your code?
Yes, it would be better if we got this functionality out of the box.
I think that's just added complexity for no real gain, the dev server can just watch the filesystem imo.
I think that's just added complexity
come on, bro... for Visual Studio IDE 2022 and for Flutter this does not add complexity, but for Vue it does?!
no real gain
for me as .Net developer and for my Flutter developer friend this has a gain :)
Honestly this "hot reload" feature is provided by your bundler, such as vite and webpack, right? All you need is to save the file and wait for it to reload.
@so1ve bro, don't you see my Flutter video example above? The Flutter developers do not disable coolest feature of VSCode:
"files.autoSave": "afterDelay"
and Vue.js developer should disable this feature and manually save and this is not safe and not comfortable... I suggest solution when you can switch between the to modes: existing behavior and new one... You need to test it to understand.
regardless of this setting
"files.autoSave": "afterDelay"
if you config your bundle right, the hot reload is an out of box thing.
if you config your bundle right, the hot reload is an out of box thing.
first:
my request is not only about Hot reload but smooth switching between Hot reload and Reload on Click.
second:
in my vue.config.js I have:
module.exports = { devServer: { webSocketServer: false } }
and this does not reload browser ( I need to manually reload browser), but comipation still happens, it is compromise... Please give me your solution. hope I will get the experience that I described above.
but smooth switching between Hot reload and Reload on Click.
In vue or any frontend frame work what you want is very unlikely to be supported. You start a server for development, you have to restart the server to "switch" things.
Here's webpack reference https://webpack.js.org/configuration/watch/ since you are using webpack.
Either way, this is totally out of scope of a language server tools/extension. And to me the request is kinda weird, if you only want the page reload when hit <C-c>, just turn off auto save and only save if you want to see the changes.