How can I hide indent guides in Visual Studio Code? - visual-studio-code

How can I hide the following lines to get a cleaner code view?
Like this in the official documentation:
How can I do that or find settings in the documentation?

Press Ctrl + Shift + p, type settings and select Preferences: Open Settings (JSON) to open User Settings, and add this:
// Controls whether the editor should render indent guides
"editor.renderIndentGuides": false,
This will disable the indent guides.
See the documentation for User Settings.
Edit: as on 30th May, 2022, this setting is called
"editor.guides.indentation": false,

I tried the previous answers, but it would not let me, as it said the file was read-only, so the solution I found was below:
Click on menu File → Preferences → Settings.
In the search box, type "render indent guides" (without the "")
Untick the box which says "Controls whether the editor should render indent guides".
This removes the indent guides.

Here's a way to hide the indent lines but keep the active line indicator.
Add this to settings.json.
"workbench.colorCustomizations": {
"editorIndentGuide.background": "#00000000" // hide via 100% transparency.
}
Only the active indent block will be visible.
To control the color of the active line, add...
"editorIndentGuide.activeBackground": "#444444b9" // Grey with some transparency.

Method-1 (using settings.json)
"editor.renderIndentGuides": false, is now deprecated in vs code.
Use "editor.guides.indentation": false instead.
Method-2 (using settings UI)
Goto settings > search editor.guides.indentation > Remove 'tip' mark for guides indentation.

SOLVED:
"editor.renderIndentGuides": false

Go to
Menu File → Preferences → Settings
And search for "editor.folding". Set it to
"editor.folding": false
This will disable the lines and the folding function.
Since you want to disable the render indent guides,
From the documentation
"editor.renderIndentGuides": false,
This will disable the indent guides.

Related

How to turn off or temporarily disable Visual Studio code hints when hover over code with cursor [duplicate]

How can I disable the default tooltip hint message in VSCode? It's annoying sometimes.
editor.hover.enabled: false in settings.json to Tooltip
Click on Edit in settings.json
There are two panes
Default User Settings
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
}
User Settings
"editor.parameterHints.enabled": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"html.suggest.html5": false,
"editor.snippetSuggestions": "none",
This also can be done UI.
Setting Snippet Suggestions : false
Update August 2018 (version 1.27)
Goto File=>Preference=>Settings
Text Editor => Suggestions
Click on Edit in settings.json
"editor.parameterHints.enabled": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"html.suggest.html5": false,
Update your suggest options and save.
Before August 2018
Goto File=>Preference=>User Settings
You will find settings.json
// Configures if the built-in HTML language support suggests Angular tags and properties.
"html.suggest.angular1": false,
"html.suggest.ionic": false,
"html.suggest.html5": false,
Just find your language and set suggest = false
Update
Setting to turn off ALL popups
"editor.parameterHints": false
"editor.hover.enabled": false,
is your bulletproof solution. Then you can use CTLR + K, CTLR + I.
To hide those hints you can just add "editor.parameterHints": false to your settings.json. Found the answer in here.
I find using a larger value for Editor > Hover: Delay (search for "delay" in the settings search bar) does the trick for me. Its default is 300ms. This doesn't address the desire to actually eliminate the tooltips, but having them only appear after, say, 2 seconds, reduces the visual clutter quite a bit for me.
On version 1.27.2, I found that only this parameter disabled all the tooltips: "editor.hover.enabled": false.
I'm using Visual Studio Code v1.63.0 and in Settings I searched for "hover" and, among other things, found "Editor > Hover: Delay" and "Editor > Hover: Enabled". Unchecking the latter will disable the hover. However, I personally find them useful but they're displayed too quickly so I increased ""Editor > Hover: Delay" from "300" to "5000"
Simple way that no one here has mentioned: Code → Preferences → Settings. Search for "hover". Uncheck the checkbox where it says "Editor > Hover: Enabled".
Cntrl + shift + P -> Prefences: Open Settings (JSON)
"editor.parameterHints": false,
"editor.hover.enabled": false
i had to do both of these.
Here's the noob version, assuming you know little about VS Code (like me).
Windows.
VS Code version: 1.37.1
While in VS Code:
press F1 then type "settings" or "preferences" - then click "Preferences: Open User Settings"
- or -
from top menu: File>Preferences>Settings
- or -
hotkey: ctrl+,
in the settings pane, type "hover" (no need to press "enter")
the settings pane should display the hover settings immediately
Uncheck "Editor › Hover: Enabled"
hover disable
Rockstar Version: edit the JSON like a balla
F1 then type "Open Settings (JSON)"
-or-
navigate to settings JSON file and open in VS Code
https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations
Add this to JSON file (within curly braces, INCLUDE quotes): "editor.hover.enabled": false
Note: each line needs a comma after it. If you add to top, put a comma after this line. If you add to bottom, add a comma after the previous line.
Don't forget to save!
what JSON looks like
If you're new to coding, those tooltips can come in handy. You may want instead to just DELAY their appearance as Logan suggested.
click here: https://stackoverflow.com/a/53512394/8623576
or simply scroll up! :)
Note: I appreciate others have posted almost the EXACT same answer but, as I mentioned, this is the NOOB version that assumes the user has little/no experience with VS Code.
for Versions 1.31+ this one line did it for me:
"editor.parameterHints.enabled": false
Go to the settings gear wheel in the bottom left hand corner, then go to Settings and search "hover". Uncheck the "Controls whether the hover is shown" box.
Arrrg!!!
Hope this helps others. Running with v1.72.1. For the life of me was trying all the different settings, options, suggesting and couldn't get the tooltip help disabled... Coffee might have been my solution, finally noticed in the tooltip window there is an 'x' in the upper right corner for a close, clicking it. WOW! It worked and seems to have persisted my desire to dismiss them. I wanted them gone.... Perfect!!! Thinking about it, don't see a way to get them back if someone might actually want them back. VS Code is nice for a lot of stuff, but pretty bad for some of it's design and usability...
If you are not looking for disable and as mentioned by user: Darrell Brogdon above, if you want to delay the hover time of tooltip as solution then simply add the below line in user settings with your desired time value.
replace value 3000 as per your need.
Note: hover settings are moved in Online Services Settings in newer versions, hence you might not be able to find it with search 'hover' in user settings.
// modify in Preferences --> Settings or settings.json
"editor.hover.delay": 3000,

