Auto-saving files upon changes with Visual Studio Code - visual-studio-code

I have used WebStorm from JetBrains for almost four years now. It's a fantastic IDE for many reasons, but one of the best features is that it saves versions of files outside of version control. So if you accidentally delete files or lose files before they are saved by your version control system, WebStorm has a copy of them and there are visual diff tools to use. This feature has saved me on more than one occasion.
For Visual Studio Code, is there some feature/plugin that will auto-save copies of files as they change? Will Visual Studio Code save the files to some central location, or perhaps in the .vscode folder in the local workspace?
The feature in WebStorm is available from Local History → Show History from a folder or file. Here is an article about it:
Using Local History for code changes tracking
The view looks like:

You can go to menu File and choose Auto Save.

You can enable auto save with these methods:
Check the Auto Save item in the File menu
Go to Settings, search for auto save, and select the auto save option (afterDelay)
Auto save description in Visual Studio Code documentation

Yes, Visual Studio Code can auto-save changes on files as you make changes. It also allows you set a delay for how long to wait before saving the file.
Here's a link that should help you with that.
Or a shortcut you can simply navigate to your Visual Studio Code settings, and add the following to your settings.json file.
{
...
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
...
}
This will instruct your editor to autosave after a 1000 ms delay. You can set the autosave option to onFocusChange to autosave whenever you move your cursor away from the current text area.

There's a package called Local History that can be used to save a backup of your files outside version control.
You should check that out.

As of March 2022 (version 1.66), Visual Studio Code has a built-in feature called Local History that automatically creates commit-like versions of your files on every save.
It is enabled by default, but you can double check the setting workbench.localHistory.enabled to make sure it is enabled in your project.
From the reference:
Each local history entry contains the full contents of the file at the time the entry was created and in certain cases, can provide more semantic information (for example, indicate a refactoring).
From an entry you can:
Compare the changes to the local file or previous entry.
Restore the contents.
Delete or rename the entry.
The saved local versions are accessible from the Timeline section in the File Explorer tab.

Also, ensure you add .history to your .gitignore file, so Visual Studio Code doesn't track every change made to a single file as changes made to multiple files. This can be a problem and make your files changed so large even though it's a single file or a few files you made edits to.

Related

Is it possible to paste files copied to the clipboard from other applications in VS Code?

Within the explorer panel of VS Code itself, if I want to copy a file to another directory in the workspace, I can use ctrl+c and ctrl+v, but if I find a file from another application on my computer such as the native File Explorer application, first pressing the shortcut key ctrl+c and then going to the VS Code window and pressing the shortcut key ctrl+v in the Explorer panel, there is no effect.
Note that I'm not talking about copying the contents of the file and pasting into VS Code. I'm talking about copying "the file" as in the notion of the file to the desktop environment.
The workaround is the use the native file explorer, copy the file first, then open the folder opened in VS Code, and finally paste it within the native file explorer. But I find this so troublesome.
Is there an easier way to do this? Does VS Code support such functionality to paste files copied to the clipboard from a different application (not VS Code) and paste into VS Code? Is that functionality hidden behind a setting that I need to change? Or is this possible via an extension?
Vscode does dragging the filename from a native file explorer (at least on Windows) and dropping in vscode's Explorer where you want it.
You can also use your OS's Open With... functionality and then drag the tab of that editor into whichever directory you want.
You can choose Add File from File to add a file to your workspace. Or you can use New File from File to create a new file in your workspace and copy the content of the file outside to it.
At the time of this writing, this is not supported... yet!
Work to implement this is tracked under this GitHub issue: Explorer: allow to paste files from the clipboard into target folder #130036, which is a subtask of a larger issue tracking a larger effort for Better drag and drop / clipboard integration of files across applications #164.
You can give a thumbs up reaction on those issue pages to increase their prioritization (but please don't leave "me too" comments there, as such comments are considered annoying noise).
pingren (a contributor to the VS Code repository) tried to implement this and found it to be more complicated than it looks. You can read their explanation of why in their comment there. One of the difficulties stems from itegration with system keybindings and VS Code's affordance for remapping keys:
the onPaste event could only be triggered by system paste (cmd+V on macOS). Users could change filesExplorer.paste command to any keybindings. So we need to consider how to merge native paste from clipboard and VSCode explorer paste.
There's another feature-request issue (Copy paste files from native explorer to vscode #89862, created before #130036) where isidorn (another VS Code contributor) commented:
This is a fair feature request however I believe there is a Chrome limtation which is preventing us from achieving this. [...]
As for extensions that might do this, I don't know of any (but haven't tried searching intently).
Other possible workarounds:
Try dragging the file from your native file explorer application to the VS Code file explorer panel. This is confirmed to work at least on Windows and Ubuntu.
From Mark's answer (copied under CC-BY-SA):
You can also use your OS's Open With... functionality and then drag the tab of that editor into whichever directory you want.
From user103's answer (copied under CC-BY-SA), and partially mentioned in the question post already:
You can choose Add File from File to add a file to your workspace. Or you can use New File from File to create a new file in your workspace and copy the content of the file outside to it.

