Can I do this with a custom Visual Studio Code Extension? - visual-studio-code

I would like to have an additional feature in Visual Studio Code - essentially the "Scope to This" from the full Visual Studio Solution Explorer.
It is basically a context menu (right click) entry in the File Explorer of Visual Studio Code - which then should limit which files and folders are displayed.
Is such a thing possible with a Visual Studio Code Extension?
I never built an extension for VS Code before and would like to know if this is even possible or if I would just waste my time.

According to the API docs, there is no way to filter visible files in the Explorer like it can usually be done with the files.exclude setting. However, it is possible to open another folder with the workspace.openFolder complex command. This will probably also close all opened editors, and forget about the original workspace root path.
Your extension would need to remember the initial root path and opened editors to undo this "Scope to This" menu, and reopening everything every time could cause quite some lag.

You can't customize the normal explorer view.
However, you can do something like this with custom views. It allows you to create a new explorer view that can list what you want and behave as you want.
For an example implementation, check the vscode-code-outline.
If you can add a context menu entry separately too.

Related

Visual Studio Solution Explorer like experience for VSCode

Sorry in advance if this is not the right place to ask but can someone help me customise VS Code to work similar to Visual Studios Solution Explorer?
In Visual Studio we have the Solution Explorer which lists all files but also there are 2 very handy view filters; found in the title bar of the Solution Explorer panel.
Open Files Filter
Pending Changes Filter
if neither is selected then default to show all files in the solution
Ideally I want the Workspace view that lists all files in VSCode, but also a toggle to only list 'Open' files. (I'm less interested in Pending Changes).
I'm aware of the Open Editors view but I find this difficult to navigate since it's a flat view and isn't a nested directory structure. When every file is called view.html in its own folder it's a nightmare to eyeball the list of files.
Also I think toggling between "all" and "open" files would be easier than going up and down between 2 panels when you want to open something new.
So is this possible, does anyone know of a way to customise vscode to get this behaviour?
Thanks in advance!

How can I disable problems for virtual files in VSCode?

I am working on a .Net Core application and I keep running into this problem where I get all sorts of random issues appearing in the Problems window in VSCode for "__virtual" files. There are no problems in the actual razor page (.cshtml) and everything is working how we would expect. Is there a way in VSCode to mass ignore all problems from __virtual files?
This started to happen to me after the latest update of Visual Studio Code.
My solution was to configure file association for .razor__virtual.html files into text
Open visual studio code
Click Settings icon in the left bottom and click Settings
In the search box, search for Files: Associations (Copy-paste this)
Click [Add Item] button and enter **/*.razor__virtual.html for key, text for value.
It should look like this,
Done!

Why are sub-folders within the File Explorer in Visual Studio Code collapsing into a single line?

I am relatively new to VS Code and I think I must have accidentally changed a setting.
VS Code used to clearly display all sub-folders below and indented to the right from their parent folders, but something has changed and now my sub-folders display somewhat like breadcrumbs in the File Explorer (see image posted below).
I've tried looking through the Keyboard Shortcuts and 'Tips and Tricks' doc for VS Code as well as googling and searching through Stack Overflow, but can't seem to figure out what the command is to change this setting. Any thoughts on how to fix this would be really helpful.
This is a fairly newer change to VSCode that came on the November 2019 (version 1.41)
The setting you are looking for is "compact folders". You can get there by going to:
File → Preferences → Settings → explorer.compactFolders and then unchecking the box.
From November 2019 (Version 1.41) release notes:
Compact folders in Explorer
In the File Explorer, we now render single child folders in a compact
form. In such a form, single child folders will be compressed in a
combined tree element. Useful for Java package structures, for
example.
Setting explorer.compactFolders controls this behavior. By default,
this setting is turned on.

Visual Studio Code - Tabs (editors) of the same project in multiple screens

Using multiple screens I normally place multiple classes (files) in different screens, this helps me a lot while refactoring, checking tests and comparing changes.
Visual Studio Code does not allow me to drag a tab outside the window and view it in (for example) another monitor.
I checked the documentation and plugins, but the only way I found, is to open two windows, pointing to the same project (folder) and put those in different screens.
I don't like this solution, that causes also some problem when I watch code changes using TypeScript.
Any suggestion?
I use Windows 10, latest version of VSCode.
A solution is to press CTRL+K and after releasing CTRL, press O.
This will open the current file in a new window.
There are few things I don't like about this solution:
- Drag and Drop does not work
- Create a new instance of VS Code resulting in (for me) 180MB of ram used
- To open the file it takes to me few seconds (quite slow)
- The file remains open in the original window as well
Update 20/03/2019:
There is a feature request you can track here:
https://github.com/Microsoft/vscode/issues/10121
And an explanation about why this is difficult to implement here:
https://github.com/Microsoft/vscode/issues/10121#issuecomment-345770248
Update 20/03/2019:
Another important side effect highlighted by #Mär is that:
the IntelliSense fails to establish references it had when the file
was opened in the window, where the entire project is opened
The easy way but with the same drawbacks. More ram and resources will be used. Is to wrap your project in a folder.
It's the best possible thing. As by now!
=> Duplicate the workspace.
Open the command pannel ctrl+shift+p or F1.
Then write dupl
You'll get that
That's it.
More
If you want to add more folder to the working space.
=> go to File then Add Folder To Workspace
You can add as many as you like.
 Also better more
You can open a new window (ex: ctrl+n)
And then go File > Add Folder To Workspace.
And start adding folders to your new Workspace. You can add any folder, that is already open or not. That's too way great. You can have all the needed folders for example in the second screen.
A little hack I used is to just stretch the editor window to fill both screens and split the view pane between the monitors such that both screens show just one open file.
This is a cheap hack that works without opening multiple instances of VSC.
It may not be the proper solution, but it works without eating up all my system memory.
I found the following way to work on multiple monitors (important: they must be the same size and resolution):
open a visual studio in windowed mode on the 1st monitor (in my case it is a left monitor)
move the window to the (left) top corner
stretch window to the 2nd monitor (right) bottom corner
split screen by clicking “split editor” several times
move the code sections separator to the edge between the monitors
This is old qestion, but such way can be useful for someone. It is not very convenient, but it works. The solution may have already appeared in the VS itself, but I didn't find it.
Visual Studio Code does not allow me to drag a tab outside the window and view it in (for example) another monitor
Actually, VSCode 1.57 (May 2021, 4 years later) will propose something close:
Improved editor drag and drop across windows
Support for dragging editors to other windows was improved in this release. You can now drag diff editors, custom editors and the entire editor group to another window to open the editors there.
My solution was to use Remote-ssh to connect to self and open in another window. This does take extra resources. But I find this comfortable as I don't need to create additional workspace.
For me on Ubuntu the solution was to create a project folder symlink and ope it in a new window (as it won't open the same folder in another window)

How to make VS Code retain old project folders in sidebar like sublime?

In sublime, when I drag a new folder into the editor, it gets added at the bottom of the list in the sidebar, but in VS Code, the old project is removed from the list on only the current project is active.
Is there any way to make VS Code sidebar hold the old projects as sublime did? (PS: I am new to VS Code)
Here is a comparison of Sublime sidebar and VS Code sidebar.
EDIT: I have tried the VS Code Insiders edition, The add to workspace option kind of works, but is not the exact solution of what I was looking for. Because even if you add multiple folders to the workspace, the next time you drag and drop a folder in VS Code, The workspace will get replaced with the new folder which you opened. I want that old folder to remain in the sidebar, and the newer folder to open below it like in sublime (see the image for reference).
Use Insiders version of vscode. There was introduces a feature called multi-root workspace. In nutshell: you can open multiple folders in 1 vscode window (drag-n-drop supported too).