Sorting files in VS Code Explorer - visual-studio-code

I'm using VS Code 1.25.1 on Win10. When I open the Explorer icon and look at a list of files in a folder, it shows the files listed alphabetically. I want to sort them by date modified, but I don't see any options to sort by other fields. Are there keyboard shortcuts? Any other options? Thanks.

Open user settings (Mac: cmd+, Windows/Linux: ctrl+,).
If you want this new sort order to apply to all VSCode projects, continue to step three. If you want it to apply only to the currently opened folder/workspace, first click on the "Workspace" tab that's directly below the settings search bar, then continue to step three.
Using the settings search bar, search for the following setting ID: explorer.sortOrder.
Click the dropdown for that setting and select your preferred sort order (in your case, modified).
If you'd like to quickly toggle this setting between different values (via a keyboard shortcut), use the Settings Cycler extension.

A more user friendly approach can be:
Open the workspace settings:
Ctrl+Shift+p
And open: Preferences: Open Workspace Settings.
Browse to Features > Explorer using the sidebar.
Use the Sort Order option to customise sorting.

So interestingly the Sort Order setting only seems to impact folders and files within the top-level workspace folders, if those top-level folders were added via the Add folder to workspace option.
For ex I had
Workspace
- ProjectA
- ProjectB
- ProjectC
Then I added another folder to the workspace, and it appeared at the bottom of the list. Because it was a top-level folder the Sort Order setting would not impact its order in the list. The Sort Order would only impact the files and folders within each of those ProjectX folders.
To fix this I directly edited the workspace file. To do so, open it with a text editor other than VSCode, and change the order of listed files.
For ex, mine looked like:
{
"folders": [
{
"path": "../../Desktop/ProjectA"
},
{
"path": "../../Desktop/ProjectB"
},
{
"path": "../../Desktop/ProjectC"
},
{
"path": "../../Desktop/NewProject"
}
],
"settings": {}
}
and all I had to do was change it to:
{
"folders": [
{
"path": "../../Desktop/NewProject"
},
{
"path": "../../Desktop/ProjectA"
},
{
"path": "../../Desktop/ProjectB"
},
{
"path": "../../Desktop/ProjectC"
}
],
"settings": {}
}

Related

How to set Control Groups in VS-Code / Shortcuts to specific files?

