Add code action provider for formatting with Prettier (#3863)

* Initial plan

* Initial exploration and planning

Co-authored-by: ntotten <[email protected]>

* Add code action provider for formatting with Prettier

Co-authored-by: ntotten <[email protected]>

* Add documentation for code actions on save

Co-authored-by: ntotten <[email protected]>

* Add test for Prettier code action provider

Co-authored-by: ntotten <[email protected]>

* Fix code action test to use in-memory documents

Co-authored-by: ntotten <[email protected]>

* Address code review feedback: extract shared test constants

Co-authored-by: ntotten <[email protected]>

* Update CHANGELOG with code action feature

Co-authored-by: ntotten <[email protected]>

* Fix Windows test failure by normalizing line endings

Co-authored-by: ntotten <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: ntotten <[email protected]>
Co-authored-by: Nathan Totten <[email protected]>

Author: Copilot

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to the "prettier-vscode" extension will be documented in thi
 - Fixed parser detection fallback when using plugins with Prettier v3
 - Added new Prettier v3 options: `objectWrap`, `experimentalOperatorPosition`
 - Added support for TypeScript config files (`.prettierrc.ts`, `.prettierrc.cts`, `.prettierrc.mts`, `prettier.config.ts`, etc.) introduced in Prettier 3.5.0 - Thanks to [@dr2009](https://github.com/dr2009)
+- Added `source.fixAll.prettier` code action for use with `editor.codeActionsOnSave` to run Prettier before other formatters like ESLint (#1277)
 - Fixed issue where unnecessary TextEdits were applied when document was already formatted, which could cause spurious changes or cursor positioning issues (#3232)
 
 ## [11.0.0]

README.md

@@ -211,6 +211,31 @@ If you would like to format a document that is configured to be ignored by Prett
 
 The recommended way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site. You can then use each of the linting extensions as you normally would. For details refer to the [Prettier documentation](https://prettier.io/docs/en/integrating-with-linters.html).
 
+### Using Code Actions on Save
+
+You can use VS Code's `editor.codeActionsOnSave` to run Prettier before other formatters like ESLint. This is useful when you want to format with Prettier first and then apply ESLint fixes.
+
+```jsonc
+// .vscode/settings.json
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.prettier": "explicit",
+  },
+}
+```
+
+You can also combine Prettier with ESLint:
+
+```jsonc
+// .vscode/settings.json
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.prettier": "explicit",
+    "source.fixAll.eslint": "explicit",
+  },
+}
+```
+
 ## Workspace Trust
 
 This extension utilizes VS Code [Workspace Trust](https://code.visualstudio.com/docs/editor/workspace-trust) features. When this extension is run on an untrusted workspace, it will only use the built in version of prettier. No plugins, local, or global modules will be supported. Additionally, certain settings are also restricted - see each setting for details.

src/PrettierCodeActionProvider.ts

@@ -0,0 +1,57 @@
+import {
+  CancellationToken,
+  CodeAction,
+  CodeActionContext,
+  CodeActionKind,
+  CodeActionProvider,
+  Range,
+  TextDocument,
+  TextEdit,
+  WorkspaceEdit,
+} from "vscode";
+import { ExtensionFormattingOptions } from "./types.js";
+
+/**
+ * Provides code actions for formatting with Prettier.
+ * This enables using Prettier with codeActionsOnSave.
+ */
+export class PrettierCodeActionProvider implements CodeActionProvider {
+  public static readonly providedCodeActionKinds = [
+    CodeActionKind.SourceFixAll.append("prettier"),
+  ];
+
+  constructor(
+    private provideEdits: (
+      document: TextDocument,
+      options: ExtensionFormattingOptions,
+    ) => Promise<TextEdit[]>,
+  ) {}
+
+  public async provideCodeActions(
+    document: TextDocument,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    range: Range,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    context: CodeActionContext,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    token: CancellationToken,
+  ): Promise<CodeAction[]> {
+    const edits = await this.provideEdits(document, {
+      force: false,
+    });
+
+    if (edits.length === 0) {
+      return [];
+    }
+
+    const action = new CodeAction(
+      "Format with Prettier",
+      CodeActionKind.SourceFixAll.append("prettier"),
+    );
+    const workspaceEdit = new WorkspaceEdit();
+    workspaceEdit.set(document.uri, edits);
+    action.edit = workspaceEdit;
+
+    return [action];
+  }
+}

src/PrettierEditService.ts

@@ -16,6 +16,7 @@ import { getParserFromLanguageId } from "./utils/get-parser-from-language.js";
 import { LoggingService } from "./LoggingService.js";
 import { RESTART_TO_ENABLE } from "./message.js";
 import { PrettierEditProvider } from "./PrettierEditProvider.js";
+import { PrettierCodeActionProvider } from "./PrettierCodeActionProvider.js";
 import { FormatterStatus, StatusBar } from "./StatusBar.js";
 import {
   ExtensionFormattingOptions,
@@ -132,6 +133,7 @@ const PRETTIER_CONFIG_FILES = [
 export default class PrettierEditService implements Disposable {
   private formatterHandler: undefined | Disposable;
   private rangeFormatterHandler: undefined | Disposable;
+  private codeActionHandler: undefined | Disposable;
   private registeredWorkspaces = new Set<string>();
 
   private allLanguages: string[] = [];
@@ -207,7 +209,9 @@ export default class PrettierEditService implements Disposable {
         return;
       }
       if (edits.length > 1) {
-        this.loggingService.logWarning(`Unexpected multiple edits (${edits.length}), expected 0 or 1`);
+        this.loggingService.logWarning(
+          `Unexpected multiple edits (${edits.length}), expected 0 or 1`,
+        );
         return;
       }
 
@@ -316,8 +320,10 @@ export default class PrettierEditService implements Disposable {
     this.moduleResolver.dispose();
     this.formatterHandler?.dispose();
     this.rangeFormatterHandler?.dispose();
+    this.codeActionHandler?.dispose();
     this.formatterHandler = undefined;
     this.rangeFormatterHandler = undefined;
+    this.codeActionHandler = undefined;
   };
 
   private registerDocumentFormatEditorProviders({
@@ -326,6 +332,9 @@ export default class PrettierEditService implements Disposable {
   }: ISelectors) {
     this.dispose();
     const editProvider = new PrettierEditProvider(this.provideEdits);
+    const codeActionProvider = new PrettierCodeActionProvider(
+      this.provideEdits,
+    );
     this.rangeFormatterHandler =
       languages.registerDocumentRangeFormattingEditProvider(
         rangeLanguageSelector,
@@ -335,6 +344,14 @@ export default class PrettierEditService implements Disposable {
       languageSelector,
       editProvider,
     );
+    this.codeActionHandler = languages.registerCodeActionsProvider(
+      languageSelector,
+      codeActionProvider,
+      {
+        providedCodeActionKinds:
+          PrettierCodeActionProvider.providedCodeActionKinds,
+      },
+    );
   }
 
   /**
@@ -453,20 +470,25 @@ export default class PrettierEditService implements Disposable {
     const edit = this.minimalEdit(document, result);
     if (!edit) {
       // Document is already formatted, no changes needed
-      this.loggingService.logDebug("Document is already formatted, no changes needed.");
+      this.loggingService.logDebug(
+        "Document is already formatted, no changes needed.",
+      );
       return [];
     }
     return [edit];
   };
 
-  private minimalEdit(document: TextDocument, string1: string): TextEdit | null {
+  private minimalEdit(
+    document: TextDocument,
+    string1: string,
+  ): TextEdit | null {
     const string0 = document.getText();
-    
+
     // Quick check: if strings are identical, no edit needed
     if (string0 === string1) {
       return null;
     }
-    
+
     // length of common prefix
     let i = 0;
     while (

src/test/suite/codeAction.test.ts

@@ -0,0 +1,82 @@
+import * as assert from "assert";
+import * as vscode from "vscode";
+import { ensureExtensionActivated } from "./testUtils.js";
+
+describe("Test Prettier Code Actions", () => {
+  const unformattedCode = `const  x   =  {  a: 1, b: 2  }`;
+
+  before(async () => {
+    await ensureExtensionActivated();
+  });
+
+  it("provides source.fixAll.prettier code action", async () => {
+    const doc = await vscode.workspace.openTextDocument({
+      content: unformattedCode,
+      language: "javascript",
+    });
+    await vscode.window.showTextDocument(doc);
+
+    // Get code actions for the document
+    const codeActions = await vscode.commands.executeCommand<
+      vscode.CodeAction[]
+    >(
+      "vscode.executeCodeActionProvider",
+      doc.uri,
+      new vscode.Range(0, 0, doc.lineCount, 0),
+    );
+
+    // Find the Prettier code action
+    const prettierAction = codeActions?.find(
+      (action) => action.kind?.value === "source.fixAll.prettier",
+    );
+
+    assert.ok(prettierAction, "Prettier code action should be available");
+    assert.equal(
+      prettierAction?.title,
+      "Format with Prettier",
+      "Code action should have correct title",
+    );
+  });
+
+  it("formats document using code action", async () => {
+    const doc = await vscode.workspace.openTextDocument({
+      content: unformattedCode,
+      language: "javascript",
+    });
+    await vscode.window.showTextDocument(doc);
+
+    // Get code actions for the document
+    const codeActions = await vscode.commands.executeCommand<
+      vscode.CodeAction[]
+    >(
+      "vscode.executeCodeActionProvider",
+      doc.uri,
+      new vscode.Range(0, 0, doc.lineCount, 0),
+    );
+
+    // Find and apply the Prettier code action
+    const prettierAction = codeActions?.find(
+      (action) => action.kind?.value === "source.fixAll.prettier",
+    );
+
+    assert.ok(prettierAction, "Prettier code action should be available");
+
+    // Apply the code action
+    if (prettierAction?.edit) {
+      await vscode.workspace.applyEdit(prettierAction.edit);
+    }
+
+    const formattedText = doc.getText();
+
+    // Verify the document was formatted correctly
+    // Normalize line endings for cross-platform compatibility
+    const normalizedFormatted = formattedText.replace(/\r\n/g, "\n");
+    const expectedNormalized = `const x = { a: 1, b: 2 };\n`;
+
+    assert.equal(
+      normalizedFormatted,
+      expectedNormalized,
+      "Document should be formatted correctly after applying code action",
+    );
+  });
+});

src/test/suite/format.test.ts

@@ -56,28 +56,47 @@ describe("Test format Document", () => {
   it("formats Markdown without adding extra empty lines", async () => {
     // This test checks for the issue where formatting MD files multiple times
     // would add empty lines at the end (up to 2 empty lines)
-    const { actual: firstFormat } = await format("project", "formatTest/ugly.md");
-    
+    const { actual: firstFormat } = await format(
+      "project",
+      "formatTest/ugly.md",
+    );
+
     // Count trailing newlines
     const countTrailingNewlines = (str: string) => {
       let count = 0;
       for (let i = str.length - 1; i >= 0; i--) {
-        if (str[i] === '\n') count++;
-        else if (str[i] === '\r') continue; // Skip \r in CRLF
+        if (str[i] === "\n") count++;
+        else if (str[i] === "\r")
+          continue; // Skip \r in CRLF
         else break;
       }
       return count;
     };
-    
+
     const firstCount = countTrailingNewlines(firstFormat);
-    
+
     // Format a second time via the extension to verify idempotency
-    const { actual: secondFormat } = await format("project", "formatTest/ugly.md");
+    const { actual: secondFormat } = await format(
+      "project",
+      "formatTest/ugly.md",
+    );
     const secondCount = countTrailingNewlines(secondFormat);
-    
+
     // Should have exactly 1 trailing newline after both formats
-    assert.equal(firstCount, 1, "First format should have exactly 1 trailing newline");
-    assert.equal(secondCount, 1, "Second format should have exactly 1 trailing newline");
-    assert.equal(firstFormat, secondFormat, "Formatting via extension should be idempotent");
+    assert.equal(
+      firstCount,
+      1,
+      "First format should have exactly 1 trailing newline",
+    );
+    assert.equal(
+      secondCount,
+      1,
+      "Second format should have exactly 1 trailing newline",
+    );
+    assert.equal(
+      firstFormat,
+      secondFormat,
+      "Formatting via extension should be idempotent",
+    );
   });
 });