FlutterTip: Select quick actions in VSCode faster

FlutterTip: Select quick actions in VSCode faster

If you are an avid keyboard user you may not enjoy having to reach out for your mouse every time you need to select a quick action, for example, to wrap one widget with another widget.

Although this is not specific to any programming language, it is specially true for Flutter because there are a lot of quick actions.

Screenshot of default Flutter quick actions in VSCode

That's where the Keyboard QuickFix extension comes in.

It allows you to filter and select quick actions faster.

After installing the extension, we need to setup a new keyboard shortcut. So open the command pallette and search for Preferences: Open Keyboard Shortcuts (JSON) then press Enter.

Then add this to the end of the file:

    "key": "ctrl+.",
    "command": "keyboard-quickfix.openQuickFix",
    "when": "editorHasCodeActionsProvider && editorTextFocus && !editorReadonly"

Now when you press Ctrl + . (on a widget) you can type www to select the Wrap with widget action.

Screenshot of filtering the Wrap with widget quick action using the Keyboard QuickFix extension by typing www after pressing Ctrl + . on a widget

Here is a table of filters to select some of the default quick actions.

FilterQuick action
wwbWrap with Builder
wwcWrap with Center
wcolWrap with Column
wconWrap with Container
wwpWrap with Padding
wwrWrap with Row
wsiWrap with SizedBox
wstWrap with StreamBuilder
wwwWrap with widget
rwRemove this widget

Thanks for reading!