Is there a way to suppress/delay intellisense and user assistance in VSCode? [duplicate]

How can I disable the default tooltip hint message in VSCode? It's annoying sometimes.
editor.hover.enabled: false in settings.json to Tooltip
Click on Edit in settings.json
There are two panes
Default User Settings
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
}
User Settings
"editor.parameterHints.enabled": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"html.suggest.html5": false,
"editor.snippetSuggestions": "none",
This also can be done UI.
Setting Snippet Suggestions : false
Update August 2018 (version 1.27)
Goto File=>Preference=>Settings
Text Editor => Suggestions
Click on Edit in settings.json
"editor.parameterHints.enabled": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"html.suggest.html5": false,
Update your suggest options and save.
Before August 2018
Goto File=>Preference=>User Settings
You will find settings.json
// Configures if the built-in HTML language support suggests Angular tags and properties.
"html.suggest.angular1": false,
"html.suggest.ionic": false,
"html.suggest.html5": false,
Just find your language and set suggest = false
Update
Setting to turn off ALL popups
"editor.parameterHints": false
"editor.hover.enabled": false,
is your bulletproof solution. Then you can use CTLR + K, CTLR + I.
To hide those hints you can just add "editor.parameterHints": false to your settings.json. Found the answer in here.
I find using a larger value for Editor > Hover: Delay (search for "delay" in the settings search bar) does the trick for me. Its default is 300ms. This doesn't address the desire to actually eliminate the tooltips, but having them only appear after, say, 2 seconds, reduces the visual clutter quite a bit for me.
On version 1.27.2, I found that only this parameter disabled all the tooltips: "editor.hover.enabled": false.
I'm using Visual Studio Code v1.63.0 and in Settings I searched for "hover" and, among other things, found "Editor > Hover: Delay" and "Editor > Hover: Enabled". Unchecking the latter will disable the hover. However, I personally find them useful but they're displayed too quickly so I increased ""Editor > Hover: Delay" from "300" to "5000"
Simple way that no one here has mentioned: Code → Preferences → Settings. Search for "hover". Uncheck the checkbox where it says "Editor > Hover: Enabled".
Cntrl + shift + P -> Prefences: Open Settings (JSON)
"editor.parameterHints": false,
"editor.hover.enabled": false
i had to do both of these.
Here's the noob version, assuming you know little about VS Code (like me).
Windows.
VS Code version: 1.37.1
While in VS Code:
press F1 then type "settings" or "preferences" - then click "Preferences: Open User Settings"
- or -
from top menu: File>Preferences>Settings
- or -
hotkey: ctrl+,
in the settings pane, type "hover" (no need to press "enter")
the settings pane should display the hover settings immediately
Uncheck "Editor › Hover: Enabled"
hover disable
Rockstar Version: edit the JSON like a balla
F1 then type "Open Settings (JSON)"
-or-
navigate to settings JSON file and open in VS Code
https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations
Add this to JSON file (within curly braces, INCLUDE quotes): "editor.hover.enabled": false
Note: each line needs a comma after it. If you add to top, put a comma after this line. If you add to bottom, add a comma after the previous line.
Don't forget to save!
what JSON looks like
If you're new to coding, those tooltips can come in handy. You may want instead to just DELAY their appearance as Logan suggested.
click here: https://stackoverflow.com/a/53512394/8623576
or simply scroll up! :)
Note: I appreciate others have posted almost the EXACT same answer but, as I mentioned, this is the NOOB version that assumes the user has little/no experience with VS Code.
for Versions 1.31+ this one line did it for me:
"editor.parameterHints.enabled": false
Go to the settings gear wheel in the bottom left hand corner, then go to Settings and search "hover". Uncheck the "Controls whether the hover is shown" box.
Arrrg!!!
Hope this helps others. Running with v1.72.1. For the life of me was trying all the different settings, options, suggesting and couldn't get the tooltip help disabled... Coffee might have been my solution, finally noticed in the tooltip window there is an 'x' in the upper right corner for a close, clicking it. WOW! It worked and seems to have persisted my desire to dismiss them. I wanted them gone.... Perfect!!! Thinking about it, don't see a way to get them back if someone might actually want them back. VS Code is nice for a lot of stuff, but pretty bad for some of it's design and usability...
If you are not looking for disable and as mentioned by user: Darrell Brogdon above, if you want to delay the hover time of tooltip as solution then simply add the below line in user settings with your desired time value.
replace value 3000 as per your need.
Note: hover settings are moved in Online Services Settings in newer versions, hence you might not be able to find it with search 'hover' in user settings.
// modify in Preferences --> Settings or settings.json
"editor.hover.delay": 3000,

