Use formatWithCursor() to preserve cursor position after formatting

Previously, the extension used Prettier's format() API which caused the
cursor to jump to an arbitrary position after formatting. This change
uses Prettier's formatWithCursor() API to preserve the cursor position.

Changes:
- Add formatWithCursor to PrettierInstance and PrettierModule interfaces
- Implement formatWithCursor in PrettierDynamicInstance
- Add formatWithCursor to ModuleResolverWeb for browser support
- Update PrettierEditService to use formatWithCursor when cursor
  position is available, and schedule cursor repositioning after
  VS Code applies the edit

Fixes #3939

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: ntotten

src/ModuleResolverWeb.ts

@@ -1,4 +1,6 @@
 import {
+  PrettierCursorOptions,
+  PrettierCursorResult,
   PrettierFileInfoOptions,
   PrettierFileInfoResult,
   PrettierSupportLanguage,
@@ -70,6 +72,15 @@ export class ModuleResolver implements ModuleResolverInterface {
       format: async (source: string, options: PrettierOptions) => {
         return prettierStandalone.format(source, { ...options, plugins });
       },
+      formatWithCursor: async (
+        source: string,
+        options: PrettierCursorOptions,
+      ): Promise<PrettierCursorResult> => {
+        return prettierStandalone.formatWithCursor(source, {
+          ...options,
+          plugins,
+        });
+      },
       resolveConfigFile: async (): Promise<string | null> => {
         // Config file resolution not supported in browser
         return null;

src/PrettierDynamicInstance.ts

@@ -1,6 +1,12 @@
 import * as path from "path";
 import { pathToFileURL } from "url";
-import type { FileInfoOptions, Options, ResolveConfigOptions } from "prettier";
+import type {
+  CursorOptions,
+  CursorResult,
+  FileInfoOptions,
+  Options,
+  ResolveConfigOptions,
+} from "prettier";
 import type {
   PrettierFileInfoResult,
   PrettierPlugin,
@@ -62,6 +68,16 @@ export const PrettierDynamicInstance: PrettierInstanceConstructor = class Pretti
     return this.prettierModule!.format(source, options);
   }
 
+  public async formatWithCursor(
+    source: string,
+    options: CursorOptions,
+  ): Promise<CursorResult> {
+    if (!this.prettierModule) {
+      await this.import();
+    }
+    return this.prettierModule!.formatWithCursor(source, options);
+  }
+
   public async getFileInfo(
     filePath: string,
     fileInfoOptions?: FileInfoOptions | undefined,

src/PrettierEditService.ts

@@ -5,6 +5,7 @@ import {
   DocumentFilter,
   languages,
   Range,
+  Selection,
   TextDocument,
   TextEdit,
   TextEditor,
@@ -22,6 +23,8 @@ import {
   ExtensionFormattingOptions,
   ModuleResolverInterface,
   PrettierBuiltInParserName,
+  PrettierCursorOptions,
+  PrettierCursorResult,
   PrettierFileInfoResult,
   PrettierInstance,
   PrettierModule,
@@ -104,6 +107,11 @@ interface ISelectors {
   languageSelector: ReadonlyArray<DocumentFilter>;
 }
 
+interface FormatResult {
+  formatted: string;
+  cursorOffset: number;
+}
+
 export default class PrettierEditService implements Disposable {
   private formatterHandler: undefined | Disposable;
   private rangeFormatterHandler: undefined | Disposable;
@@ -448,21 +456,58 @@ export default class PrettierEditService implements Disposable {
     options: ExtensionFormattingOptions,
   ): Promise<TextEdit[]> => {
     const startTime = new Date().getTime();
-    const result = await this.format(document.getText(), document, options);
+
+    // Get cursor offset from active editor if available and not doing range formatting
+    const editor = window.activeTextEditor;
+    const isRangeFormatting =
+      options.rangeStart !== undefined && options.rangeEnd !== undefined;
+    let cursorOffset: number | undefined;
+
+    if (editor && editor.document === document && !isRangeFormatting) {
+      cursorOffset = document.offsetAt(editor.selection.active);
+    }
+
+    const result = await this.format(
+      document.getText(),
+      document,
+      options,
+      cursorOffset,
+    );
     if (!result) {
       // No edits happened, return never so VS Code can try other formatters
       return [];
     }
     const duration = new Date().getTime() - startTime;
     this.loggingService.logInfo(`Formatting completed in ${duration}ms.`);
-    const edit = this.minimalEdit(document, result);
+    const edit = this.minimalEdit(document, result.formatted);
     if (!edit) {
       // Document is already formatted, no changes needed
       this.loggingService.logDebug(
         "Document is already formatted, no changes needed.",
       );
       return [];
     }
+
+    // Schedule cursor repositioning after VS Code applies the edit
+    // We use setImmediate to run after the current event loop completes
+    if (
+      editor &&
+      editor.document === document &&
+      !isRangeFormatting &&
+      result.cursorOffset >= 0
+    ) {
+      setImmediate(() => {
+        // Verify the editor is still active and document hasn't changed
+        if (
+          window.activeTextEditor === editor &&
+          editor.document === document
+        ) {
+          const newPosition = document.positionAt(result.cursorOffset);
+          editor.selection = new Selection(newPosition, newPosition);
+        }
+      });
+    }
+
     return [edit];
   };
 
@@ -505,14 +550,17 @@ export default class PrettierEditService implements Disposable {
   /**
    * Format the given text with user's configuration.
    * @param text Text to format
-   * @param path formatting file's path
-   * @returns {string} formatted text
+   * @param doc TextDocument being formatted
+   * @param options Formatting options
+   * @param cursorOffset Optional cursor offset for cursor preservation
+   * @returns FormatResult with formatted text and new cursor offset, or undefined if formatting failed
    */
   private async format(
     text: string,
     doc: TextDocument,
     options: ExtensionFormattingOptions,
-  ): Promise<string | undefined> {
+    cursorOffset?: number,
+  ): Promise<FormatResult | undefined> {
     const { fileName, uri, languageId } = doc;
 
     this.loggingService.logInfo(`Formatting ${uri}`);
@@ -631,18 +679,44 @@ export default class PrettierEditService implements Disposable {
     this.loggingService.logInfo("Prettier Options:", prettierOptions);
 
     try {
+      // Use formatWithCursor if we have a cursor offset to preserve cursor position
+      if (cursorOffset !== undefined) {
+        const cursorOptions: PrettierCursorOptions = {
+          ...prettierOptions,
+          cursorOffset,
+        };
+
+        // Check if formatWithCursor is available (it should be for all modern Prettier versions)
+        if ("formatWithCursor" in prettierInstance) {
+          const result: PrettierCursorResult =
+            await prettierInstance.formatWithCursor(text, cursorOptions);
+          this.statusBar.update(FormatterStatus.Success);
+          return {
+            formatted: result.formatted,
+            cursorOffset: result.cursorOffset,
+          };
+        }
+      }
+
+      // Fallback to regular format() if no cursor offset or formatWithCursor not available
       const formattedText = await prettierInstance.format(
         text,
         prettierOptions,
       );
       this.statusBar.update(FormatterStatus.Success);
 
-      return formattedText;
+      return {
+        formatted: formattedText,
+        cursorOffset: -1, // Indicate that cursor position is unknown
+      };
     } catch (error) {
       this.loggingService.logError("Error formatting document.", error);
       this.statusBar.update(FormatterStatus.Error);
 
-      return text;
+      return {
+        formatted: text,
+        cursorOffset: cursorOffset ?? -1,
+      };
     }
   }
 

src/types.ts

@@ -8,13 +8,19 @@ export type PrettierBuiltInParserName = prettier.BuiltInParserName;
 export type PrettierResolveConfigOptions = prettier.ResolveConfigOptions;
 export type PrettierOptions = prettier.Options;
 export type PrettierFileInfoOptions = prettier.FileInfoOptions;
+export type PrettierCursorOptions = prettier.CursorOptions;
+export type PrettierCursorResult = prettier.CursorResult;
 
 export type PrettierPlugin = prettier.Plugin<any> | string | URL;
 
 export interface PrettierInstance {
   version: string | null;
   import(): Promise<string>;
   format(source: string, options?: PrettierOptions): Promise<string>;
+  formatWithCursor(
+    source: string,
+    options: PrettierCursorOptions,
+  ): Promise<PrettierCursorResult>;
   getFileInfo(
     filePath: string,
     fileInfoOptions?: PrettierFileInfoOptions,
@@ -41,6 +47,10 @@ export interface PrettierInstanceConstructor {
 export type PrettierModule = {
   version: string;
   format(source: string, options?: PrettierOptions): Promise<string>;
+  formatWithCursor(
+    source: string,
+    options: PrettierCursorOptions,
+  ): Promise<PrettierCursorResult>;
   getSupportInfo(options?: {
     plugins?: Array<string | PrettierPlugin>;
   }): Promise<{ languages: PrettierSupportLanguage[] }>;