Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to pin tabs similar to Visual Studio #12622

Closed
jez9999 opened this issue Sep 26, 2016 · 234 comments
Closed

Add option to pin tabs similar to Visual Studio #12622

jez9999 opened this issue Sep 26, 2016 · 234 comments

Comments

@jez9999
Copy link

@jez9999 jez9999 commented Sep 26, 2016

There should be an option in Visual Studio Code to pin tabs, like you can in Visual Studio.

As with issue #10739 there should be a config option allowing you to hide the "pin tab" icon in the tab itself if you just want to use the right-click menu or shortcut to pin/unpin tabs.

There should also be an option (again, like in Visual Studio) where pinned tabs are put onto a separate line above the other tabs.

@4imble
Copy link

@4imble 4imble commented Dec 16, 2016

Would love this too, this is how I manage my tabs in 'visual studio full'. I am finding it somewhat hard to live without as the files that open during my normal flow are getting in the way.

@pascal-mormin
Copy link

@pascal-mormin pascal-mormin commented Jan 18, 2017

I am agree, it would be nice

@wonea
Copy link

@wonea wonea commented Jan 19, 2017

We already have functionality for this. Opening a file from the file explorer with a single or double click does what happens with a pin in Visual Studio. I'd vote to close this issue, and open another making how the tabs are handled clearer. Perhaps adding a pin icon on the window tabs are marked "Keep Open".

2017-01-19 11_56_16-jquery-1 11 3 min js - nixor adminui - visual studio code

@asednev
Copy link

@asednev asednev commented Jan 19, 2017

@wonea Visual Studio has option to keep pinned tabs separate from open tabs (and on the different row). Such option would be great to have in Visual Studio Code. Perhaps that should be a separate ticket.

@jez9999
Copy link
Author

@jez9999 jez9999 commented Jan 20, 2017

@asednev Exactly. I'd say VS Code could actually improve on Visual Studio by keeping the current behaviour, but additionally allowing tabs to be "top pinned" or something, which would put them in a row above the rest of the tabs (ie. the regular Visual Studio pin behaviour).

@bpasero bpasero mentioned this issue Jan 24, 2017
@eliashdezr
Copy link

@eliashdezr eliashdezr commented Feb 27, 2017

Another vote for the pinned tabs in a top row. This helps greatly to work on the "main" files when you end up open a lot of files.

@predragbaltic
Copy link

@predragbaltic predragbaltic commented Mar 1, 2017

Pinned tabs are very good feature which we must to have

@andrew-lis
Copy link

@andrew-lis andrew-lis commented Mar 21, 2017

I wrote a little VSCode extension to solve a similar problem. It's called Workbench: https://github.com/andrew-lis/Workbench
Maybe my solution could be a hint for you how to implement it natively.

@bpasero bpasero mentioned this issue Apr 3, 2017
@mouradhamoud
Copy link

@mouradhamoud mouradhamoud commented Apr 17, 2017

I keep closing tabs by accident, it would be nice to have this feature available (Like Google Chrome does)

@ChuckkNorris
Copy link

@ChuckkNorris ChuckkNorris commented Jul 16, 2017

Doesn't need to be fancy - something simple like this with a context menu item to pin a tab would be great!

Image

@pmunin
Copy link

@pmunin pmunin commented Aug 19, 2017

Created intersecting issue: #32836

@maccurt
Copy link

@maccurt maccurt commented Nov 4, 2017

yes, for the love of all that is holy add it.

@bpasero bpasero removed the workbench label Nov 16, 2017
@isidorn isidorn added this to the Backlog milestone Nov 20, 2017
@tmatthews0020
Copy link

@tmatthews0020 tmatthews0020 commented Feb 8, 2018

+1

@SirLants
Copy link

@SirLants SirLants commented Feb 11, 2018

I am shocked that this feature hasn't been implemented yet, I assumed a simple Google Search would yield some setting I need to turn on. I can't say exactly what the productivity cost is, but I sometimes have up to 30-40 pins in Visual Studio and it makes life so easy. Whenever this is added I will be super happy, VS Code dev team.

@zbendefy
Copy link

@zbendefy zbendefy commented Feb 16, 2018

+1

@bpasero
Copy link
Member

@bpasero bpasero commented May 7, 2020

If it works just like in the video, and we can rearrange the pinned tabs

Pinned tabs can be moved in and out to pin or unpin. The drop feedback will indicate what happens (e.g. if you drop on a pinned tab, the tab will be pinned and vice versa).

How is the behaviour when closing multiple tabs? Will they stay open on "Close All"?

The only way to close a pinned tab is by explicitly closing it (e.g. via Cmd+W when active). Actions such as "Close All" or "Close Others" will not close pinned tabs. There are only a few exceptions, e.g. we have a "Close All Editor Groups" command that would also take down pinned tabs.