How to prevent VS Code remembering files outside work folder?

My workflow with VS Code is to always use project folders on projects. This works great, but there's one thing that's messing things up right now;
When opening just a single file from another project while working in another project, lets's say webpack.config.js, I use Windows Explorer rightclick to open that file in VS Code. However, this always opens the file in the currently open VS Code instance.
This adds the file from that other folder now to the memory of the previously opened files in the open project while it has nothing to do with that project.
When using the quick file open of VS Code now it happens a lot VS Code opens a file from that other folder, only because that outside file has been opened once while I was working on this project.
This is error prone as now it happens a lot, especially when working fast, that the wrong, for instance, package.json or webpack.config.js file gets opened, because VS Code now also suggests files that are outside this project. That's pretty frustrating and causes changes to be made in the wrong files pretty quickly.
I know we can clear the editor history and have to do it a lot now. But to me that's the other way around, doesn't solve the real problem and when not done often the issue remains.
So I want to get rid of this issue and have the following questions:
1) How can we change the 'Open with Code' rightclick menuitem in Explorer to open files always in a new instance of VS Code?
2) Is there a config settings to disable the behaviour that VS Code remembers files that are outside of the current work folder?
Thanks in advance, this thing is bothering me for quite some time now!
How can we change the 'Open with Code' rightclick menuitem in Explorer to open files always in a new instance of VS Code?
I assume you are a Windows user. You can edit the context menu behavior from Regedit.
Follow the below steps:
Press Windows + R
Type regedit and press OK
Go to Computer\HKEY_CLASSES_ROOT\*\shell\VSCode\command in regedit
Add -n parameter to the command like below
It will help you to open every file in a new window when you use Open with Code.
For your second question, Is there a config settings to disable the behavior that VS Code remembers files that are outside of the current work folder?
Open VS Code settings
Search window.openFilesInNewWindow
Make it off to on like below
With this configuration, you can't open new files in the current workspace therefore technically you prevent VS Code remember outside files. Not directly but it helps.
I don't like how "recently opened" files are shown in VS Code Quick Open (Ctrl+P). I think OP is describing this behavior...
The behavior to remember "recently opened" files causes me problems when I mistakenly open a temporary/copy of my file, i.e.
C:/users/temp/code.js
... instead of the true file (i.e. located inside the currently-open VS Code project)
C:/git/source-control/code.js
...my confusion happens because because both files are listed among the options when I use Quick Open Ctrl+P and type "code"
For me , the Quick Open list also has the answer, any "recently-open" files should have an "X" icon on the right side. You may need to hover your mouse over the file you want to remove.
Click the "X" icon to "Remove from recently open". Quick Open will always be able to find files in your current project, even if you remove them from recently-open:
Please note I don't have access to regedit as suggested in the accepted answer; my answer here does not require regedit

Is there any way to highlight a file in the Visual Studio Code explorer?

As a reminder, I would like to be able to highlight a file (in Explorer) that I have made important changes to. Highlighting it would make it easy to find again!
Visual Studio Code still doesn't provide such a feature. If you have source control, it will allow you to track modified files unless it is not available yet.

How to temporarily disable "preventing dirty writes" feature in Visual Studio Code

In my project, I've used some build/linting tools so they can automate force change my code based on some convention code styles but when I was running those scripts, vs code showed an error message:
Failed to save "<file-name>": The content on disk is newer. Please compare your version with the one on disk.and continue to open the "Resolve to save conflict" tab.
It seems to be annoying and not convenient for me.
So can you tell me how to disable this feature of VScode for a temporarily time?
v1.42 is modifying this functionality including adding a setting so that the dirty file/save conflict notification can be disabled. See https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#ignore-save-conflicts
Ignore save conflicts
VS Code has a built-in mechanism to show an error when you try to save
a dirty file that has been changed outside of VS Code or by another
program (for example Git):
The motivation is to inform you that saving will overwrite the
contents on disk even though the file was changed after the file
became dirty. Clicking the Compare button lets you review your change
along with the version on disk and either overwrite or revert the
file.
In cases where you know that the changes on disk can be overwritten,
there is now an Overwrite button directly on the notification. You can
also configure files.saveConflictResolution globally or per workspace or
file type to disable the notification altogether. The options are askUser (default) or overwriteFileOnDisk.

How to refresh content of opened files in VS Code?

I'm looking for a way to refresh the content of a file opened in editor after it was changed by other tool.
For instance I'm using angular command line which makes changes to files but VS Code doesn't refresh the content after that and I can't see any of that. What's worse when I try to save the file, VS Code by default tries to save the old content upon the newer (asks before of course, but still its not what I'm looking for).
I didn't find any keybindings for refresh the editor's content. Maybe there are any extensions?
Thank you.
It should reload itself automatically, but I had a machine that stopped auto-refreshing. I'd change the file externally (with vim or whatever), and the file I had in the editor wouldn't pop and refresh itself, which it used to do. It turned out to be a git-related extension. I disabled it, and autorefresh returned. If you haven't already, try it with extensions off.