Editor Integration

The P42 JavaScript Assistant extends the JavaScript and TypeScript editors in Visual Studio Code in several ways.

Refactoring Suggestions

The P42 JavaScript Assistant suggests beneficial refactorings by showing an underline with three dots (for refactorings) or a blue or yellow squiggly underline (For code cleanups). You can invoke them as a quick-fix.

šŸ’”Ā Ā If you want to show some suggestions differently, e.g., as a warning, you can configure them in the Visual Studio Code settings.

Refactoring Hints

Quick-Fixes

The quick-fix context menu contains the most relevant actions for the current cursor position or selection. You will see a lightbulb in your editor when code actions are available. You can click on the lightbulb or use a keyboard shortcut to open the quick-fix context menu.

TypeMac ShortcutWindows/Linux Shortcut
Quick Fixcontext menuāŒ˜ + .Ctrl + .

Quick Fix menu

Refactoring Context Menus

In addition to the quick-fix context menu, there is a more general "Refactor" context menu and several more specific context menus for refactoring types such as "Inline" or "Move".

You can open these menus in three ways:

Editor Context Menu

When you right-click in the editor, a context menu shows up. The P42 JavaScript Assistant adds several menu items as well as shortcuts to a section of this menu:

Editor context menu

Command Palette

The P42 JavaScript Assistant adds several commands to Visual Studio Code. You can access them in the command palette by entering >P42:

Command palette

Keyboard Shortcuts

Keyboard shortcuts are a fast way to select and execute refactorings and code assists.

The following context menus can be opened with keyboard shortcuts in the editor:

TypeMac ShortcutWindows/Linux ShortcutCode Assists
Quick Fixcontext menuāŒ˜ + .Ctrl + .only quick-fixes
Refactorcontext menuāŒƒ + āŒ˜ + RCtrl + Alt + R87 code assists
Extractcontext menuāŒƒ + āŒ˜ + XCtrl + Alt + X3 code assists
Inlinecontext menuāŒƒ + āŒ˜ + ICtrl + Alt + I3 code assists
Convertcontext menuāŒƒ + āŒ˜ + VCtrl + Alt + V48 code assists
Movecontext menuāŒƒ + āŒ˜ + MCtrl + Alt + M11 code assists
Source Actioncontext menuāŒƒ + āŒ˜ + SCtrl + Alt + S
Other Actioncontext menuāŒƒ + āŒ˜ + ACtrl + Alt + A2 code assists

Several actions can also be executed directly:

TypeMac ShortcutWindows/Linux ShortcutCode Assists
Inlinedirectā‡§ + āŒƒ + āŒ˜ + Iā‡§ + Ctrl + Alt + I3 code assists
Toggle Braces {}directāŒƒ + āŒ˜ + BCtrl + Alt + B6 code assists

You can move code elements with the following shortcuts:

ActionTypeMac ShortcutWindows/Linux ShortcutCode Assists
Movecontext menuāŒƒ + āŒ˜ + MCtrl + Alt + M11 code assists
Move UpdirectāŒƒ + āŒ„ + ā†‘Ctrl + Alt + U5 code assists
Move DowndirectāŒƒ + āŒ„ + ā†“Ctrl + Alt + J5 code assists

The smart shrink and expand selection shortcuts are essential for creating semantic selections that provide the right context when triggering refactorings:

ActionTypeMac ShortcutWindows/Linux Shortcut
Smart Expand SelectiondirectāŒƒ + ā‡§ + āŒ˜ + ā†’ā‡§ + Alt + ā†’
Smart Shrink SelectiondirectāŒƒ + ā‡§ + āŒ˜ + ā†ā‡§ + Alt + ā†

šŸ’”Ā Ā You can re-configure the context menu keyboard shortcuts in the Visual Studio Code preferences.

Custom Keyboard Shortcuts

You can set up custom keybindings for any code action in Visual Studio Code. This approach also works for the code assists from the P42 JavaScript Assistant. You can find the code action kind for each P42 code assist on its documentation page.

šŸ’”Ā Ā You can find the JSON definition of the keyboard shortcuts by using the >Preferences: Open Keyboard Shortcuts (JSON) command in the Visual Studio Code command palette.

šŸ’”Ā Ā The code action kind is hierarchical. You can combine different code assists that share the same prefix into a single shortcut.

šŸ’”Ā Ā The code action kinds in the P42 JavaScript Assistant might change from time to time to allow for better grouping of different code assists into single shortcuts. The changelog will mention such changes, so you can easily update your custom shortcuts.

Here are a few examples:

Toggle Arrow Function Braces Context Menu

This shortcut combines the "Add {ā€¦} to arrow function" and "Remove {ā€¦} from arrow function" code assists using their shared code action kind prefix and shows a context menu.

{
    "key": "Ctrl+Cmd+E",
    "command": "editor.action.codeAction",
    "args": { 
        "kind": "refactor.rewrite.toggle.braces.arrow-function",
        "apply": "never"
    }
}

Direct Extract Variable Keyboard Shortcut

This shortcut introduces a direct keybinding for the "Extract variable" code assist.

{
    "key": "Ctrl+Cmd+Shift+X",
    "command": "editor.action.codeAction",
    "args": { 
        "kind": "refactor.extract.p42.extract-variable",
        "apply": "ifSingle"
    }
}