The P42 JS Assistant adds a new section to the Visual Studio Code side bar. It contains several panels:

## Actions Panel

The actions panel shows available P42 actions for the current cursor position and selection. 
It updates when you move the cursor, change the selection, or switch the active editor. 
You can execute an action by clicking on it.

![P42 Actions Panel](/image/documentation/p42-for-vscode/side-bar/actions-panel.png)

## Suggestion Panel

The suggestions panel shows recommended refactorings for the currently active editor.
You can expand a suggestion by clicking on it.
The expanded suggestion can be applied from the sidebar.

![P42 Suggestion Panel](/image/documentation/p42-for-vscode/side-bar/feature-suggestion-sidebar.gif)

### Apply All Safe Suggestions
With [P42 Pro](/pricing), you can quickly refactor the currently active editor content by applying all safe suggestions.

![Apply All Safe Suggestions](/image/documentation/p42-for-vscode/side-bar/feature-apply-safe-suggestions.gif)


Actions Panel

Suggestions Panel

Side Bar

<div align="center" style="margin-bottom: 20px;">
  <p align="center">
    <img src="/image/vscode/vscode-header.gif"
         alt="P42 JS Assistant in Action" 
         style="max-width: 100%"/>
    <br />
    <a href="https://github.com/p42ai/refactor-vscode/issues">Report Bug</a>
    ·
    <a href="https://github.com/p42ai/refactor-vscode/issues">Request Feature</a>
    ·
    <a href="https://twitter.com/p42ai">Follow @p42ai</a>
  </p>

</div>

The **[JS Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)** adds **[automated refactorings and actions](/documentation/code-assist/) for JavaScript, TypeScript and React** to VS Code. The available actions depend on the cursor position, the selected text (if any), the source code, the language type, and any available type information.

You can find available actions in the VS Code **quick fix and refactoring context menus** and in context menus for specific action types. In some situations, **refactoring hints**  (underline with 3 dots) indicate beneficial actions that you can take.

To help you refactor with confidence, the JS Assistant evaluates the impact on the logical program behavior and often shows **[refactoring safety information](/documentation/p42-for-vscode/safety-evaluation)** in the context menu entry.

Get Started

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.

