How can I disable these orange & blue lines that are under my code on line 3 & 4? It's a mess when there is a lot of code.
Image
This is most probably "editor.guides.bracketPairsHorizontal".
See if this setting exists in your settings.json; if it's there, it's probably set to true.
You can set it to "active" to only show up for the scope where your caret is or to false to never show at all.
Related
This question already has answers here:
How can I hide indent guides in Visual Studio Code?
(6 answers)
Closed 11 months ago.
What is causing the vertical lines in this image?
Every file I edit has them.
Sometimes they disappear, but then they come back.
I am using VS Code v1.66.1
Here is an image of the lines:
Below, there are 6 settings that have to do with 2 features that sort of overlap each other. VS Code originally only supported standard indent guide highlighting, then they added a feature called colorized bracket pairs. VS Code releases monthly updates 11x times a year. The month, after bracketColorizationPairs was initially released, VS Code added more to bracketPariColorization, which included vertical and horizontal lines. Those lines are more configurable than indent guides, and can render in hard to get situations indent-guides was not able to. Also, they render horizontal, under the line of code that starts a block.
When both indent guides and bracketPairColorization lines are configured to both render, the bracketPairColorization gets priority over the older indent-guides feature.
To avoid all the confusion, add the settings below to your settings.json file, the completely restart your editor. It should solve the problem. Let me know the result.
{
"editor.guides.highlightActiveIndentation": false,
"editor.guides.indentation": false,
"editor.guides.bracketPairsHorizontal": "false",
"editor.guides.bracketPairs": "false",
"editor.guides.highlightActiveBracketPair": false,
"editor.bracketPairColorization.independentColorPoolPerBracketType": false
}
Adding the settings displayed above will turn off the "bright annoying lines in VS Code" which are officially called: Colorized Bracket Pairs. Coloring the brackets, and bracket guides, is a bit beyond the scope of this Q&A, consequently, I won't explain how to change the colors, but I will create an active link around this text your reading, that when clicked, will take you to an answer that explains coloring the guides and brackets.
Go to the menu Code->Preference->Settings and search for "renderIndentGuides". The complete setting should appear as:
"editor.renderIndentGuides": true,
Change it to false.
UPDATE:
Keys had changed since v1.61 - on later version set the following instead:
"editor.guides.indentation": false
I'm not sure how I made this feature but I can't stop highlighting the cursor line. As you can see, I have a green underline at the position of the cursor line.
This feature is good if you do not use .ipynb/jupyter file but if you do you can see this:
I have looked all settings and also deleted .json setting file parameters to be sure not there but did not work.
Does anyone knows the exact parameter name that I can turn off this feature?
I have similar issue, but later I found that is the column select mode. You need to remove it from the setting.json
"editor.columnSelection": true
When I place my cursor on the extremity of a block (represented by the white drawn cursor on the picture below) VSC highlight both the ending and the starting symbol of that block.
The red line on the picture represent the starting and the ending of that block. Where can I set the option for VSC to automatically use a background color to highlight the current selected block ? (I am really more of a visual guy and I like to feel where's my current locations when I am coding.)
You are going to need an extension to do that, it isn't built-in. Try:
Indented Block Highlighting
I am not sure it supports all languages but see if it works in your case.
Bracket-pair-colorizer does something similar but more subtle. See "bracket-pair-colorizer-2.showHorizontalScopeLine".
.
And see How to change indent guide line color between brackets in VSCODE? - perhaps highlighting the active indent guide will be enough for you?
Using (in your settings.json):
"workbench.colorCustomizations": {
"editorIndentGuide.background": "#bbb",
"editorIndentGuide.activeBackground": "#f00e0e",\
}
I have applied the below settings in VS Code to get 4 spaces indentation.
But always when I open a new file, it switches back to 2 in the right-bottom corner.
If I click in the right-bottom corner and change the setting back to 4,
VSCode will still change back to 2 and still apply it with the 2-space auto-indent.
Alt+Shift+F
What am I missing?
Bit of an late answer. But just got the same issue solved...
Multiple things are able to control this. It also has taken me quite a bit of experimentation to get it corrected. For me point 3 below was the final trick to make it work. Before that, I noticed the editor loading with 4, but jumping back to 2 spaces. Now it stays at 4.
Some things to check:
1: VS Code configuration (Settings & Workspace, you can set these for system wide configuration or just for the current Workspace):
Check whether you have set:
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.detectIndentation": false
And language specific settings (optional):
"[javascript]": {
"editor.tabSize": 4
},
"[typescript]": {
"editor.tabSize": 4
}
2: Are there any Extensions that could influence the indentation -> people have reported JS-CSS-HTML to also configure the setting.
3: Is there a .editorconfig file in your workspace? If so, check the settings over there. Angular creates one for example and configures the indent_size:
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
Most answers focussed point 1 which, but for me the last step was important to make VS Code work properly.
This Stack Overflow handles all of the above in different answers:
Visual Studio Code: format is not using indent settings
I fixed it in the VisualStudio settings (1.31)
Go to: settings > workspace settings > Text editor
uncheck 'Detect Indentation' to stick to your default setting.
In many cases, it is Prettier that causes this. In fact, it just ignores all settings listed in #Oskar's answer.
So it needs to be overridden explicitly:
"prettier.tabWidth": 4,
"prettier.useTabs": true
And then just go to your file and hit Ctrlk,Ctrld, and the correct indentation should be applied.
See also Prettier is not indenting as specified.
Slightly different from previous answers. I had one file with the wrong indentation for its type and I wanted to correct only that file.
(If you must know: this Python script started out as text file with some queries in it. I got it from psql's -E \d echo look at the postgres schemas).
Anyway, this file was now a Python .py file, with a 2 spaces indentation. Not something that should be fixed by modifying general vscode settings.
What I did:
click on the bottom status bar spot that says 2 Spaces
choose Convert Indentation to Tabs on the dialog popup. Now it says Tab size 2
click on the status bar again where it says Tab size 2
choose Convert Indentation to Spaces. Now the dialog changes to propose indent size: 2 is selected. Pick 4 instead or any size you want.
Done
Basically there are different ways through this dialog, but if you get into tab mode and then switch back to space-based indentation, it will allow you to pick the number of spaces you want to use.
Be careful; this extension EditorConfig for VS Code interferes with vscode tab and indentation settings. Its installed by default but it is a nightmare. Disable it will solve all your problems.
Another problem I discovered with Python is that VS Code uses autopep8. No matter which setting I tweaked, VS Code seemed to ignore the 2 spaces setting. If you want 2 spaces instead of 4 - the fix is to add this to your settings.json.
"python.formatting.autopep8Args": [
"--indent-size=2",
"--ignore E121"
]
Btw you can see your autopep8 arguments by opening the command palette (⌘-shift-p on mac) and entering >Python: Show Language Server Output then switching to view the "Python" log.
This seems to be a common issue. See: VS Code Python autopep8 does not honor 2 spaces hanging indentation
I highlight current line by evaluating:
(hl-line-mode)
It could also be set globally:
(global-hl-line-mode nil)
The problem is that this way line highlighting overrides highlight-phrase. So my question is: "how to highlight both current line and a given phrase in this line?"
Both highlight-phrase and hl-line apply faces that have a background color set. hl-line wins because it uses an overlay, and overlays always override text properties, which highlight-phrase uses. I suggest that you work around this by customizing the hi-yellow face to use a bright foreground color instead of a background color, or even a box.
So here's some, definetly not ideal, solution. Do:
M-x customize-face
emacs then asks you which one, and I did
hl-line
Then I turned off "inherit" flag (the last one), and turned on the "foreground" flag, - it was saying "black" - I made it red. After that You should save it all at the top of the page - either - for this seccion only, or for future sessions too.
That's it! This way current line text arrears of red font, while highlight-phrase highlights the phrase with yellow.
Edit: The previous solution that I posted doesn't work, but this one should.
Highlight has two modes, one for font-lock-enabled buffers (which uses font-lock) and one for without (which uses overlay). The solution I found was to simply force highlight to use overlay at all times, and thus have higher priority over hl-line (because shorter overlays have an implicitly higher priority, given the same value of priority).
To do this I went into hi-lock.el and replaced every instance of font-lock-fontified with nil. Be sure to M-x byte-compile-file afterwards in order to update hi-lock.elc.