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.

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.

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:

• from the right-click editor context menu
• from the command palette
• using a keyboard shortcut

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:

Command Palette

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

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:

Several actions can also be executed directly:

You can move code elements with the following shortcuts:

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

💡  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"
    }
}