Vscode: Explore improvements to settings editor

[roblourens]

Things to investigate

• Left-side editing
  
  
  
  • Context menu option to edit value
  
  
  • ~CodeLens to edit value~
  
  
  • ~Move pencil icon to value~ It actually was on the right side previously. It may actually be less noticeable after a long value, it may wrap to the next line, etc. Putting it in between the key/value seems weird, and we don't want it to overlap any text.
  
  
  • Replace the pencil icon with a highlight over the value. Clicking anywhere on it shows the edit menu. It acts functionally more like a dropdown.
  
  
  • ~Make pencil icon always visible~
  
  
  • Indicate the value of an edited setting on the left
  
  
  • Or just indicate that a setting is overridden by something on the right
  
  
• Right-side editing
  
  
  
  • ✅ Auto fix missing commas #42232
  
  
  • Autosave when editing manually
  
  
• Search
  
  
  
  • Can't focus the cursor at the current setting with the keyboard
  
  
  • ✅ Weird <enter> nav order #42126
  
  
  • Should go over all overridden settings first
  
  
  • Navigate through the other settings domains?
  
  
  • Can't see if a setting is actually overridden in another settings domain tab
  
  
  • ✅ After a search, the number of matches should be shown in the User, Workspace, Folder tabs https://github.com/Microsoft/vscode/issues/42377
  
  
  • ✅ Add keyboard shortcut to trigger edit of selected setting #42124
  
  
  • Or the setting under the cursor
  
  
  • Or to focus (one of) the editors so we can then do something with the cursor
  
  
• Right side
  
  
  
  • Reorder and group User Settings
  
  
  • Or make an extension to do this
  
  
  • Filter User Settings
  
  
• Quick Open to manage settings (like @sandy081's extension)
• Easy editing of common settings from the welcome page
• Add quick fix for settings from non-installed extensions on the right side. Example: lcov settings in vscode workspace settings

[roblourens]

Photoshop mockups

• Context menu option to edit value
  

• CodeLens to edit value
  

• Move pencil icon to value
  
  
  

  • On right side of value:
    

• Make pencil icon always visible
  

  • Much less annoying when it's on the right
    

• Indicate the value of an edited setting on the left
  
  
  

• Or just indicate that a setting is overridden by something on the right
  

[sandy081]

@roblourens I liked the one which you demoed in slack that showing some affordance on hover and clicking on it shows the context menu. Not sure if there are improvements on top of it.

[patrys]

Indicate the value of an edited setting on the left

What if left side indicated the effective value and the comment said // default is "off"?

[roblourens]

Click on value to edit:

@patrys One complication is that the setting can be overridden by User, Workspace, or Folder settings. If we show the value for the currently selected settings scope, it might confuse someone if that setting is overridden in a different scope. And if it's overridden differently for different folders in a multiroot workspace, then there is no one "effective value".

[patrys]

If there are multiple values then which scope would be affected when I click to change the value?

[roblourens]

The one that's selected on the right - same as what happens currently when you edit a setting using the pencil button.

This situation is why this isn't just a dropdown.

[sandy081]

@roblourens How about providing some assistance to inform users that the value change will happen in the right hand side editor? Otherwise, it might confuse new users who are not aware of this.

[roblourens]

After a search, the number of matches should be shown in the User, Workspace, Folder tabs

Demo in https://github.com/microsoft/vscode/tree/roblou/prefsSearchBadges

[roblourens]

Add keyboard shortcut to trigger edit of selected setting

The edit menu is triggered on the focused setting with cmd+.

Demo in https://github.com/Microsoft/vscode/tree/roblou/editPreferenceCommand

[roblourens]

Auto fix missing commas

Adds a save listener to the configuration-editing extension, which parses the document and fixes missing commas, as best as it can.

Prototype: https://github.com/Microsoft/vscode/tree/roblou/autofixSettingsCommas

[patrys]

@roblourens Since autocomplete knows that it's completing a setting name, could it not, at the moment you accept a setting name as a suggestion, take care of inserting a missing comma at the end of the previous non-empty line? It seems that this would be less magic and less error-prone than trying to fix an entire file on save.

[roblourens]

It should work whether you are using intellisense, or typing the full name, or copy/pasting from the left side, or anything else.

Also, the intellisense completion would be changing the previous line at some arbitrary position, which I think isn't possible for basic completions.

[sandy081]

Moving to February to follow up on further improvements

[fabiospampinato]

My experience with editing settings would be much better if there was a "Open Raw User Settings" command. Always splitting the editor makes it hard to edit the settings while having them to the side, if you do so in a small-ish screen (<= 15").

[roblourens]

There's a setting, "workbench.settings.openDefaultSettings": false, so only the settings.json file will be opened without the default settings split view.

[fabiospampinato]

But that's not something you always want, just sometimes. An additional command would be much more usable.

[fabiospampinato]

@roblourens pushing again for an Open Raw User/Workspace Settings command, I hope we do agree that there's a problem if it's more ergonomic to edit a workspace's settings file in another VSC instance, just to avoid the split editor (I'm making a theme, so editing the settings on one side and checking the results on the other):

[roblourens]

I opened https://github.com/Microsoft/vscode/issues/49495 for it