Editor Integration

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

Refactoring Suggestions

The P42 JS 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

Command Palette

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

Keyboard Shortcuts

Keyboard shortcuts are essential for effectively editing source code. The JS Assistant adds several shortcuts to help you access and work with refactorings easily.

Context Menus Shortcuts

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

Action Shortcuts

Several actions can also be executed directly:

Selection Shortcuts

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

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

Touch Bar

The P42 JS Assistant adds the following buttons to the MacOS touch bar:

• ✏️ (Rename): Triggers the rename command on the current symbol.
• 🪄 (Quick Fix): Opens the quick-fix context menu.
• 🔧 (Refactor): Opens the refactor context menu.
• 📄 (Source Action): Opens the source action context menu.

You can change the touch button visibility in the P42 Settings.

💡   Learn more about configuring the touch bar in Visual Studio Code.