I would like to set shortcuts to specific files in VSC like in an RTS game.
I would like to mark specific files (like with Ctrl+1) and then jump to the marked file with that set pathway (like pressing 1). This would allow me to have files I need often on those keys but have them closed in the editor.
Thanks for your help.
I have written an extension for this: File Group
In this first release you have to manually edit the settings and add the groups and files they contain.
The paths mentioned in the lists need to be the full paths as used by the OS. When we have a Multi Root Workspace it is not known which WorkspaceFolder to use.
An example setting is
"fileGroup.groups": {
"1": {
"files": [
"C:\\Projects\\project1\\Tutorial.md",
"C:\\Projects\\project2\\API.md"
]
},
"2": {
"files": [
"C:\\Projects\\project2\\Tutorial.md",
"C:\\Projects\\project3\\Reference.md"
]
}
For the groups "1" ... "9", "0" there are default Keybindings of Ctrl+Alt+number, like Ctrl+Alt+3 (for mac Cmd+Alt+number, like Cmd+Alt+3)

How to hide autogenerated files from VS code

I want to hide auto generated dart files like .g.dart, .freezed.dart from vs code project. How to do that?
create a folder
.vscode
create
settings.json
put this:
{
"files.exclude": {
"**/*.freezed.dart": true,
"**/*.g.dart": true
},
}
this make local configuration in your project.
In v1.67 you can create an entry in the
Explorer > File Nesting: Patterns setting like so:
*.dart $(capture).g.dart, $(capture).freezed.dart
explorer.fileNesting.enabled: Controls whether file nesting is enabled
explorer.fileNesting.expand: Controls whether file nests show as expanded by default
explorer.fileNesting.patterns: Controls how files get nested
In addition the Explorer: Sort Order setting has a new option:
foldersNestsFiles: Files and folders are sorted by their names.
Folders are displayed before files. Files with nested children are
displayed before other files.
sortOrder.foldersNestsFiles
See also v1.67b Release Notes: File Nesting
Make sure you have Explorer > File Nesting: Enabled true
TL;DR
Type Ctrl/Cmd + Shift + p, choose Preferences: Open Settings (JSON) or Preferences: Open Workspace Settings (JSON) and add:
"files.exclude": {
"**/*.freezed.dart": true,
"**/*.g.dart": true
},
You can add more patterns if you like. Here you can find more information about the patterns.
More info
You can configure this in your workspace or user settings:
Open settings: Ctrl/Cmd + Shift + p and search for 'Preferences: Open Settings'. You can choose from 'Workspace Settings' or your 'User Settings', depending on if you want to exclude the files just in your current project (workspace) or for all projects. And you can choose if you want to use the UI tool or to modify the settings json file manually.
Using the UI tool:
Search for files.exclude and you can add patterns you want to hide in the project explorer. In your case add **/*.freezed.dart and **/*.g.dart, but you can exclude any pattern you like.
Editing the json file manually:
Type Ctrl/Cmd + Shift + p and search for 'Preferences: Open Settings (JSON)' or Preferences: Open Workspace Settings (JSON). Again, depending on if you want to exclude the files just in your current project (workspace) or for all projects.
Add this part to the json file:
"files.exclude": {
"**/*.freezed.dart": true,
"**/*.g.dart": true
},
Or add just the pattern lines, if files.exclude is already present in the settings.json file.
"On Mac.
Open VSCode,
Type Shift+Command+P,
Preferences: Configure,
Language Specific Settings,
Choose the Language (Dart),
Then add to file "
"files.exclude": {
"/.git": true,
"/.svn": true,
"/.hg": true,
"/CVS": true,
"/.DS_Store": true,
"/*.g.dart":true,
}
Save
Now, you don't see the *.g.dart files.

VSCode: Store and reopen a group of file tabs so that I reset a specific environment in the future

VSCode remembers the file tabs that are open in my Workspace from the last environment, and so if I close VSCode and re-open, I have the same files opened.
Over a day or two of work, I may switch between 2 or 3 different feature branches while my PR's are going through review.
Each feature branch is usually on a totally different area of the code base, which means, I will want to open different groups of files when working on each branch.
I wonder if there is a way to save snapshots of open tabs so that I can re-reopen in future.
A really nice flow would be to have those files open automatically whilst other files close when VSCode detects a branch change.
Get a "snapshot" of currently opened files.
Save this snapshot somewhere; make it easy to change.
Use the snapshot to open all of its files; close all other files first.
Be able to make multiple snapshots and call each one easily.
(1) is harder than you might think. There are a number of vscode issues about searching only within the currently opened files and the problem remains largely unsolved after a few years for this reason.
Demo: get the relative paths of all opened files (unfortunately the gif creation software did a poor job of capturing all the keystrokes used in all these demos) :
Holy crap, what just happened. One keybinding and they are collected and formatted in a specific way.
A number of things happened. The only way I know of to efficiently get a list of opened files (maybe true even in an extension) is through the "Open Editors" view. So we
(a) focus that Open Editors view,
(b) select the entire list, and fortunately there is a
(c) copyRelativeFilePath command (or copyPath for the full path) that will get them all in a list.
But the list initially looks like:
1.html
simple\\gulpfile.js
test1.txt
which isn't going to do us much good. But it is now on the ClipBoard and there is an extension, Replace Rules that is able to run the Clipboard content through a series of regex's (without modifying the Clipboard content either) and paste the result somewhere. So you will need that extension and a macro extension, here using multi-command to run all the steps. Here is the macro which goes into your settings.json:
"multiCommand.commands": [
{
"command": "multiCommand.getOpenedEditorsForTaskOpenAll",
"interval": 50,
"sequence": [
"workbench.files.action.focusOpenEditorsView",
"list.selectAll",
"copyRelativeFilePath",
// "copyFilePath",
"workbench.action.focusActiveEditorGroup",
{
"command": "replacerules.pasteAndReplace",
"args": {
"ruleName": "Prepare file list for task open"
}
},
"editor.action.formatSelection",
"cancelSelection",
"deleteLeft"
]
}
]
Here is the replacerules rule that is used in the macro:
"replacerules.rules": {
"Prepare file list for task open": {
"find": ["(\\\\)", "^(.+)$"],
"replace": ["\\\\", "\"'$1'\","]
}
}
It just modifies that bare file list into something we can use in a task. Here is a keybinding to run that macro (keybindings.json):
{
"key": "ctrl+shift+i",
"command": "extension.multiCommand.execute",
"args": {
"command": "multiCommand.getOpenedEditorsForTaskOpenAll"
},
}
You should be able to test this already to see if it'll dump the formatted file list to wherever your cursor is in the current text editor.
One way to open up all these files at once is to put them into a task (in tasks.json):
{
"label": "Open snapshot 1",
"command": "code",
"args": [
],
"type": "shell",
"problemMatcher": [],
"dependsOrder": "sequence",
"dependsOn": [ "close all editors" ]
},
{
"label": "close all editors",
"command": "${command:workbench.action.closeAllEditors}",
"type": "shell",
"problemMatcher": []
},
You see the task Open snapshot 1 is dependent on the close all editors task so that happens first. In the Open snapshot 1 the command is code to open all the arg files. Put your cursor in the args array and that is where the properly formatted list of files to open will be written by the macro. Demo:
If you want to update that file list you can just select them and rerun the macro. And you can now set up as many Open snapshot <n> tasks as you want (with whatever labels you want to give them).
Now, to trigger the task we will use a keybinding as well:
{
"key": "alt+s 1",
"command": "workbench.action.tasks.runTask",
"args": "Open snapshot 1"
},
{
"key": "alt+s 2",
"command": "workbench.action.tasks.runTask",
"args": "Open snapshot 2"
},
etc. As noted earlier, running this task will first run the dependent task which closes all currently opened files. If you just wanted to open a batch of files you frequently use without closing the others, just remove the "dependsOn": [ "close all editors" ] option.
Here is a final demo of the task closing the open files and opening the snapshot files (I just changed the file list above a little to make it look different).
Two things to remember:
(1) the Editor > Open Editors: Visible setting must be enable with a number high enough to show all your opened files. The Open Editors can be hidden so you don't have to look at it all the time if you don't want, but it will be opened automatically by the macro - that can't be avoided. You can see it opening in the demos. It can be hidden by its context menu.
(2) The terminal is used, so you see it opening.
It seems like a lot of set-up but the operation is actually pretty simple - just a couple of keybindings to remember.
Try an extension called File Group.
My searching reveled that a lot of people are looking for this option but vsCode does not seem to have any good way to do it. This extension lets you list out the files with full path and associate them to a key shortcut.
Three files below will load by hitting ctrl-alt-1 if you add this to youProject.code-workspace:
"1": {
"files": [
"C:\\temp\\file1.txt",
"C:\\svn\\foo.txt",
"C:\inetpub\wwwroot\iisstart.htm"
]
}
(It is a pain to set up if you are new to vsCode, hopefully it gets developed further.)
This worked for me. But it may have side affects when git does refresh
https://marketplace.visualstudio.com/items?itemName=gkotas.restore-git-branch-tabs
It seems that there is an extension that does the job: Editor Group Minimizer
There's this extension, that seems to kind of work:
Save and Restore Tabs
It seems to get most of the files and maintains the file split, but if I have multiple tabs on multiple groups, sometimes the secondary ones aren't opened.
There's an extension that would save your open tabs and swap them based on your git branch. Seems very useful, but in practice it was a little too intrusive.
Looks like its been abandoned, but there's this fork: Restore Git Branch Tabs Improved Tried it but isn't worked like I remember but maybe I just missed something for setup.

How to filter files shown in Visual Studio Code?

How would you filter the files shown in the folder view in Visual Studio Code?
Reference: Filter files shown in folder
Hiding files and folders
The files.exclude setting lets you define patterns to hide files and folders from several places in VS Code like the explorer and search. Once defined, files and folders matching any of the patterns will be hidden.
{
"files.exclude": {
"**/*.js": true
}
}
Hide derived resources
If you use a language that compiles to another file at the same location of the source file, like TypeScript does to JavaScript, you can easily set an expression to hide those derived files:
"**/*.js": { "when": "$(basename).ts"}
Such a pattern will match on any JavaScript file (**/*.js), but only if a sibling file with the same name and extension, *.ts in this example, is present. The same technique can be used for other transpiled languages, like Coffee Script or Less/Sass, too.
Source: VS Code v0.5.0 (July 2015)
In version after VScode 1.70 (July 2022) all you need to do is press Ctrl+F or F3 to search.
Please refer following post
Searching in Explorer panel after VSCode 1.70
Only applicable for v1.69 and below.
Step #1
Click on Explorer window. This is critical as without focus on Explorer it will not work.
Step #2
Start Typing name you want to filter. It's weird that there is no textbox to take input but... take a leap of faith and type. You will see your typed text in top-right corner in brown background. Now hover on that text.
Step #3
Click on 3 stacked lines to filter..
They look like hamburger menu but they are not. They are saying if it's filtered or not. They are toggled between filtered and just highlight. So, make sure they are like inverted pyramid.
That's it. It should be filtered now.
If you only want to change the setting for this project, then do the following:
File > Save Workspace As > ... enter your {project name}
Then open file: {project name}.code-workspace
And update section settings.
Sample:
{
"folders": [
{
"path": "."
}
],
"settings": {
"files.exclude": {
"**/*.log": true
}
}
}
VScode 1.70 (July 2022) should improve on this "tree filter" feature.
(Available today in Code insiders)
See issue 70646 and PR 152481:
Support find widget in lists/trees
This PR replaces the existing list/tree type filter:
with an bona fide find widget:
While a seemingly simple change, this has some (desired) consequences when searching/filtering in trees. Namely:
We will restore simple keyboard navigation by default.
That is: pressing the letter A will focus the next element which starts with A.
Initiating a search operation requires pressing Ctrl-F or F3, like the editor.
While searching, focus is in the find input box as opposed to the list itself.
Pressing DownArrow will focus the first list element which was found.
We'll preserve all custom behavior of context keys, eg. used by the VIM extension).
In VIM, the pre-existing / command will trigger simple keyboard navigation, as opposed to opening the find widget.
The VIM extension has the option to change this behavior themselves.
And:
In general:
Keyboard navigation is now called type navigation
Filter on type is now called find mode, aligned with a new find concept
Settings
workbench.list.keyboardNavigation has been renamed to workbench.list.defaultFindMode
workbench.list.automaticKeyboardNavigation has been deleted
Commands
list.toggleKeyboardNavigation has been renamed to list.triggerTypeNavigation
list.find has been added
list.closeFind has been added
list.toggleFilterOnType has been renamed to list.toggleFindMode
Context Keys
Mainly used by the vim extension:
listSupportsKeyboardNavigation has been renamed to listSupportsTypeNavigation
listAutomaticKeyboardNavigation has been renamed to listTypeNavigationMode
"With the focus on the File Explorer start to type part of the file name you want to match.You will see a filter box in the top-right of the File Explorer showing what you have typed so far and matching file names will be highlighted."
"Hovering over the filter box and selecting Enable Filter on Type will show only matching files/folders."
documentation: https://code.visualstudio.com/docs/getstarted/userinterface#_filtering-the-document-tree

How to hide files with specific extension in VSCode tree view

I use VSCode with Unity3D and I wonder is there any way to hide/ignore/filter certain types of files, for example *.meta files in VSCode's tree view? I cant find any suitable option in settings.
They have added this feature now. Go to File->Preferences->Workspace Settings. That opens or creates the .vscode folder, and underneath it the settings.json file.
Here is a full settings.json file that shows how to exclude the .git folder, the dist folder and the node_modules folder.
// Place your settings in this file to overwrite default and user settings.
{
"files.exclude": {
"**/.git": true,
"dist": true,
"node_modules": true
}
}
Not at this time, but you can vote for the feature at the Visual Studio Code User Voice.
F1 > Preferences:Open Workspace Settings > [search settings] exclude >
Files:Exclude > Add Pattern
In other words, press F1 to open the thingy search thing, to find Preferences:Open Workspace Settings, then in the next search box, search for 'exclude', and add the pattern to exclude in the Files:Exclude section.
For example, to exclude all hidden backup files in Linux -- i.e. files with a tilde '~' on the end, add the pattern **/*~.
You might want to exclude the same pattern from the Search:Exclude and Files:Watcher Exclude sections.