P42 adds a suggestion sidebar panel to Visual Studio Code.
The suggestion sidebar shows recommended refactorings for the currently active editor.
You can expand suggestions by clicking on them.
The expanded suggestion can be applied from the sidebar.

![Suggestion Sidebar](/image/documentation/p42-for-vscode/suggestion-sidebar/feature-suggestion-sidebar.gif)

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

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

Apply All Safe Suggestions

Suggestion Sidebar

<div align="center" style="margin-bottom: 20px;">
  <p align="center">
    <img src="/image/vscode/vscode-intro.gif"
         alt="P42 JavaScript Assistant in Action" />
    <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 **[P42 JavaScript Assistant](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)** adds **[automated refactorings and quick fixes](/documentation/code-action/) 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, P42 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

## Quick Fix Context Menu
When P42 refactorings or actions are available, you will see a lightbulb in your editor. Clicking it will open the quick fix context menu. Alternatively, you can use a keyboard shortcut (see below).

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

## 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.

> 💡&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)

## Keyboard Shortcuts
Keyboard shortcuts are a fast way to select and execute refactorings.

> 💡&nbsp;&nbsp;You can re-configure the keyboard shortcuts in the Visual Studio Code preferences.

#### **Quick Fix** context menu
The Quick Fix context menu contains the most relevant refactorings for the current cursor position or text selection.

- Mac: <kbd>CMD</kbd> + <kbd>.</kbd> (default Visual Studio Code shortcut)
- Windows <kbd>CTRL</kbd> + <kbd>.</kbd> (default Visual Studio Code shortcut)

#### **Refactor** context menu
The Refactor context menu contains all available refactorings for the current cursor position or text selection.
- Mac: <kbd>CMD</kbd> + <kbd>SHIFT</kbd> + <kbd>R</kdb>
- Windows / Linux: <kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <kbd>R</kbd>

#### **Inline** context menu
- Mac: <kbd>CMD</kbd> + <kbd>SHIFT</kbd> + <kbd>I</kbd>
- Windows / Linux: <kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <kbd>I</kbd>

#### **Extract** context menu
  - Mac: <kbd>CMD</kbd> + <kbd>SHIFT</kbd> + <kbd>X</kbd>
  - Windows / Linux: <kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <kbd>X</kbd>

#### **Convert** context menu
  - Mac: <kbd>CMD</kbd> + <kbd>SHIFT</kbd> + <kbd>V</kbd>
  - Windows / Linux: <kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <kbd>V</kbd>

#### **Action** context menu
  - Mac: <kbd>CMD</kbd> + <kbd>SHIFT</kbd> + <kbd>A</kbd>
  - Windows / Linux: <kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <kbd>A</kbd>

Quick Fix Context Menu

Refactoring Suggestions

Keyboard Shortcuts

Editor Integration

Mass refactoring ([P42 Pro feature](/plans/p42-pro)) 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 P42 Safety Analysis checks if refactorings can change the code's behavior (within [limitations](#limitations)). The P42 context and quick-fix menu items often contain safety indicators:

* **No indicator**: P42 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-action/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.

## 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 P42 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, P42 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**. P42 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.

## Example
![Example Safety analysis: Array.includes() refactoring](/image/documentation/p42-for-vscode/safety-analysis/safety-analysis-example.gif)

Limitations

Example

Safety Analysis

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

## Visual Studio Code Settings
Refactorings suggestions can be configured in the Visual Studio Code settings.
For each refactoring, the diagnostics severity (hint, information, warning, error) can be set, and the refactoring suggestion can be turned off.

![Visual Studio Code configuration](/image/documentation/p42-for-vscode/configuration/vscode-config.gif)

When refactorings 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.

## 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 refactorings can be enabled and disabled. By default, all refactorings 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 upgrade to [P42 Pro or Business](/plans/p42-pro) to get a license key. You can try P42 Pro for free for 14-days.

### Getting Your P42 License Key

1. Sign up for [P42 with your GitHub login](/login/github).
1. Click on the chip "P42 Free Plan (upgrade)":

   ![P42 Free Plan chip](/image/documentation/p42-for-vscode/license/upgrade-chip.png)
1. Upgrade your personal account to the P42 Pro plan or any linked organization account to the P42 Business plan.
1. Click on the "Your License" chip on the [Repositories Overview page](/repository).
1. Generate a license key.
1. Select the license key text (gray background) and copy it to your clipboard.

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

1. Open the P42 Programming Assistant sidebar
2. Open the "License" section
3. Click "Enter License Key"
4. Paste the license key from your clipboard and press enter.
5. Verify that the "License" section says "You are using P42 Pro".

   > 💡&nbsp;&nbsp;You can collapse the license panel by clicking its title once you are done.

License

#### Does P42 support Vue single file components (SFC)?
Yes. Support for [Vue.js Single File Components](https://vuejs.org/guide/scaling-up/sfc.html) is included in [P42 Pro](/plans/p42-pro).

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

#### Does P42 analyze my code in the P42 cloud?
No. When you use the P42 JavaScript Assistant for VS Code, your source code remains on your machine and all P42 code analysis happens on your machine. No code or other data is transferred to the P42 cloud service by the P42 JavaScript Assistant.

#### 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. See [Configuration](/documentation/p42-for-vscode/configuration).

#### How can I report bugs or feature suggestions?
Please use the **[P42 JavaScript 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.

Suggestion Sidebar

Apply All Safe Suggestions

Quick Navigation