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.
Type | Mac Shortcut | Windows/Linux Shortcut | |
---|---|---|---|
Quick Fix | context menu | โ + . | Ctrl + . |
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:
Type | Mac Shortcut | Windows/Linux Shortcut | |
---|---|---|---|
Quick Fix | context menu | โ + . | Ctrl + . |
Refactor | context menu | โ + โ + R | Ctrl + Alt + R |
Source Action | context menu | โ + โ + S | Ctrl + Alt + S |
Other Action | context menu | โ + โ + A | Ctrl + Alt + A |
Action Shortcuts
Several actions can also be executed directly:
Type | Mac Shortcut | Windows/Linux Shortcut | |
---|---|---|---|
Extract | direct | โ + โ + X | Ctrl + Alt + X |
Inline | direct | โ + โ + I | Ctrl + Alt + I |
Toggle Braces {} | direct | โ + โ + B | Ctrl + Alt + B |
Move Up | direct | โ + โฅ + โ | Ctrl + Alt + U |
Move Down | direct | โ + โฅ + โ | Ctrl + Alt + J |
Selection Shortcuts
The smart shrink and expand selection shortcuts are essential for creating semantic selections that provide the right context when triggering refactorings:
Action | Type | Mac Shortcut | Windows/Linux Shortcut |
---|---|---|---|
Smart Expand Selection | direct | โ + โง + โ + โ | โง + Alt + โ |
Smart Shrink Selection | direct | โ + โง + โ + โ | โง + Alt + โ |
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.