Make the code folding icons always show in Visual Studio Code

Loving using Visual Studio Code but one peeve is that I always think my code isn't indented properly since the left edge of the actual editor is kind of far from the numbers.
Is there any way to show the code folding +/- icons by default? It only shows them if you hover over the gutter.
As an aside, if there is a way to change the color of the gutter so it looks distinct from the editor?
To change the color of the gutter, you can add following to the user settings:
"workbench.colorCustomizations": {
"editorGutter.background": "#abcdef"
}
And to show folding icons:
"editor.showFoldingControls": "always"
Note that this setting requires you to have at least 1.13.
You cannot make code folding icons appear persistently. It is discussed here on project github page however it is not implemented yet.
If you want proper indentation your best bet is indentation guides (the vertical lines that run down to matching indents).
Indentation guides are not displayed by default.To enable indent guides go to File --> Preferences --> Settings and then place following line in settings.json file,
"editor.renderIndentGuides": true
you can make code folding icons appear persistently by addding :
"editor.showFoldingControls": "always",
but not in the "workbench.colorCustomizations", just put it outside and it will work.
example:
"editor.showFoldingControls": "always",
"workbench.colorCustomizations": {
"editor.renderIndentGuides": true,
"scrollbarSlider.background": "#474552",
"scrollbarSlider.hoverBackground": "#295377",
},
and since the [+][-] icons were replaced with [>][v], you can use this extension to regain this feature: Minimalist Product Icon Theme
I know this is an old thread, but FWIW:
File > Preferences > Settings
User > Text Editor > Editor: Show Folding Controls
Select "Always"

Disable tooltip hint in Visual Studio Code

