How to set up a minimap in VS Code? - visual-studio-code

I want to get an overview of my code and would like to use a minimap in VS Code.
I did not find an option to set this up in the menus. I am using VS Code 1.9.

Starting with version 1.10 (Feb 2017) vscode supports minimaps.
You can switch this function on via the preferences. Just follow these steps:
open vscode
File
Preferences
Settings
On the right pane you see your own custom settings. There you can add the following settings:
// Controls if the minimap is shown
"editor.minimap.enabled": true,
If this is the first setting you need to surround this with curly brackets and remove the tailing comme. If you have already one or more please keep in mind this is JSON so you need to separate key:values with a comma.

Adding the following to settings.json will also highlight where you are on the map:
"editor.minimap.showSlider": "always"

Additionally, to render blocks instead of characters for better visualization in the Minimap:
"editor.minimap.renderCharacters":false

You have to update to version 1.10+ and add "editor.minimap.enabled": true to your user or workspace settings, which can be opened with Ctrl+,.

Since the questions is "how to configure it" I will give what I've found is the most useful configuration of the minimap feature.
This is how it looks in my editor:
This is effectively about 1/3 height and only the first 40 columns. But still just readable. It makes it so I can quickly grab the minimap slider and scrub through a file.
Here is my minimap config:

In current VS Code versions, you can simply enable and disable minimap under view->Show minimap.This is reference from Visual studio code version 1.55.2. This way we don't need to edit json settings file.

Related

How to hide time of execution in Jupyter cells in Visual Studio Code?

I am following a course on Python and Math. As editor I use Jupyter notebooks in VS Code.
I am not able to eliminate (or hide) the time of execution shown in each cell. I searched in Settings, but did not find the relative option.
Could you help, please?
Thanks.
This now exists in VS Code's 'clickable' settings screen (as opposed to editing the settings.json file.
Search settings for the below, and select 'hidden' from the dropdown.
notebook.showCellStatusBar
Just put this parameter in the settings.json:
"notebook.showCellStatusBar": "hidden"
I have the same question.
I only found this enhancement issue on github.
It does seem like they did not think of a option to disable it.
For now just switch back to normal Jupyter notebooks.

Why is my Dart code auto-moved to a different line, when I Ctrl+S?

What happened is that when I move my codes to different lines, and when I CTRL+S, the code automatically get moved to a different line.
What setting in VS Code is this?
That's because you have format on save.
You need to go to VS Code settings and search formatOnSave and turn it off
check if the "auto format on save" option is on: VSCode: How do you autoformat on save?
you can also go into the dart plugin's preferences in vscode and change the line length at which formatting the code will auto-wrap it. You can make it however long you want. Just go into settings and search "Dart: Line Length"
For me, I went to the dart extension setting, there is an option of Dart: Enable SDK Formatter. It should be the problem I guess because when I disabled it, everything started working fine.
We can directly search for Dart: Enable SDK Formatter in VS Code settings.

How to disable "Run|Debug" line in vscode?

I am currently using Flutter with Dart. How do I permanently disable this annoying "Run|Debug" line in vscode?
That Run | Debug is not built-in to vscode. It must be contributed by one of your extensions. These seem like likely culprits:
Dart: Show Main Code Lens
// Whether to show CodeLens actions in the editor for quick running/debugging scripts with main functions.
Dart: Show Test Code Lens
// Whether to show CodeLens actions in the editor for quick running/debugging tests.
In case people get here because there is a Debug or Run in their package.json, that is a separate issue and answer, see https://stackoverflow.com/questions/62358131/how-to-disable-debug-from-showing-in-package-json/62368407?r=SearchResults&s=1|57.9327#62368407
Just disable Enable Code Lens in jest plugin.
It's very annoying! When you write test code, small Debug text shows on top of a test (above it method) when it fails.
During programming, it constantly shows and hides, causing lines of code move up and down a bit. It's terrible experience. Fortunately, easy to disable.
After disabling it, we still have test status feedback:
In VSC settings, search for "Pester Code Lens".
You can disable the first option.
Disable Pester Code Lens
Add this line to your settings:
"editor.codeLens": false,
Or do this in settings:
For Java Extension paste this in your settings.json file
"java.debug.settings.enableRunDebugCodeLens": false
you just open your vs Code Setting -> Text Editor -> Code Lean [Check mark this Box]

How to show breadcrumbs on Visual studio Code?

I made this window disappear. How do I recover it?
Those are called breadcrumbs in most IDEs. In VSCode, it's no different.
Find the setting by going to your settings and searching "Breadcrumbs".
If you choose to not use the fancy settings editor, you can manually add this to your configuration:
"breadcrumbs.enabled": true
Update
As of May 2019 (version 1.35), breadcrumbs are enabled by default in VSCode. They can still be toggled using the steps outlined above.
Beware that even if you have breadcrumbs turned on in settings and the Language is selected, you will have to save the file in order to get breadcrumbs in VS Code 1.52.1
I'd like to add one more thing to Ian MacDonalds answer:
You can simply toggle them within the "View"-menu View > Toggle Breadcrumbs :

VS Code Scroll Map (Minimap)

I am searching for something like this extension for VS Code. Any suggestion?
Finally, we have the code mini-map feature in the February 2017 release (1.10)!
To enable it, open your editor settings and add the following
"editor.minimap.enabled": true
This is a top request in User Voice. Currently not implemented in product nor as an extension.
Additional settings in Minimap (For love of Minimap):
1) to render blocks instead of characters for better visualization on the Minimap:
"editor.minimap.renderCharacters":false
2) highlight slider on the map:
"editor.minimap.showSlider": "always"
Finally! Version 1.10 brings this long missing feature.
Official announcement
No need to edit any settings! It's enabled by default.
You can track an open issue here. They recently launched a beta version of the minimap with the last insider release. Have a look, it looks great! Link to visual studio code