What's new in P42? Summer 2022
Tags: vscode, javascript, typescript, vue
Published: 2022-06-21 08:41:00

Since February, the [P42 JavaScript Assistant for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) has grown considerably and contains over 90 code assists and refactorings. The user interface has been improved based on feedback, and the JavaScript Assistant now supports Vue.js. Here are the details:

## Vue.js Support (P42 Pro)
You can now use code assists, refactorings, and suggestions from the P42 JavaScript Assistant inside `.vue` files and mass refactorings updates `.vue` files.

![P42 Vue.js Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejpzgm1e6td2cfxto1d2.gif)

## User Interface

### Keyboard Shortcuts

The JavaScript Assistant has different default keyboard shortcuts for the code assist context menus and a "move" context menu shortcut. You can now [add custom keyboard shortcuts for any P42 code assist](https://p42.ai/documentation/p42-for-vscode/editor-integration#keyboard-shortcuts).

| Context Menu | Mac Shortcut | Windows/Linux Shortcut |
| ----------| ------------ | ------------ | 
| Quick Fix | <kbd>CMD</kbd> + <kbd>.</kbd> | <kbd>CTRL</kbd> + <kbd>.</kbd> |
| Refactor | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>R</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>R</kbd> |
| Extract | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>X</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>X</kbd>
| Inline | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>I</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>I</kbd>
| Convert | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>C</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>C</kbd>
| Move | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>M</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>M</kbd>
| Action | <kbd>CTRL</kbd> + <kbd>CMD</kbd> + <kbd>A</kbd> | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>A</kbd>

### Suggestion Display and Panel
The P42 refactorings suggestions are shown as hints inside the editor (underline with three dots) by default, and the suggestion side panel highlights relevant code on mouseover. When you click on a selected item in the side panel, the editor scrolls to the appropriate location.

![P42 Code Highlighting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2egu8rzarslefwcysysm.gif)

### Mass Refactoring (P42 Pro)
The [mass refactoring](https://p42.ai/documentation/p42-for-vscode/mass-refactoring) dialog is now more usable. You can search the description and details, e.g., to find all ES2015 modernizations, and the refactorings are sorted alphabetically.

The mass refactoring output is easier to understand and contains more information. It includes the file exclusions patterns, a progress indicator for every 50 analyzed files, and the overall refactoring time in seconds.

## Configuration
### ECMAScript Target Version
You can [specify the target ECMAScript version in the P42 configuration file](https://p42.ai/documentation/p42-for-vscode/configuration#platform-version). Code modernizations that would require newer ECMAScript versions are hidden when you configure an older target version.

### Hide Overlapping Code Actions
The P42 JavaScript Assistant provides code assists that mirror and extend the functionality of code assists that come with Visual Studio Code. You can now [configure the visibility of overlapping code assists](https://p42.ai/documentation/p42-for-vscode/configuration#overlapping-code-assist-visibility).

## Code Assists and Refactorings

### Working with Variables
- *New* - **[Split Variable Declaration and Initialization](https://p42.ai/documentation/code-assist/split-variable-declaration-and-initialization)**: Separate the variable initialization from its declaration.
- *New* - **[Merge Variable Declaration and Initialization](https://p42.ai/code-assist/merge-variable-declaration-and-initialization)**: Convert the initial assignment of a variable into its declaration initializer.
- *New* - **[Replace with existing variable](https://p42.ai/code-assist/replace-expression-with-existing-variable)**: Replace an expression with an existing variable (P42 Pro). 
- *New* - **[Push variable declaration into initial value](https://p42.ai/documentation/code-assist/push-into-initial-value-declaration)**: Inlines a variable that is initialized with another variable into the declaration of that variable (P42 Pro).
- *New* - **[Remove unused variable](https://p42.ai/documentation/code-assist/remove-unused-variable)**: Remove a variable that is not read or written.
- *Improved* - **[Extract variable](https://p42.ai/documentation/code-assist/extract-variable)** suggests better variable names when extracting identifiers and property access expressions and automatically creates blocks when needed.

![Push variable declaration into initial value](https://p42.ai/image/blog/2022-06-20-whats-new-in-p42-summer-2022-summary/push-into-initial-variable-declaration.gif)

### Working with Destructuring Expressions
- *New* - **[Convert to destructuring assignment](https://p42.ai/documentation/code-assist/convert-to-destructuring-assignment)**: Convert a variable declaration that accesses an object property to a destructuring assignment.
- *New* - **[Merge into preceding destructuring assignment](https://p42.ai/documentation/code-assist/merge-into-preceding-destructuring-assignment)**: Combine an object destructuring assignment with its preceding sibling.
- *New* - **[Flatten array rest/spread property](https://p42.ai/documentation/code-assist/flatten-array-rest-property)**: Merge a ``...[]`` expression into the outer array literal or destructuring expression (P42 Pro).

### Working with Classes
- *New* - **[Move field initialization into constructor](https://p42.ai/documentation/code-assist/move-field-initializer-into-constructor)**: Moves the assignment of the initial field value into the class constructor (P42 Pro).
- *New* - **[Move initialization into field declaration](https://p42.ai/documentation/code-assist/move-field-initializer-into-declaration)**: Moves the assignment of the initial field value into the field declaration (P42 Pro).

### Working with Functions
- *New* - **[Convert named function to function expression](https://p42.ai/documentation/code-assist/convert-named-function-to-function-expression)**: Converts a named function to a const declaration with a function expression.
- *New* - **[Introduce early return / continue](https://p42.ai/documentation/code-assist/introduce-early-return)**: Change an if-statement into an early return or continue statement (P42 Pro).

### Working with Loops and Arrays
- *New* - **[Convert loop to .map()](https://p42.ai/documentation/code-assist/convert-loop-to-map)**: Convert a loop with `.push()` into a `.map()` call (P42 Pro).
- *New* - **[Replace _.each and _.forEach with array.forEach](https://p42.ai/documentation/code-assist/replace-lodash-foreach)**: Replace Lodash `_.each` and `_.forEach` with `array.forEach` (P42 Pro).
- *Improved* - **[Convert array.indexOf() into array.includes()](https://p42.ai/documentation/code-assist/convert-array-index-of-to-array-includes)** converts exclusion checks to `!array.includes(..)`.
- *Improved* - **[Convert loop to for…of](https://p42.ai/documentation/code-assist/convert-loop-to-for-of)** supports converting `anArray.forEach` to a for…of loop.

![Convert loop to .map()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncl1o96xmgvj9ce9ej45.gif)

### Working with Conditional Expressions
- *New* - **[Convert && to if statement](https://p42.ai/documentation/code-assist/convert-and-and-guard-to-if-statement)**: Convert `condition && aFunction();` and similar expression statements into if statements.
- *Improved* - **[Split if statement](https://p42.ai/documentation/code-assist/split-if)** supports splitting on `||`.
- *Improved* - **[Flip operator](https://p42.ai/documentation/code-assist/flip-operator)** supports `+`, `*`, and binary operators.

### Working with String and Templates
- *New* - **[Convert string comparison chain to array.includes](https://p42.ai/documentation/code-assist/convert-comparison-chain-to-array-includes)**: Replace `|| value === 'aString'`` and `&& value !== 'aString'`` chains with `array.includes()``.
- *Improved* - **[Extract selected text into variable](https://p42.ai/documentation/code-assist/extract-substring-to-variable)** supports extracting text and included expressions from template literals.
- *Improved* - **[Inline into template](https://p42.ai/documentation/code-assist/inline-into-template)** supports inlining template literals into template literals.

### Other Code Actions
- *New* - **[Remove console.log](https://p42.ai/documentation/code-assist/remove-console-log)**: Remove `console.log` statement.
- *New* - **[Replace void 0 with undefined](https://p42.ai/documentation/code-assist/replace-void-0-with-undefined)**: Replace `void 0` and other constant `void` expressions with undefined.
- *New* - **[Select expression occurrences](https://p42.ai/documentation/code-assist/select-expression-occurrences)**: Start a multi-cursor selection on several occurrences of the same expression (P42 Pro).
- *Improved* - Replaced the "move statement out of if-else" refactoring with new **[Move duplicated first statement out of if-else](https://p42.ai/documentation/code-assist/move-first-statement-out-of-if-else)** and **[Move duplicated last statement out of if-else](https://p42.ai/documentation/code-assist/move-last-statement-out-of-if-else)** refactorings.

![Select expression occurrences](https://p42.ai/image/blog/2022-06-20-whats-new-in-p42-summer-2022-summary/select-expression-occurrences.gif)

You can follow [@p42ai on Twitter](https://twitter.com/p42ai) to get notified about new features.

Happy Coding!