Vscode: Outline matching selections instead of highlight

Created on 3 Mar 2017  路  10Comments  路  Source: microsoft/vscode

  • VSCode Version: 1.10.1
  • OS Version: macOS 10.12.2

Steps to Reproduce:

  1. Highlight a selection with multiple instances.
  2. Look how hard it is to distinguish which instance is selected.

screen shot 2017-03-03 at 7 33 55 am
screen shot 2017-03-03 at 7 36 55 am

There are three fundamental issues that this request entails:

  1. When you make a selection and there are multiple instances, it's extremely hard to distinguish which one is actually selected. This image shows VSCode's standard Monokai theme. This is not a "theme" issue, users should be able to use any theme that is available in the marketplace.

  2. When you make a selection, matching instances shouldn't be highlighted at all. Being highlighted indicates that they are also selected, which is not the case. So when I double click on a single word to select it, all the matching instances get highlighted too, creating the appearance that they are all selected.

  3. The check that looks for matching instances should be _case sensitive_, so that when I select contract, a camel-case instance of newContract should not have that instance of contract highlighted.

editor-highlight editor-theming feature-request ux

Most helpful comment

On a related note, border width & radius options would be super nice to have.

All 10 comments

+1 for the change

+1

Agree, It would be nice to let us choose the right setting (outline or selection).

+1

There are three fundamental issues that this request entails:

  1. When you make a selection and there are multiple instances, it's extremely hard to distinguish which one is actually selected. The theme in the attached image above is a VSCode's standard Monokai theme. This is not a "theme" issue, users should be able to use any theme that is available in the marketplace.

  2. When you make a selection, matching instances shouldn't be highlighted at all. Being highlighted indicates that they are also selected, which is not the case. So when I double click on a single word to select it, all the matching instances get highlighted too, creating the appearance that they are all selected.

  3. The check that looks for matching instances should be _case sensitive_, so that when I select contract, a camel-case instance of newContract should not have that instance of contract highlighted.

(Just providing a little more clarity on this issue)

Is there currently a way to deal with this now, because I can't seem to disable the highlighting matches in settings...?

+1 for just outlines like in original post

Isn't this already achievable?

"workbench.colorCustomizations": {
    "editor.selectionHighlightBorder": "#61AFEF",
    "editor.selectionHighlightBackground": "#fff0",
}

demo

A bunch of other borders can be configured too:
https://code.visualstudio.com/docs/getstarted/theme-color-reference#_editor-colors

Copying this here from #30793 (closed/duplicate) to provide additional context.


+1

This would make it much easier to create a high-visibility style for the active selection.

comparison

On a related note, the lack of selectionForeground for non-high-contrast themes is definitely a detriment to achieving the same effect.


Also, I just noticed that the selection & selectionHighlight properties have kind of an odd behavior in relation to addSelectionToNextFindMatch.

When using addSelectionToNextFindMatch, the selection & selectionHighlight properties are both applied to each additionally selected match. I would expect selection properties to activate and selectionHighlight properties to deactivate in this case. The expected behavior is exhibited in the second half of the GIF, when multiple selections are made simultaneously.

selection

 
Here is the same sequence of actions in SublimeText:

selection2

On a related note, border width & radius options would be super nice to have.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

DovydasNavickas picture DovydasNavickas  路  3Comments

sirius1024 picture sirius1024  路  3Comments

shanalikhan picture shanalikhan  路  3Comments

philipgiuliani picture philipgiuliani  路  3Comments

v-pavanp picture v-pavanp  路  3Comments