Custom Prettier Width

Format a selected range with Prettier using a printWidth chosen for that operation, without changing the project's Prettier configuration.

What it does

The extension resolves Prettier from the current workspace first, then uses the bundled Prettier dependency as a fallback. It loads the project's normal configuration (including parser, plugins, and style options) and overrides only printWidth. Formatting is performed locally; no code or telemetry is sent anywhere.

Usage

1. Select code in a supported file.
2. Press Ctrl+Alt+P (Windows/Linux) or Cmd+Alt+P (macOS).
3. Enter a width such as 80.
4. The selection is formatted.

The accepted range is 20–500. The last entered value is remembered by default. The edit is applied through the VS Code editor API, so it supports undo/redo and keeps the document's normal dirty-state behavior.

Keyboard shortcuts

• Windows/Linux: Ctrl+Alt+P
• macOS: Cmd+Alt+P

The shortcut is active only when an editor has focus and a non-empty selection exists.

Command Palette

Run Prettier: Format Selection with Custom Print Width.

Configuration

• customPrettierWidth.defaultPrintWidth — number from 20 to 500, default 80.
• customPrettierWidth.rememberLastValue — default true; when false, the input always starts with defaultPrintWidth.

Requirements

Prettier must be installed locally in the workspace (recommended):

npm install --save-dev prettier

If no workspace installation is available, the extension uses its bundled Prettier fallback. Project configuration files such as .prettierrc, prettier.config.js, and prettier.config.mjs are read but never modified. Workspace-local plugins are therefore resolved in the same installation as the project's Prettier.

Supported examples include JavaScript, TypeScript, JSX, TSX, JSON, JSONC, CSS, SCSS, Less, HTML, Markdown, and YAML, subject to the installed Prettier version and plugins.

Important behavior

Prettier's range formatting is syntax-aware. It may expand the selected range to an enclosing syntactic structure to produce valid output; the extension does not promise that only the literal selected characters will change. Only the resulting changed text span is sent to VS Code as one edit, and a parsing or formatting error leaves the document unchanged.

Example: JavaScript/TypeScript

Input:

return next.handle().pipe(catchError(err => throwError(() => new BadGatewayException())));

With printWidth = 80, Prettier can produce:

return next
  .handle()
  .pipe(
    catchError(err => throwError(() => new BadGatewayException())),
  );

Example: JSON

A selected long object is wrapped according to the chosen width while the project's quote, indentation, and trailing-comma settings remain in effect.

Development and publishing

Install dependencies:

npm install

Compile:

npm run compile

Test:

npm test

Create the VSIX:

npm run package

Install the local VSIX:

code --install-extension custom-prettier-width-1.0.0.vsix

The repository metadata is configured for NopSpleen0x90/custom-prettier-width. Provide a 128×128 or larger PNG at media/icon.png. The repository includes media/icon.svg as an editable source; export it to media/icon.png before packaging.

Authenticate and publish without placing credentials in the project:

npx @vscode/vsce login <publisher>
npx @vscode/vsce publish