@Acmion
Copy link

@Acmion Acmion commented May 7, 2020

Awesome work @bpasero ! Exited to see this in VS Code!

It's important to get this first version out there, after which enhancements (for example, the separate row) can be implemented.

@bpasero
Copy link
Member

@bpasero bpasero commented May 8, 2020

Insiders is now updated with these changes: https://code.visualstudio.com/insiders/

To pin a tab you can either:

  • right click > Pin
  • or configure a keybinding to the command workbench.action.pinEditor and workbench.action.unpinEditor (CtrlCmd+K CtrlCmd+Enter by default)

image

@SirLants
Copy link

@SirLants SirLants commented May 8, 2020

I work in a full MS stack but for my client-side work I really prefer working in something lighter like VS Code. It made me sad how much pinned tabs was a deal breaker. From fellow software engineers to software engineers, thank you!

@kieferrm kieferrm mentioned this issue May 11, 2020
45 of 61 tasks
@derekaug
Copy link

@derekaug derekaug commented May 11, 2020

Insiders is now updated with these changes: https://code.visualstudio.com/insiders/

To pin a tab you can either:

  • right click > Pin
  • or configure a keybinding to the command workbench.action.pinEditor and workbench.action.unpinEditor (CtrlCmd+K CtrlCmd+Enter by default)

image

Wow, this is great! I know this is still early in development, but would be great to have an option to pin files and keep the filename visible. Lot of times I just pin things that I just want to keep open indefinitely but it gets tough to know which is which if I have multiple files of a specific type pinned.

@abdulkareemnalband
Copy link

@abdulkareemnalband abdulkareemnalband commented May 12, 2020

Hiding pinned tab filename can be an issue, As most files in a project will be of same type, And we cannot distinguish them by just looking at icon

@rsodre
Copy link

@rsodre rsodre commented May 12, 2020

Hiding pinned tab filename can be an issue, As most files in a project will of same type, And we cannot distinguish them by just looking at icon

I agree. A second row for the pinned tabs would be more useful for me.
That could be a settings option:

  • Pinned with name
  • Pinned as Icon
  • Pin on a second row (with name)
@petertirrell
Copy link

@petertirrell petertirrell commented May 12, 2020

For what it's worth I would prefer the behavior to match regular Visual Studio - making the tabs "sticky" to the left, but retaining the full file name. Heh, I can't say I've ever used the "2nd row" behavior in Visual Studio for pinned tabs :-P

@gimbo
Copy link

@gimbo gimbo commented May 12, 2020

All I want from pinned tabs is that they don't go away when I do a "close all" or "close others" type operation, and also don't get closed automatically if I go over workbench.editor.limit.value tabs open. In fact, the workbench.editor.limit.value thing is the most important to me, since hitting that limit will happen more than I hit "close all", and right now I don't use the workbench.editor.limit.value option at all because without pinned tabs it's useless to me.

@bpasero
Copy link
Member

@bpasero bpasero commented May 12, 2020

Pinned tabs will behave as such:

  • close operations that are not for a single editor ignore them (e.g. "Close All")
  • with regards to workbench.editor.limit pinned tabs are treated like dirty tabs and will not close
@Choiyos
Copy link

@Choiyos Choiyos commented May 14, 2020

I think my opinion should also see the file name on a fixed tab.
I think the reason why Chrome's fixed tabs didn't have to be named is because the icons were enough to distinguish them.

@woutgg
Copy link

@woutgg woutgg commented May 14, 2020