> 💡&nbsp;&nbsp;If you want to show some suggestions differently, e.g., as a warning, you can [configure them in the Visual Studio Code settings](/documentation/p42-for-vscode/configuration#visual-studio-code-settings).

![Refactoring Hints](/image/documentation/p42-for-vscode/editor-integration/feature-suggestion.png)

## 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](#keyboard-shortcuts) to open the quick-fix context menu.

|  | Type | Mac Shortcut | Windows/Linux Shortcut |
| :-- | :-- | --: | --: |
| **Quick Fix** | *context menu* | <kbd>⌘</kbd> + <kbd>.</kbd> | <kbd>Ctrl</kbd> + <kbd>.</kbd> |

![Quick Fix menu](/image/documentation/p42-for-vscode/editor-integration/feature-quickfix-menu.gif)

## 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](#editor-context-menu)
* from the [command palette](#command-palette)
* using a [keyboard shortcut](#keyboard-shortcuts)

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

![Command palette](/image/documentation/p42-for-vscode/editor-integration/command-palette.png)

## 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* | <kbd>⌘</kbd> + <kbd>.</kbd> | <kbd>Ctrl</kbd> + <kbd>.</kbd> |
| **<ins>R</ins>efactor** |  *context menu* |  <kbd>⌃</kbd> + <kbd>⌘</kbd> + <kbd>R</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>R</kbd> |
| **<ins>S</ins>ource Action** |  *context menu* |  <kbd>⌃</kbd> + <kbd>⌘</kbd> + <kbd>S</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>S</kbd> |
| **Other <ins>A</ins>ction** |  *context menu* |  <kbd>⌃</kbd> + <kbd>⌘</kbd> + <kbd>A</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>A</kbd> |

### Action Shortcuts
Several actions can also be executed directly:

|  | Type | Mac Shortcut | Windows/Linux Shortcut |
| :-- | :-- | --: | --: |
| **E<ins>x</ins>tract** |  *direct* |  <kbd>⌃</kbd> + <kbd>⌘</kbd> + <kbd>X</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>X</kbd> |
| **<ins>I</ins>nline** |  *direct* |  <kbd>⌃</kbd> + <kbd>⌘</kbd> + <kbd>I</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>I</kbd> |
| **Toggle <ins>B</ins>races {}** |  *direct* |  <kbd>⌃</kbd> + <kbd>⌘</kbd> + <kbd>B</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>B</kbd> |
| **Move Up** |  *direct* |  <kbd>⌃</kbd> + <kbd>⌥</kbd> + <kbd>↑</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>U</kbd> |
| **Move Down** |  *direct* |  <kbd>⌃</kbd> + <kbd>⌥</kbd> + <kbd>↓</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>J</kbd> |

### 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* | <kbd>⌃</kbd> + <kbd>⇧</kbd> + <kbd>⌘</kbd> + <kbd>→</kbd> | <kbd>⇧</kbd> + <kbd>Alt</kbd> + <kbd>→</kbd>
| **Smart Shrink Selection** | *direct* | <kbd>⌃</kbd> + <kbd>⇧</kbd> + <kbd>⌘</kbd> + <kbd>←</kbd> | <kbd>⇧</kbd> + <kbd>Alt</kbd> + <kbd>←</kbd>

### Custom Keyboard Shortcuts
You can set up [custom keybindings for any code action in Visual Studio Code](https://code.visualstudio.com/docs/editor/refactoring#_keybindings-for-code-actions). 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](/documentation/code-assist). 

> 💡&nbsp;&nbsp;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.

> 💡&nbsp;&nbsp;The code action kind is hierarchical. You can combine different code assists that share the same prefix into a single shortcut.

> 💡&nbsp;&nbsp;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"](/documentation/code-assist/add-braces-to-arrow-function) and ["Remove {…} from arrow function"](/documentation/code-assist/remove-braces-from-arrow-function) code assists using their shared code action kind prefix and shows a context menu.
```json
{
    "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"](/documentation/code-assist/extract-variable) code assist.
```json
{
    "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.

> 💡&nbsp;&nbsp;[Learn more about configuring the touch bar in Visual Studio Code](/blog/2022-10-21/how-to-configure-the-touch-bar-in-visual-studio-code-in-under-5-minutes).


Refactoring Suggestions

Quick Fixes

Refactoring Context Menus

Command Palette

Keyboard Shortcuts

Touch Bar

Editor Integration

Mass refactoring ([P42 Pro](/pricing)) allows you to quickly modernize hundreds and thousands of files.

For files and folders in the Explorer, there is a "Mass Refactor... \[P42 Pro\]" command that refactors files and folders in one go. You can choose a refactoring from a dialog. The selected file or all files in the folder (and its subfolders) are then refactored with the chosen refactoring. This means that all suggestions that this refactoring produces are applied.

> 💡&nbsp;&nbsp;You can configure [excluded path patterns](/documentation/p42-for-vscode/configuration#configuration-file) to prevent specific folders and files from being updated by a mass refactoring.

### Recommended Workflow

1. Get your workspace in a clean state, e.g., by committing or stashing your current changes or by switching to a clean branch.
2. Run the refactoring on the folders you want to update.
3. **Thoroughly review the individual changes in the diff viewer and revert or fix them as needed**. Modernizations need to cover many edge cases, so there is a chance that some changes may lose comments, break formatting, or affect the semantics. The P42 output log will also contain warnings for unsafe refactorings (see [Safety Analysis](/documentation/p42-for-vscode/safety-analysis)). If you find bugs, please report them here: https://github.com/p42ai/refactor-vscode/issues
4. Run your test suites to ensure nothing broke unexpectedly.
5. Commit the changes.

![Mass Refactoring Command](/image/documentation/p42-for-vscode/mass-refactoring/feature-mass-refactoring.gif)

Recommended Workflow

Mass Refactoring

The JS Assistant safety analysis checks if refactorings can change the code's behavior (within [limitations](#limitations)). The context and quick-fix menu items often contain safety indicators:

* **No indicator** — The JS Assistant has not evaluated the safety of the refactoring or code action. No indicator is the default for code actions such as [adding console.log statements](/documentation/code-assist/insert-console-log) that intentionally change your program.
* **Safe** 🟢 — The refactoring will not change the behavior of your code.
* **Information** 🔵 — The refactoring might detrimentally affect comments or readability.
* **Warning** 🟡 — The refactoring might change the behavior of your code. The text will include short hints at what you need to check to proceed safely. The documentation page for the code action might contain more details.
* **Error** 🔴 — The refactoring will change the behavior of your code and can introduce defects. You might still want to proceed, particularly if you want to change the behavior on purpose.

> 💡&nbsp;&nbsp;You can configure the safety analysis visibility in the [P42 settings](/documentation/p42-for-vscode/configuration#safety-analysis-visibility) and, e.g., hide the analysis.

## Limitations
When you are using TypeScript, the safety analysis **relies on the accuracy of your type annotations**. If your type annotations are not accurate, some refactorings deemed safe by the JS Assistant might lead to the introduction of defects.

The safety analysis **analyzes single files without a larger type context**. Some indirect types resolved by TypeScript in your program might be considered `any` or `unknown`. As a result, the JS Assistant might present warnings that are not relevant if you have the complete type information.

P42 identifies whether a file is run in an **isolated context** (i.e., `var` and `function` do not change the global scope) based on the file extension or the use of `import` or `require`. Files with a `.cjs` extension or a top-level `require('someLibrary)` or `module.exports` are assumed to run as [Node.js CommonJS modules](https://nodejs.org/api/modules.html#the-module-wrapper). Files with a `.mjs` extension or `import` or `export` keywords are assumed to run as [ECMAScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). TypeScript files are assumed to be [transpiled into isolated contexts](https://www.typescriptlang.org/docs/handbook/modules.html#code-generation-for-modules). For other JavaScript files, P42 assumes that they may run in the browser, and `var` could affect the global scope.

For code modernizations, the safety analysis also **relies on the correct behavior of the standard JavaScript functions**. If there are defects in the polyfills that you are using (for polyfilled functions), or if they implement a different behavior than the ECMAScript specification, modernizing the code can introduce defects. The safety analysis also assumes that you have set up the required **transpilation** if you need to support older browsers.

The safety analysis **does not cover runtime performance**, which can be vital if you work on hotspot areas of your application. Refactorings might negatively impact the application performance in some cases.

The safety analysis **does not cover comments**. The JS Assistant tries to retain comment associations as much as possible, but there can be cases where it is unclear which source code belongs to which comment.

Limitations

Safety Analysis

The P42 JS Assistant can be configured in the Visual Studio Code settings, using a `p42.toml` configuration file, and using source code annotations.

## Visual Studio Code Settings

### Refactoring Suggestion Display
For each code assist that provides refactoring suggestions, you can configure how the suggestions are displayed inside the editor. The setting is **P42 > Refactoring > NAME: Suggestion**. The following options are available:

* **Off**: Suggestions are not shown
* **Hint**: Suggestions are shown using a 3-dotted underline in the editor.
* **Information**: Suggestions are shown using a blue squiggly line in the editor and are listed in the problems view as info.
* **Warning**: Suggestions are shown using a yellow squiggly line in the editor and are listed in the problems view as warning.
* **Error**: Suggestions are shown using a red squiggly line in the editor and are listed in the problems view as error.

When code assists are turned off in the `p42.toml` configuration (see below), the Visual Studio Configuration is overridden, and the project/team settings from `p42.toml` take precedence.

![P42 Setting "Refactoring Suggestion Visibility"](/image/documentation/p42-for-vscode/configuration/vscode-setting-refactoring-suggestion-visibility.gif)

# Suggestion Badge
You can configure how the suggestion badge is displayed in the side bar. The setting is **P42: Suggestion Badge**.

# Suggestion Safety
You can disable unsafe suggestions with the **P42: Suggestion Safety** configuration setting.

### Overlapping Code Assist Visibility
The P42 JS Assistant provides code assists that mirror and extend the functionality of code assists that come with Visual Studio Code. The replaced Visual Studio Code code assists are by default hidden to provide a smooth experience. The following code assists are replaced:

* [Add {…} to arrow function](/documentation/code-assist/add-braces-to-arrow-function) and [Remove {…} from arrow function](/documentation/code-assist/remove-braces-from-arrow-function) replace "Add or remove braces in an arrow function"

You can configure the visibility of overlapping code assists using the **P42: Overlapping Code Assist Visibility** setting. The following options are available:

* **Show only P42 code assists**: The default code assists are hidden when a similar P42 code assist is available.
* **Show only default code assists**: The P42 code assists are hidden when a similar default code assist is available.
* **Show all code assists**: Both the P42 code assists and the default code assists are shown when there is overlap.

![P42 Setting "Overlapping Code Assist Visibility"](/image/documentation/p42-for-vscode/configuration/vscode-setting-overlapping-code-assist-visibility.png)

### Code Assist Animation
You can configure the code assist animations (highlights) with the **P42 > Animation: Code Assist** setting. The following options are available:

* **all**: Animate all code assists that support it.
* **off**: Disables all code assist animations.

### Touch Bar
You can enable or disabled each P42 Touch Bar button with the **P42 > Touch Bar** settings.

### Safety Analysis Visibility
You can configure how the safety analysis information is displayed in the code actions context menu with the **P42: Safety Analysis Visibility** setting.

![P42 Setting "Safety Analysis Visibility"](/image/documentation/p42-for-vscode/configuration/vscode-setting-safety-analysis-visibility.png)

### Telemetry
You can activate or disable telemetry data collection with the **P42 > Telemetry: Telemetry Level** setting. Telemetry data is only collected when this setting and the general Visual Studio Code telemetry level are both set to "all". **Telemetry data collection is opt-in and disabled by default**.

Telemetry data helps us better understand how the JS Assistant is used and what features to prioritize. Because P42 never sends your source code, we have not enabled any error reporting through telemetry. We only collect the following events:

* **telemetry collection start**: records platform information (e.g., operation system version, Visual Studio Code version, web or desktop environment, installation timestamp)
* **code action context menu request**: records the code action kind when you open a code action context menu (e.g., `refactor.move`) and the number of P42 code actions that are shown in the menu.
* **code action execution**: records the code action id (e.g., `move-statement`) and it's source (e.g., `quickFix`) when you execute a P42 code action.

The Visual Studio Code machine and session ids are also recorded for all events.

## Configuration File
The `p42.toml` file in the workspace root contains P42 configuration that can be shared in a project. Just check it into your repository and share it with other team members.

Currently, individual code assists can be enabled and disabled. By default, all code assists are enabled.

### Excluded Path Patterns
You can exclude directories, files and file patterns with the `excludedPathPatterns` setting.
The setting is an array of [minimatch (npm) glob pattern](https://github.com/isaacs/minimatch).

```toml
excludedPathPatterns = [
    "**/node_modules/**",
    "**/dist/**",
    "some/other/directory/**",
    "**/generateConfig.js"
]
```

The exclusions apply to in-editor refactorings and to [mass refactoring](/documentation/p42-for-vscode/mass-refactoring).
If no exclusions are specified, the default exclusions `**/dist/**` and `**/node_modules/**` are used.

### Platform Version

In the `[platform]` configuration section, you can specify the versions you are targeting.
Only refactorings that are supported in your platform will be active and recommended.
In particular, code modernizations that are not supported by your platform will be disabled.
For example, if you set the ECMAScript version to `ES2016`, then `ES2021` modernizations will not be shown.

#### ECMAScript

You can set the ECMAScript version that you can use in your source code.
Possible values are `ES5`,`ES2015`, `ES2016`, `ES2017`, `ES2018`, `ES2019`, `ES2020`, `ES2021`, `ES2022`, `ESNEXT` (default).

Ideally, you have transpilation and polyfilling set up to produce production output code for your desired target and use `ESNEXT` in your source code.
However, if your tooling, for example, only supports `ES2016` syntax and functions, you can set the value to `ES2016` and will be able to use `ES5`, `ES2015`, and `ES2015` code modernizations.

```toml
[platform]
ecmaScriptVersion = "ES2016"
```

### Disabling Refactorings

To disable a refactoring, add a section "[refactoring.$refactoring-id]" and set enabled to false, for example:

```toml
[refactoring.add-numeric-separator]
enabled = false
```

The refactoring ids are displayed as grayed-out text in parentheses in the hover messages.

## Source Code Annotations
You can annotate your source code to ignore statements or files.

### Ignoring Statements

You can add a `// p42:ignore-next-statement` comment in a separate line before a statement to prevent P42 (for VS Code and for GitHub) from analyzing the next statement and anything contained in it.

#### Example

```js
if (example) {
  // p42:ignore-next-statement
  x = stringify(schema, { space: 2 }) + "\n";
}
```

In the above snippet, P42 will not analyse the statement `x = stringify(schema, { space: 2 }) + "\n";`.

### Ignoring Files
You can add a `// p42:ignore-file` comment at the beginning of the file (before the first code line). No suggestions etc. will be shown for ignored files.

Visual Studio Code Settings

Configuration File

Source Code Annotations

Configuration

You need to have a [P42 Basic or Business](/pricing) subscription to get a license key. You can try P42 for free for 14-days.

### Getting Your P42 License Key

1. Sign up for [P42 with your GitHub login](/login/github).
1. Start a free trial.
1. Copy the license key to your clipboard.

### Entering Your P42 License Key in Visual Studio Code

1. Install the [P42 JS Assistant extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor&ssr=false).
1. In Visual Studio Code, start the `P42: Enter License Ley` command using the command palette.
1. Paste the license key from your clipboard and press enter.

### Support
If you encounter any issues with your license, please contact [support@p42.ai](mailto:support@p42.ai).

License

#### How is the P42 JS Assistant different from GitHub Copilot
The JS Assistant and GitHub Copilot serve different purposes.
GitHub Copilot provides completions that help you write new or
additional code. The JS Assistant helps you understand and
refactor existing code. It shows metrics and graphs, suggests
refactorings, and automates code actions. Many of our users use
both tools together.

#### What files does the P42 JS Assistant support?
The JS Assistant supports JavaScript, TypeScript, React and Vue.js files:

* Files with a `.js`, `.jsx`, `.cjs`, or `.mjs` extension are supported JavaScript sources.
* Files with a `.ts`, `.tsx`, `.cts`, or `.mts` extension are supported TypeScript sources.
* Files with a `.vue` extension are supported Vue.js [Single File Components](https://vuejs.org/guide/scaling-up/sfc.html). 
* All JavaScript files and TypeScript files with the `.tsx` extension can contain JSX (React).

#### Does P42 support Flow type annotations?
No. P42 supports plain JavaScript, JSX and TypeScript.

#### Does the P42 JS Assistant for VS Code analyze my code in the cloud?
The JS Assistant for VS Code only analyzes your code in the cloud when you use the Cloud AI feature. All default actions in the JS Assistant for Visual Studio Code are performed locally. The Cloud AI feature needs to be activated in the settings, and each Cloud AI action has an indicator so you know when parts of your code would be send to the P42 AI server.

#### How can I disable a refactoring / suggestions?
You can disable them by adding a section in the `p42.config.toml` configuration file or by disabling them in the Visual Studio Code settings. Learn more in the [configuration section](/documentation/p42-for-vscode/configuration).

#### How can I report bugs or feature suggestions?
Please use the [P42 JS Assistant issue tracker](https://github.com/p42ai/refactor-vscode/issues).

#### What known problems and workarounds exist?
* On [vscode.dev](https://vscode.dev/), the P42 License Panel is not available. As a workaround, you can enter your P42 Pro License key by triggering a mass refactoring in the context menu.
* On [vscode.dev](https://vscode.dev/), changes to `p42.toml` are not immediately reflected in your editor. You need to refresh the browser tab.

Side Bar

Actions Panel

Suggestion Panel

Apply All Safe Suggestions

Quick Navigation