Create custom widget for code actions (menu items).

[justschen]

Creating a custom list widget for code actions to improve the code actions experience.

[lgrammel]

Hi! I just tried out the new code action widget in 1.70.

Is there a plan to show the keyboard shortcuts as well (similar to the old code action context menu)?

This is helpful when there are different more detailed shortcuts for code actions, for example:

Old:

New:

The 2 shortcuts are not shown in the new version.

[justschen]

@lgrammel What OS are you using VS Code in + can you give me a little more detail on how you're opening the code action widget? I was actually unaware that keybindings were ever shown in the Quick Fix.

Given this notion though, I definitely think it's helpful and can take a look into adding it in!

[lgrammel]

I'm using Mac OS Monterey 12.2 and I've invoked the menu through a shortcut provided by the JavaScript Assistant extension that I'm developing. It would apply to any user-defined shortcut for code actions as well, say in the following scenario with CTRL+CMD+M:

{
    "key": "Ctrl+Cmd+M",
    "command": "editor.action.codeAction",
    "args": {
          "kind": "refactor.move",
          "apply": "never"
    }
} 

{
    "key": "Ctrl+Alt+Up",
    "command": "editor.action.codeAction",
    "args": {
          "kind": "refactor.move.up",
          "apply": "ifSingle"
    }
} 

{
    "key": "Ctrl+Alt+Down",
    "command": "editor.action.codeAction",
    "args": {
          "kind": "refactor.move.down",
          "apply": "ifSingle"
    }
} 

[justschen]

Gotcha! I think the reason some users have the shortcut details is because VS Code is using the native OS context menu.

Regardless, I'll go ahead and open an issue and take a look at it this iteration!

The issue can be found here: #157129

[lgrammel]

Awesome, thank you!

[HIKALU-Z]

it's really an awesome feature! it help me use my key bindings wehn refactor!
thank you!

[Daellhin]

Thanks for creating this feature. I have been waiting for shortcut support in quick actions for some time.
It realy is my highlight from the latest VS Code update😊

[OliverJAsh]

Some feedback from trying out useCustomCodeActionMenu: it's no longer possible to select a list item using the keyboard. For example, with the old version I was able to select "Unwrap function call" simply by typing u:

[PabloLION]

@lgrammel, may I ask what "theme" you are using in the "New"?

New:

Mine is not highlighting the current selection nor with keyboard nor with mouse after the cursor moving away. Like this

I tried the default light / dark them and neither shows the highlight.

[lgrammel]

@PabloLION I was using Github Light Default when I took the screenshot.

[michaelschufi]

I have some feedback regarding the keyboard UX that has bothered me for a long time now 😅.

The old and the new widget both immediately select (but not activate) the option that is under the mouse cursor - even when opened with a hotkey (quick fix hotkey). This is really annoying if you want to quickly just accept the first quick fix in the list (e.g. adding an import), but coincidentally the mouse is over an option you don't want to choose and you either activate the wrong option, or have to scroll through all the options to the top first.

What I suggest is to ignore the mouse's position on the widget before the mouse is moved. This makes the mouse not interfere with whatever actions you are taking with the keyboard.

I will follow up with a small GIF if it's not clear.

[justschen]

@michaelschufi This fix is actually in Insiders at the moment! The mouse will no longer automatically select the option its hovering over on startup of the widget (although keyboard selection will still be on the first available code action). See #157694

[justschen]

Some loose ends to potentially take a look at @mjbvz:

• Keyboard and mouse interactions
• UI/UX of headers, fonts, and how selection looks for hover on mouse vs focus from keyboard navigation
• Adding code font to refactoring labels that have quotes around them (like Extract function newFunction)
• Adding additional code action groups and codicons (Add more refined code action group separators #158515)
• Automatically open the refactoring preview diff editor after hitting Refactor preview from the widget (Automatically show diff editor in refactor preview #158408)
• Position of the widget should open from the location of cursor, not from where highlight select started.
• Mnuemonics: how does the user quickly get the refactor they want via only the keyboard? (Keyboard shortcuts for specific code actions #157719)
• Add a mini quickpick to help with mnuemonics and searching/filtering for the correct code action.

[mjbvz]

Closing as this is shipping with the august release