How to make VSCode Intellisense window wider - visual-studio-code

I have a VSCode extension that helps me autocomplete file paths, however many file paths grow long and are truncated in the VSCode intellisense popover window.
How can I set VSCode to either:
have a fixed width that I can set to be large
automatically expand to fit the intellisense options (preferable)
I happen to have written the extension so if needed I can update it if that is required.

One way around this is to press Ctrl + Space (or what ever your "Trigger suggestion" shortcut is) while the suggestion popover is open to show more detail about current selection.
So this (where I can't differentiate between the Trans imported from #lingui/macro and the one from #lingui/react):
Becomes this:

I don't think this is possible, VSCode generally gives extensions very little control over the built-in UI. See also the Restrictions section of the Extensions Capabilities Overview. Technically there is a way to hack around that, but I wouldn't necessarily recommend it.
There are also a number of settings for the suggest widget, but none of them seems to correspond directly to width. The closest you can get would be reducing the font size with "editor.suggestFontSize".

Related

How to increase max length of line in VSCODE editor?

I have an issue where my code-lines wrap to the next line too soon and there's a weird empty margin on the right side of my editor, which takes up useless space. I thought it was the minimap at first, but it's not that. The size remains the same regardless of the editor window size.
I've probably added it by accident through some shortcut keys but can't find anything related to it from the settings.
Looks like you have the Dart extension installed. If so, change Dart: Line Length to a higher number (9999999 if you want). 0 might also work to disable that option.
As it says, you might also need to change the rulers in the dart section of settings.json
enter image description here
Open Extensions on the menu on the left or File menu.
Then click on the extension settings button.
Change the line length for the extension you are working with.

How to display more files on top tab in VS Code?

Is there a way to configure VS Code to increase the number of files that are able to be displayed across the tabs at the top?
There are currently just 4 files1 visible in that top area, but ~10 would be ideal:
Example
Sublime text uses smaller font on file names (despite similar font size of the code itself), and so allows about twice as much space for displaying files:
Current work around
I hit opt + command + right arrow a few times to quickly survey open files.
Ideas
Perhaps open files could be quickly surveyed (without key presses) if it is possible to:
Expand the area to have more than 1 row of files
Configure VS Code to show only part of the filename
Use smaller font on the file names (not the code itself), similar to sublime text
Something else?
1 The habits of using long file names, and having a lot of files open at the same time don't help, I'm aware of that.
workbench.editor.tabSizing
There's the "workbench.editor.tabSizing": "shrink" setting value, which is documented as so:
Allow tabs to get smaller when the available space is not enough to show all tabs at once.
(the default value for workbench.editor.tabSizing) is "fit".
workbench.editor.wrapTabs
As other have mentioned, there's the workbench.editor.wrapTabs setting, which you can find more about in this Q&A: Multirow Tabs for VSCode.
TL;DR from the setting's description:
Controls whether tabs should be wrapped over multiple lines when exceeding available space or whether a scrollbar should appear instead. This value is ignored when #workbench.editor.showTabs# is disabled.
git.decorations.enabled
You can shave a few pixels by disabling git decorations if you're working on a git project (of course- this is only if you're okay with disabling git decorations). Git decorations add letter indicators to the tab handles that summarize what has changed about those files. Ex. "M" means the file has been modified, and "A" means it has been added.
"git.decorations.enabled": false
workbench.editor.tabCloseButton
You can shave a few pixels by disabling the close button on tabs (if you're okay with that (you'll still be able to close the tab with the associated keyboard shortcut, or by middle-clicking the tab handle)):
"workbench.editor.tabCloseButton": "off"
workbench.editor.showTabs
If your aim is really to declutter, you can take the hardcore/nuclear route and do:
"workbench.editor.showTabs": false,
Et voila! Now the tab handles take up zero space because they're gone :D (and you can navigate tabs using ctrl+tab and ctrl+shift+tab (that's on Windows and Linux- not sure what it is on MacOS), or by using the Explorer view's "Open Editors" section (you might need to enable it first under the three-dots menu))

VSCODE Notebooks - Is it possible to show only markdown headers in outline?

I use markdown headers to navigate in notebooks but I also tend to make a lot of (non-header) markdown notes. Both show up in the outline which makes finding the right heading quite difficult as notebooks grow large.
Is there a way to suppress plain markdown cells showing up in the outline?
I have followed the discussion on github and at Creating Table of Contents in VS code Jupyter Notebook
the author of one answer was also not satisfied with the outline feature and created jupyter TOC extension, and at some point, I also ended up using it. This has an option to exclude text from visualization (I believe it is possible to set maximum expansion level), but I still consider the outline more desireable, because it stays visible when I scroll the document, which I consider essential.
The workaround I found is to put, when possible, text in the same cell as the header. This makes it easier to keep the outline clean, and just avoiding to expand too much the outline works decently for me, even if it implies some annoying restrictions on the way you structure text. Other than that, it is possible to play with the collapse/expand feature of the outline and get a sufficient control, even if the possibility of completely exclude the text is still a desireable upgrade.

How to put tap space in my code while using prettier in vscode

Prettier is useful in most times. But, sometimes I want to put tap space in my code for enhanced reading of the code. Is there any way for put tap space in my code intentionally while using Prettier?
I think you mean tab spaces with a b not a p. if that's correct, then no, in general prettier does not allow for discretionary tabs, because it is what is known as an opinionated formatter, meaning that it has its own opinions about the way code should look.
If you want more control over your formatting, you can uninstall prettier and choose a different formatting extension instead, like beautify - or even just use the built-in VS code language features, which provide formatting and are fairly customizable.
In the settings section of VS code, you can search for terms like tab and white space to customize the behavior.

Visual Studio Code explorer view scrolling

My project contains a LOT of folders, many of which I routinely have open, making for a lengthy explorer view. I find scrolling this view quite frustrating for two reasons:
There is no equivalent of the editor.mouseWheelScrollSensitivity setting for the explorer view. I'm also generally happy with the scroll speed for my mouse in other applications, so don't want to go messing with a system wide setting to compensate for VSC.
The scrollbar is frustratingly difficult to grab at and requires precise mouse placement. The number of times I accidentally grab at the slider and resize the view rather than scroll it is ridiculous.
I've found no useful extension to help in this matter. Has anybody any suggestions? I'll raise an enhancement request in Github if necessary.
Here are 2 shortcuts that can speed up navigation between files:
With Ctrl then Tab you can browse a history of your last viewed files. Great for switching around when working on multiple files.
With Ctrl+P (Go to File... command) you can quickly go to a file by name. You can also search for files inside folders like this: folder/subfolder/file.ext. This is great if you know what you are looking for.
Source and more navigation tips: https://code.visualstudio.com/docs/editor/editingevolved#_quick-file-navigation
This PR in vscode 1.59 may have fixed this issue: https://github.com/microsoft/vscode/pull/110059/commits/61efc577e038ac772f12511fb823de27296dbc69
New settings:
workbench.list.mouseWheelScrollSensitivity
workbench.list.fastScrollSensitivity