How can I disable the default tooltip hint message in VSCode? It's annoying sometimes.
editor.hover.enabled: false in settings.json to Tooltip
Click on Edit in settings.json
There are two panes
Default User Settings
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false
}
User Settings
"editor.parameterHints.enabled": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"html.suggest.html5": false,
"editor.snippetSuggestions": "none",
This also can be done UI.
Setting Snippet Suggestions : false
Update August 2018 (version 1.27)
Goto File=>Preference=>Settings
Text Editor => Suggestions
Click on Edit in settings.json
"editor.parameterHints.enabled": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"html.suggest.html5": false,
Update your suggest options and save.
Before August 2018
Goto File=>Preference=>User Settings
You will find settings.json
// Configures if the built-in HTML language support suggests Angular tags and properties.
"html.suggest.angular1": false,
"html.suggest.ionic": false,
"html.suggest.html5": false,
Just find your language and set suggest = false
Update
Setting to turn off ALL popups
"editor.parameterHints": false
"editor.hover.enabled": false,
is your bulletproof solution. Then you can use CTLR + K, CTLR + I.
To hide those hints you can just add "editor.parameterHints": false to your settings.json. Found the answer in here.
I find using a larger value for Editor > Hover: Delay (search for "delay" in the settings search bar) does the trick for me. Its default is 300ms. This doesn't address the desire to actually eliminate the tooltips, but having them only appear after, say, 2 seconds, reduces the visual clutter quite a bit for me.
On version 1.27.2, I found that only this parameter disabled all the tooltips: "editor.hover.enabled": false.
I'm using Visual Studio Code v1.63.0 and in Settings I searched for "hover" and, among other things, found "Editor > Hover: Delay" and "Editor > Hover: Enabled". Unchecking the latter will disable the hover. However, I personally find them useful but they're displayed too quickly so I increased ""Editor > Hover: Delay" from "300" to "5000"
Simple way that no one here has mentioned: Code → Preferences → Settings. Search for "hover". Uncheck the checkbox where it says "Editor > Hover: Enabled".
Cntrl + shift + P -> Prefences: Open Settings (JSON)
"editor.parameterHints": false,
"editor.hover.enabled": false
i had to do both of these.
Here's the noob version, assuming you know little about VS Code (like me).
Windows.
VS Code version: 1.37.1
While in VS Code:
press F1 then type "settings" or "preferences" - then click "Preferences: Open User Settings"
- or -
from top menu: File>Preferences>Settings
- or -
hotkey: ctrl+,
in the settings pane, type "hover" (no need to press "enter")
the settings pane should display the hover settings immediately
Uncheck "Editor › Hover: Enabled"
hover disable
Rockstar Version: edit the JSON like a balla
F1 then type "Open Settings (JSON)"
-or-
navigate to settings JSON file and open in VS Code
https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations
Add this to JSON file (within curly braces, INCLUDE quotes): "editor.hover.enabled": false
Note: each line needs a comma after it. If you add to top, put a comma after this line. If you add to bottom, add a comma after the previous line.
Don't forget to save!
what JSON looks like
If you're new to coding, those tooltips can come in handy. You may want instead to just DELAY their appearance as Logan suggested.
click here: https://stackoverflow.com/a/53512394/8623576
or simply scroll up! :)
Note: I appreciate others have posted almost the EXACT same answer but, as I mentioned, this is the NOOB version that assumes the user has little/no experience with VS Code.
for Versions 1.31+ this one line did it for me:
"editor.parameterHints.enabled": false
Go to the settings gear wheel in the bottom left hand corner, then go to Settings and search "hover". Uncheck the "Controls whether the hover is shown" box.
Arrrg!!!
Hope this helps others. Running with v1.72.1. For the life of me was trying all the different settings, options, suggesting and couldn't get the tooltip help disabled... Coffee might have been my solution, finally noticed in the tooltip window there is an 'x' in the upper right corner for a close, clicking it. WOW! It worked and seems to have persisted my desire to dismiss them. I wanted them gone.... Perfect!!! Thinking about it, don't see a way to get them back if someone might actually want them back. VS Code is nice for a lot of stuff, but pretty bad for some of it's design and usability...
If you are not looking for disable and as mentioned by user: Darrell Brogdon above, if you want to delay the hover time of tooltip as solution then simply add the below line in user settings with your desired time value.
replace value 3000 as per your need.
Note: hover settings are moved in Online Services Settings in newer versions, hence you might not be able to find it with search 'hover' in user settings.
// modify in Preferences --> Settings or settings.json
"editor.hover.delay": 3000,

How to disable or hide scrollbar/minimap?

I can't find any option, setting, or keyboard shortcut that disables or hides that annoying scrollbar. I just don't find it useful and it's distracting.
Can't just edit the editor's CSS like Atom, either.
Remove Minimap
Add the following to your settings.json file
"editor.minimap.enabled": false
Note that, as pointed out in another answer, this process has now been simplified to:
View->Show Minimap
Remove the Overview Ruler
Add the following to your settings.json file
"editor.hideCursorInOverviewRuler": true
This will keep the scrollbar, but will result in it only appearing when the cursor is within the editor, as seen in the image below:
Completely remove scrollbars (requires restart)
If you would like to completely remove the scrollbars, add the following to your settings.json file (note the editor will say "Unknown configuration setting" - ignore this. It will still work):
"editor.scrollbar.horizontal": "hidden",
"editor.scrollbar.vertical": "hidden"
This will result in the scrollbars not being visible even when the cursor is in the editor, as seen in the image below:
Ctrl + Shift + P -> Open User Settings
"editor.minimap.enabled": false
Try this,
view->toggle minimap
or after version 1.43
view->show minimap
Removing the scroll bar
These no longer work:
"editor.scrollbar.horizontal": "hidden",
"editor.scrollbar.vertical": "hidden"
However, this will set the size of the scroll bar to 0:
"editor.scrollbar.verticalScrollbarSize": 0,
The toolip says "Unknown Configuration Setting" but it works for me.
(Visual Studio Code 1.39.2)
So this is an unofficial method as instructed on accepted answer by #badfilms. You can read about it here
After adding, restart vscode:
"editor.scrollbar.horizontal": "hidden",
"editor.scrollbar.vertical": "hidden"
This gives and "Unknown configuration settings", ignore it.
Then to remove the scrollbar seperator or ruler border, add this:
"editor.overviewRulerBorder": false
Goto View and deselect Minimap.
tested Visual Studio version: VS Community 2017 Version 15.8.2
Tools --> Options
Search for "scroll"
click on "Text Editor" title from the results on the left side.
click "Use bar mode for vertical scroll bar" under "Behavior" section and then click "OK"
Here is a screenshot:
You can toggle it from the top bar "View > Show Minimap",
But you can also define it as a keyboard shortcut!
Go to: "File > Preferences > Keyboard Shortcuts"
Search: "Minimap"
Select: "View: Toggle Minimap"
Select the keyboard you wish to link (I used Ctrl+M)
In Visual Studio 2019
Right click on the scroll bar and select "Scroll Bar Options" from the context menu.
This will display the settings for the Scroll Bars.
Under the Behavior heading halfway down, select "Use bar mode for vertical scroll bar" then click Ok. This removed the map mode from the bar.
View --> Show Minimap -click it to uncheck it-
Just to update the situation, in the past the settings mentioned above worked, despite showing an unknown configuration error, after a reload, because they had not been officially exposed to users. With v1.58 these settings will be "official" and not require a reload.
editor.scrollbar.vertical - 'auto' | 'visible' | 'hidden'
editor.scrollbar.horizontal - 'auto' | 'visible' | 'hidden'
editor.scrollbar.verticalScrollbarSize - number
editor.scrollbar.horizontalScrollbarSize - number
editor.scrollbar.scrollByPage - boolean
See Expose editor scrollbar options and react to them being updated.
once you go to the user setting it has default setting left had side as bellow and
there is a pensile mark on where click and automatically appear true false then right had side custom setting change. Thats how I did it thanks Alexandru.
think this may help you.
Default value of Scroll Beyond Last Column is 5 which does horizontal scrollbar visible and operate. Set the value to 0 removes horizontal scrollbar.
Settings options
for hidden scroll bar add into setting.json
`"window.scrollBarVisibility": "hidden",`
for hidden minimap add :
"editor.minimap.enabled": false,
For all projects
Write to a search settings:
Then change this values as on screenshot: