how remove this white line in vs code [duplicate] - flutter

So I've installed VS Code on my Mac and it works perfectly fine. There's just this white vertical line going down the screen which is kinda annoying.
I'm not sure if it's supposed to be some sort of guide, ruler or something. It just appeared from the start. Is there a way to disable it?
It looks like this :

There can be 2 places where it has "editor.rulers" in the settings.json.
Make both empty.

By default the ruler shouldn't be visible, but you can check for the following setting:
editor.rulers.
If set, it's an array with column numbers. If you want to turn it off, you can simply set an empty array like this:
"editor.rulers": []

This was bugging me a lot as well... so I finally tracked down the setting which turned it off.

In the latest version of vscode you can follow this process to get rid of that white line
Step 1: Go to Preferences -> Settings
Step 2: Search for editor rulers and click on edit in settings.json
Step 3: In many cases, it would be like this:
"editor.rulers": [
80
]
Remove 80 and make it an empty array and save it.
"editor.rulers": []
By following these steps the vertical line should be removed.

As my dart file was having that issue. So I have added in setting.json:
"[dart]" : {
"editor.rulers": []
}

If you search in your settings file - the default settings that is - you will find
// Controls whether the editor should render indent guides
"editor.renderIndentGuides": true,
Set that to false in your user settings - typically the right panel if you open "Settings' from the lower left gear icon.
You can also change the indent guides color if you wish. See Change indent color in theme for VSCode? to learn how to do so. Generally you can find a lot by opening up your Settings and then searching through the default settings.

If u just want to get rid of the rightmost line, edit your settings.json file
"editor.rulers": [],
And if you want to get rid of the left sidelines, just make sure

settings.json
{
"workbench.colorCustomizations": {
"editorRuler.foreground": "#00000000"//transparent
}
}
Vertical rulers in Visual Studio Code

steps for solution:
click ctrl+, in vs code editor, or manually open the setting in vscode editor.
search for editor rulers and after a search click on Edit in settings.json
enter image description here
make editor rulers empty.
close the tap
enter image description here

Here are some steps:
Open vs code settings.json file
then under json file search for this line of code "editor.rulers":
then remove the or blank the array like this"editor.rulers": [], and save the file.

Press Ctrl + Shift + P => Type: setting.json and then click "Open Settings (JSON)
Then change to this: "editor.rulers": [],

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,

How don't show excess vertical lines in VSCode

I have 2 files, first .phtml
Screen of code from there:
And second file .vue:
Using the red arrows in the screenshot above, I want to show that there are extra vertical lines in the Vue file, which, it seems, do not connect anything.
There are no such lines in the .phtml file
How can I remove them?
You have to set that in the settings file as stated in the docs of VSCode settings
Press Ctrl + Shift + p, type settings and go to Preferences: Open Settings (JSON) to open User Settings, and add this:
"editor.renderIndentGuides": false,
Its work for me:
"editor.detectIndentation": false

Disable White Vertical Line

So I've installed VS Code on my Mac and it works perfectly fine. There's just this white vertical line going down the screen which is kinda annoying.
I'm not sure if it's supposed to be some sort of guide, ruler or something. It just appeared from the start. Is there a way to disable it?
It looks like this :
There can be 2 places where it has "editor.rulers" in the settings.json.
Make both empty.
By default the ruler shouldn't be visible, but you can check for the following setting:
editor.rulers.
If set, it's an array with column numbers. If you want to turn it off, you can simply set an empty array like this:
"editor.rulers": []
This was bugging me a lot as well... so I finally tracked down the setting which turned it off.
In the latest version of vscode you can follow this process to get rid of that white line
Step 1: Go to Preferences -> Settings
Step 2: Search for editor rulers and click on edit in settings.json
Step 3: In many cases, it would be like this:
"editor.rulers": [
80
]
Remove 80 and make it an empty array and save it.
"editor.rulers": []
By following these steps the vertical line should be removed.
As my dart file was having that issue. So I have added in setting.json:
"[dart]" : {
"editor.rulers": []
}
If you search in your settings file - the default settings that is - you will find
// Controls whether the editor should render indent guides
"editor.renderIndentGuides": true,
Set that to false in your user settings - typically the right panel if you open "Settings' from the lower left gear icon.
You can also change the indent guides color if you wish. See Change indent color in theme for VSCode? to learn how to do so. Generally you can find a lot by opening up your Settings and then searching through the default settings.
If u just want to get rid of the rightmost line, edit your settings.json file
"editor.rulers": [],
And if you want to get rid of the left sidelines, just make sure
settings.json
{
"workbench.colorCustomizations": {
"editorRuler.foreground": "#00000000"//transparent
}
}
Vertical rulers in Visual Studio Code
steps for solution:
click ctrl+, in vs code editor, or manually open the setting in vscode editor.
search for editor rulers and after a search click on Edit in settings.json
enter image description here
make editor rulers empty.
close the tap
enter image description here
Here are some steps:
Open vs code settings.json file
then under json file search for this line of code "editor.rulers":
then remove the or blank the array like this"editor.rulers": [], and save the file.
Press Ctrl + Shift + P => Type: setting.json and then click "Open Settings (JSON)
Then change to this: "editor.rulers": [],

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"

How to disable VS Code minimap in Windowed mode?

I did the following in Visual Studio Code:
settings.json => "editor.minimap.enabled": true
Open 2ed files side by side (windowed mode)
Minimap exists in both windows
This takes up too much room, but I still want to use the Minimap when I'm editing a single file in a single window. Is there a way to have the Minimap enabled for a single file, but disabled in side-by-side "Windowed" mode?
Toggle minimap command has been added since vscode 1.16. Hit command + shift + p and select View: Toggle Minimap.
There is no way to do this in VS Code. Currently there is only the "editor.minimap.enabled": false setting which can be true or false and either always enables the minimap or always disables it.
Unfortunately, as shown in this issue, there is also no "toggleMinimap" command to assign to keybindings.
You might find this extension useful, though, as it can be used to create a toggle minimap command:
settings:
"settings.cycle": [
{
"setting": "editor.minimap.enabled"
}
]
keybindings.json:
{
"key": "ctrl+shift+t",
"command": "settings.cycle.workbench.colorTheme",
"when": ""
}
Simplest way is go to:
View -> Toggle Minimap
Update:
In newer versions:
View -> Show Minimap
To remove/disable/hide VS Code Minimap,
Go to the View tab and uncheck this: View > Show Minimap
1) Go to File -> Preferences -> Keyboard Shortcuts
2) type in "View: minimap"
3) right click and add a key binding.
I like to use ctrl+m ("m" for minimap)
If there are existing key bindings, you can use another one, or click the existing one(s) listed, then right click them and remove the binding before repeating steps 2 and 3 above.
New option available,
View-> Show minimap (uncheck)
In Visual Studio Code Version 1.41.1. Go to
Files >> Preferences >> Settings
Select
Text Editor >> Minimap >> Uncheck Enabled checkbox
I didnt find "minimap", instead I found:
[Options]>>[Text Editor]>>[All Languages]>>[Scroll Bars]>>Behavior>>"Use map mode for vertical scroll bar"
I am not able to embed image yet, check link