Modify VSCode Jupyter Notebook appearance - visual-studio-code

Is it possible to change the appearance of Jupyter Notebooks on VSCode, for them to look more like the browser version ?
In particular, I find the inter-cells space (1) way too big, and the check mark that indicates the execution (2) to also taking too much place.
I think that at the end in a page I cannot see enough code.
Is it possible to modify that ?

Related

VSCode autocomplete/intellisense(?) in Jupyter Notebook when starting string literals keeps making me accidentally insert 'ArithmeticError' every time

screenshot of the popup code suggestion box being mentioned
In VSCode Jupyter Notebook code cells, I keep having this annoying popup when I open any single or double quotes. It doesn't appear on markdown cells, nor in regular editor on .py files. It doesn't look like your typical IntelliSense suggestions either (I think), and I've tried to disable as many of such extensions as possible, but I'm not able to get rid of this annoying popup.
Appreciate if someone could point me in the right direction. Or at least what it's actually called, so I can Google the correct term. Thanks.
Figured it out.
In VS Code settings, go to Extensions > Jupyter > Python Completion Trigger Characters
defaults were: .%'"
So I deleted the single and double quotes, restarted, and voila, no more annoying popups.

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.

Highlighting problem in Jupyter Notebook - VSCode

Lately when using Jupyter Notebook in VS Code to write some assignments for my studies I ran into a quite annoying problem - whenever there is a mistake in my code cell that prevents it from running, the "traceback" (or however you call it) to the place where the error persists is colored with a high-contrast marker (the color depends on the theme used) and makes the content pretty much invisible unless you manually "select" it with the mouse coursor. Is there any way I could fix it without going too much in-depth into VSCode/Jupyter Notebook extension settings?
The highlighting looks like shown below.
Yellow syntax marker problem.
And another one here.
I tried all the themes preinstalled with VS Code such as Monokai, Solarized Light etc., and also a custom theme of my choice called Dracula.
Thanks in advance.
This issue has recently reappeared. While the issue is being fixed you can change the highlight colour within the vscode settings.
Open settings and search for "Workbench:ColorCustomizations"
Image of settings page
Create or alter the "terminal.ansiYellow": "#eed202" to a more appropriate value like "terminal.ansiYellow": "#9b4550". See the linked image.
Credit for this fix: https://github.com/microsoft/vscode-jupyter/issues/8717#issuecomment-1241776226
I also have this problem. It looks like they fixed it less than 1 month ago as of writing this, so it may go away if you update to a recent pre-release of Jupyter in VS Code. Personally, I am going to live with it until the next stable release.
My version of Jupyter in VS Code:
Screenshot of Jupyter Versions
Screenshot of vscode-jupyter github: Screenshot of vscode-jupyter github
https://github.com/microsoft/vscode-jupyter/issues/8697

VSCode displays source code again in interactive window

A question from a newbie here: when I run some python code in VSCode, there is always a display of source code in the interactive window. Thus I have to scroll all the way down before I can see the output. That makes the debug quite troublesome.
Please see the screenshot above. The code was displayed in the interactive window despite the editor just at left side over there. Any way to have VSCode, or maybe Jupyter extension, go directly to the output? (in my case starting from the 'Training Dataset shape......')

How to make VSCode Intellisense window wider

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".