In some cases, it might be useful to show just an icon with the first letter of the filename in it (like default avatars showing a user's initials on various platforms).
So for instance with 'README.md' and 'TODO.md' pinned, you would see an icon with 'R' and one with 'T'.

@bpasero
Copy link
Member

@bpasero bpasero commented May 14, 2020

I wonder if one setting should be there where you can simply put the size of a pinned tab (currently it is 38px). If you put more than 38px we start to render the name of the tab but it would cut off the name if exceeding that width.

Btw if you have not seen pinned tabs without icons enabled, they pick the first letter of the file name:

image

@CWempe
Copy link

@CWempe CWempe commented May 14, 2020

How about adding the icon as a badge on the bottom right corner of the tab.

Just a thought...

@AndrewDavis
Copy link

@AndrewDavis AndrewDavis commented May 14, 2020

I wonder if one setting should be there where you can simply put the size of a pinned tab (currently it is 38px). If you put more than 38px we start to render the name of the tab but it would cut off the name if exceeding that width.

I think this + rounding down to the nearest letter for each tab's title string would be a good idea. I would have suggested just doing letter counts but the tab titles don't look mono spaced so.

@bpasero
Copy link
Member

@bpasero bpasero commented May 15, 2020

@CWempe

How about adding the icon as a badge on the bottom right corner of the tab.

Do you mean to always do that independent from the icon setting or only in this case? I think if the user has chosen to disable icons we should not show them and in the other case, I am not sure if a small badge has sufficient visibility to tell files apart.

@AndrewDavis

rounding down to the nearest letter for each tab's title string would be a good idea

I am not sure I understand that idea. Can you give an example?

@AndrewDavis
Copy link

@AndrewDavis AndrewDavis commented May 15, 2020

rounding down to the nearest letter for each tab's title string would be a good idea

I am not sure I understand that idea. Can you give an example?

Since the font is not monospaced, you could set it to a pixel width and it would theoretically show part of a letter. I'm saying figure out what letter the width lands on, then round down to only show the letter before it if not a whole letter (per tab). It may already do that, idk; would look ugly with partial letter visibility though.

@CWempe
Copy link

@CWempe CWempe commented May 15, 2020

Do you mean to always do that independent from the icon setting or only in this case? I think if the user has chosen to disable icons we should not show them and in the other case, I am not sure if a small badge has sufficient visibility to tell files apart.

Actually, I did not know you could disable icons. 😄
Of cause this option should be configurable or depending on the general icon setting.

Here is a quick mockup.

image

Yes, the "bagdes" might be a little smaller once implemented.
But since many icons have different colors they might be distinguishable, even if they are small.

image

I guess we will have to see how this will look in reality.

Regarding the width of pinned tab.
I do not know how vscode works internally, but keep in mind users can zoom in and out the GUI.
So a fixed width in pixels might not work. In HTML there are other units ypou can use to dynamically set the size of an element.
But I am sure the vscode developers will know this better than me. 😄

@Fell
Copy link

@Fell Fell commented May 15, 2020

I'd be happy if I could chose icon + x characters from the file name, preferably without '…' because it just wastes space.

So you can have:
☐ GameManager.cpp
☐ GameM
☐ Ga
☐ G
or just

This doesn't require big layout changes and makes it possible to adjust for every codebase and user.

@AndrewDavis
Copy link

@AndrewDavis AndrewDavis commented May 15, 2020

Hahahaha, so this is what happens when you make a really long file name:
01
It just takes up the entire space with one tab! :O
(P.S. That's bad.)

And this is what happens when it can't fit it (I made the window smaller), it cuts off the letter:
02

I'd be happy if I could chose icon + x characters from the file name, preferably without '…' because it just wastes space.

Yeah but as I've been saying it's not a monospaced font so if you did this then the pinned tabs would all be different sizes lol. I mean, I guess you could still do that... Maybe's that's not so bad...

@Fell
Copy link

@Fell Fell commented May 15, 2020

Really? It has no limit on tab with? Well... that's good in a way. But also... bad. Is there a setting for that?

And yes, they would have different sizes, but if you set it to say 4 characters it would only differ slightly.

To unify the widths, I would experiment with fixing the tab width to num_chars * 1em. I'm not a web/css expert, but as I understood it, 1em is roughly the "width of an m", the widest character, and it changes with the selected font or zoom level.

@bpasero bpasero mentioned this issue May 17, 2020
2 tasks done
@bpasero
Copy link
Member

@bpasero bpasero commented May 18, 2020

You can configure "workbench.editor.tabSizing": "shrink" to let tabs shrink to a smaller size up to a minimum of 120px, but the default (fit) will always show the entire tab, even if it exceeds the available space.

@yannlairdc
Copy link

@yannlairdc yannlairdc commented May 19, 2020

@bpasero Really glad to see things thing are moving forward with this!

To add my view on this, I also believe it would be better to show the full name of the file on the tab by default. Having just the icon when you're working exclusively with cs or js file for example would make it hard to interact with.
There could be an option like "tab.maxfilenamecharsize" to decide if we want to cut the name of the file if it's too long, with a popup when you hover over the tab to display the fullname.

On a side note, have you already created the ticket to talk about the dedicated row for pinned tab by any chance?

@bpasero
Copy link
Member

@bpasero bpasero commented May 19, 2020

I extracted the following issues:

  • Allow to pin tabs #98558
  • Pinned tabs: show them in a secondary tab row above others #98160
  • Pinned tabs: add a setting to show more context #98161

On top of that I created a test plan item (#98019) where people can see the current implemented set of features. I suggest to file new issues if something is not covered by the existing issues I opened.

@jez9999 if there are no objections I would go ahead and close this issue and continue the remaining parts in the referenced issues. I realize that this issue has gotten a ton of upvotes and explicitly asks for the VS way ("Add option to pin tabs similar to Visual Studio") but would ask for moving votes and discussions into the follow up issues I created.

@bpasero bpasero closed this May 26, 2020
@github-actions github-actions bot locked and limited conversation to collaborators Jul 10, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet