Auto-apply of changes when saving in vscode

1
votes

I've installed vscode into two different PC, one of them auto-apply the changes I have made in the template of the .vue file that I am working while it doesn't do so in the other unit (e.g. When I change a height of a button from 1rem to 5rem, I'd be able to see the changes in the Google or Mozilla Firefox browsers either immediately applied or the page reloads automatically without me doing anything to it). The same when I have made changes in the external CSS files that I have in the assets folder.

I have also tried and installed the same extensions (e.g. live-server, live-Sass-compiler, vetur, prettier) but the same issue persist in the other PC. Now, I can't access the PC with working auto-apply-changes-made-in-the-template-or-CSS. So my question is: Does any one have any idea how to enable or restore the function that automatically apply the changes when you save a change in your vscode to your browser.

Other troubleshooting that I did:

  1. Uninstalled and reinstalled vscode completely from the system.
  2. Deleted the local folder of the project, cloned them again, and reinstalled the packages.
  3. Deleted all extensions and reinstalling them again.

P.S. I use nuxt.js framework while working on the same project.

1
visual-studio-codenuxt.jsvscode-settings

1 Answers

0
votes

The issue is probably coming from a local VScode service not running or some setting that is not mirrored to the other one.

You could maybe compare the 2 instances of VScode's settings, for that: ctrl + shift + p (aka Command Palette) and type in Preferences: Open Settings (JSON).
The concerned setting is maybe about "editor.formatOnSave": true, or maybe you don't have an ESlint server running?

Usually, Nuxt (more precisely Webpack itself) just watches the files that are in the project and if you edit those, it will HMR (Hot Module Reload) the page.
If the changes are also related to SSR, it will refresh the page.

You could use this extension: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
It will allow to sync the settings between the editors. So, install it on the "working" VScode, upload it's settings and download those on the "non working" VScode.

Last thing, you could also try to create a new Nuxt project to see if it HMR/auto-reloads, may be coming from the project too (if something was messed up). On top of the reload probably being faster!