Convert extension to ESM and improve Prettier module loading

This PR converts the extension from CommonJS to ESM modules and improves
how Prettier is loaded and resolved.

Key changes:

**ESM Conversion**
- Convert all source files to use ESM imports/exports
- Update esbuild configuration for ESM output
- Add .js extensions to all relative imports
- Update tsconfig for ESM module resolution

**Prettier Module Loading**
- Lazy-load bundled Prettier using dynamic import() for faster activation
- Remove worker thread implementation (PrettierWorkerInstance) - now use
  PrettierDynamicInstance which loads Prettier dynamically
- Improve plugin loading to resolve and import plugins as ES modules
- Add utility functions for finding modules (find-up, resolve-module-entry)

**Extension Activation**
- Make activate() async and await formatter registration
- Ensures formatters are ready when extension.isActive becomes true
- Fixes race condition where tests could run before formatters registered

**Test Infrastructure**
- Add ensureExtensionActivated() helper for reliable test setup
- Extract common format test utilities to formatTestUtils.ts
- Update test imports for ESM compatibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

Author: ntotten

.claude/settings.json

@@ -1,11 +1,14 @@
 {
   "permissions": {
     "allow": [
-      "WebFetch(domain:prettier.io)",
-      "WebFetch(domain:code.visualstudio.com)",
-      "Bash(npm run prettier:*)",
+      "Bash(npm run check-types:*)",
+      "Bash(npm run compile:*)",
       "Bash(npm run lint:*)",
-      "mcp__ide__getDiagnostics"
+      "Bash(npm run prettier:*)",
+      "Bash(npm test:*)",
+      "mcp__ide__getDiagnostics",
+      "WebFetch(domain:code.visualstudio.com)",
+      "WebFetch(domain:prettier.io)"
     ],
     "deny": [],
     "ask": []

.github/instructions/tests.instructions.md

@@ -28,8 +28,6 @@ Tests run inside a VS Code Extension Development Host using Mocha.
 ## Async Patterns
 
 - Tests are async - use `async/await`
-- Use `wait()` helper when needing delays
-- Prettier v3 formatting is async, may need retries for timing
 
 ## Test File Naming
 

.vscode-test.mjs

@@ -1,7 +1,7 @@
 import { defineConfig } from "@vscode/test-cli";
 
 export default defineConfig({
-  files: "out/test/suite/**/*.test.js",
+  files: "out/test/suite/**/*.test.cjs",
   mocha: {
     ui: "bdd",
     timeout: 10000,

.vscode/launch.json

@@ -15,7 +15,7 @@
         "--extensionDevelopmentPath=${workspaceFolder}"
       ],
       "outFiles": ["${workspaceFolder}/dist/**/*.js"],
-      "preLaunchTask": "npm: webpack"
+      "preLaunchTask": "npm: compile"
     },
     {
       "name": "Run Extension (With Other Extensions)",
@@ -24,33 +24,27 @@
       "runtimeExecutable": "${execPath}",
       "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
       "outFiles": ["${workspaceFolder}/dist/**/*.js"],
-      "preLaunchTask": "npm: webpack"
+      "preLaunchTask": "npm: compile"
     },
     {
       "name": "Extension Tests",
       "type": "extensionHost",
       "request": "launch",
-      "runtimeExecutable": "${execPath}",
-      "args": [
-        "${workspaceFolder}/test-fixtures/test.code-workspace",
-        "--disable-extensions",
-        "--extensionDevelopmentPath=${workspaceFolder}",
-        "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
-      ],
-      "outFiles": ["${workspaceFolder}/out/test/**/*.js"],
+      "testConfiguration": "${workspaceFolder}/.vscode-test.mjs",
+      "outFiles": ["${workspaceFolder}/out/test/**/*.cjs"],
       "preLaunchTask": "npm: compile:test"
     },
     {
       "name": "Run Web Extension",
-      "type": "pwa-extensionHost",
+      "type": "extensionHost",
       "debugWebWorkerHost": true,
       "request": "launch",
       "args": [
         "--extensionDevelopmentPath=${workspaceFolder}",
         "--extensionDevelopmentKind=web"
       ],
       "outFiles": ["${workspaceFolder}/dist/**/*.js"],
-      "preLaunchTask": "npm: webpack"
+      "preLaunchTask": "npm: compile"
     }
   ]
 }

.vscode/tasks.json

@@ -49,13 +49,22 @@
       }
     },
     {
-      "label": "compile",
+      "label": "npm: compile",
       "type": "npm",
       "script": "compile",
       "problemMatcher": "$tsc",
       "presentation": {
         "reveal": "silent"
       }
+    },
+    {
+      "label": "npm: compile:test",
+      "type": "npm",
+      "script": "compile:test",
+      "problemMatcher": "$tsc",
+      "presentation": {
+        "reveal": "silent"
+      }
     }
   ]
 }

CONTRIBUTING.md

@@ -90,7 +90,6 @@ Key components:
 
 - `PrettierEditService.ts` - Handles document formatting
 - `ModuleResolver.ts` - Resolves Prettier installations (local, global, or bundled)
-- `PrettierInstance.ts` - Interface for Prettier, with `PrettierMainThreadInstance` and `PrettierWorkerInstance` implementations
 
 ## Submitting Changes
 

README.md

@@ -55,7 +55,7 @@
 </p>
 
 > [!IMPORTANT]
-> **Extension Migration:** This extension is being moved from `esbenp.prettier-vscode` to [`prettier.prettier-vscode`](https://marketplace.visualstudio.com/items?itemName=prettier.prettier-vscode). Version 12+ is only published to the new for now as it is a major change. Once it is stable, we will publish v12 to both extensions and deprecate the `esbenp.prettier-vscode` extension. **Version 12.x is currently not stable, use with caution in production environments.**
+> **Extension Migration:** This extension is being moved from `esbenp.prettier-vscode` to [`prettier.prettier-vscode`](https://marketplace.visualstudio.com/items?itemName=prettier.prettier-vscode). Version 12+ is only published to the new for now as it is a major change. Once it is stable, we will publish v12 to both extensions and deprecate the `esbenp.prettier-vscode` extension. **Version 12.x is currently not stable, use with caution and report bugs.**
 
 ## Installation
 

esbuild.mjs

@@ -46,7 +46,8 @@ const browserAliasPlugin = {
   name: "browser-alias",
   setup(build) {
     // Replace ModuleResolver imports with BrowserModuleResolver for browser build
-    build.onResolve({ filter: /\.\/ModuleResolver$/ }, (args) => {
+    // Match both ./ModuleResolver and ./ModuleResolver.js patterns
+    build.onResolve({ filter: /\.\/ModuleResolver(\.js)?$/ }, (args) => {
       return {
         path: path.join(args.resolveDir, "BrowserModuleResolver.ts"),
       };
@@ -56,18 +57,34 @@ const browserAliasPlugin = {
 
 /**
  * Node extension configuration
+ * Uses ESM format for native ES module support, following the pattern from
+ * https://github.com/microsoft/vscode-github-issue-notebooks
  * @type {import('esbuild').BuildOptions}
  */
 const nodeConfig = {
   entryPoints: ["src/extension.ts"],
   bundle: true,
-  format: "cjs",
+  format: "esm",
   minify: production,
-  sourcemap: !production,
-  sourcesContent: false,
-  platform: "node",
+  sourcemap: true,
+  platform: "neutral",
+  target: ["node22"],
   outfile: "dist/extension.js",
-  external: ["vscode", "prettier"],
+  // Keep vscode external - provided by the VS Code extension host
+  // Keep prettier external - loaded dynamically at runtime
+  // Keep Node.js built-ins external - available in the extension host runtime
+  external: [
+    "vscode",
+    "prettier",
+    "fs",
+    "fs/promises",
+    "path",
+    "os",
+    "url",
+    "util",
+    "module",
+    "child_process",
+  ],
   define: {
     "process.env.EXTENSION_NAME": JSON.stringify(
       `${extensionPackage.publisher}.${extensionPackage.name}`,
@@ -88,19 +105,52 @@ const browserShimsPlugin = {
     build.onResolve({ filter: /^os$/ }, () => {
       return { path: "os", namespace: "browser-shim" };
     });
+    build.onResolve({ filter: /^fs$/ }, () => {
+      return { path: "fs", namespace: "browser-shim" };
+    });
+    build.onResolve({ filter: /^url$/ }, () => {
+      return { path: "url", namespace: "browser-shim" };
+    });
     build.onLoad({ filter: /.*/, namespace: "browser-shim" }, (args) => {
       if (args.path === "os") {
         return {
           contents: `export function homedir() { return ""; }`,
           loader: "js",
         };
       }
+      if (args.path === "fs") {
+        // Provide a minimal fs shim - these functions won't be called in browser
+        // but need to exist to satisfy imports
+        return {
+          contents: `
+            export const promises = {
+              access: async () => { throw new Error("Not available in browser"); },
+              lstat: async () => { throw new Error("Not available in browser"); },
+              readdir: async () => [],
+              readFile: async () => { throw new Error("Not available in browser"); },
+            };
+            export default { promises };
+          `,
+          loader: "js",
+        };
+      }
+      if (args.path === "url") {
+        // Provide a minimal url shim for browser
+        return {
+          contents: `
+            export function pathToFileURL(path) {
+              return new URL("file://" + path);
+            }
+          `,
+          loader: "js",
+        };
+      }
     });
   },
 };
 
 /**
- * Browser/web extension configurationn
+ * Browser/web extension configuration (CJS required for web extension host)
  * @type {import('esbuild').BuildOptions}
  */
 const browserConfig = {
@@ -111,7 +161,8 @@ const browserConfig = {
   sourcemap: !production,
   sourcesContent: false,
   platform: "browser",
-  outfile: "dist/web-extension.js",
+  target: "es2020",
+  outfile: "dist/web-extension.cjs",
   external: ["vscode"],
   define: {
     "process.env.EXTENSION_NAME": JSON.stringify(
@@ -135,8 +186,29 @@ const browserConfig = {
   ],
 };
 
+/**
+ * Desktop test bundle configuration
+ * Uses CJS format with .cjs extension so tests work with "type": "module" in package.json
+ * @type {import('esbuild').BuildOptions}
+ */
+const desktopTestConfig = {
+  entryPoints: ["src/test/suite/*.test.ts"],
+  bundle: true, // Bundle each test file separately
+  format: "cjs",
+  minify: false,
+  sourcemap: true,
+  platform: "node",
+  target: "node20",
+  outdir: "out/test/suite",
+  outExtension: { ".js": ".cjs" },
+  external: ["vscode", "mocha", "prettier"],
+  logLevel: "silent",
+  plugins: [esbuildProblemMatcherPlugin],
+};
+
 /**
  * Web test bundle configuration
+ * Uses CJS format with .cjs extension since package.json has "type": "module"
  * @type {import('esbuild').BuildOptions}
  */
 const webTestConfig = {
@@ -147,7 +219,7 @@ const webTestConfig = {
   sourcemap: true,
   sourcesContent: false,
   platform: "browser",
-  outfile: "dist/web/test/suite/index.js",
+  outfile: "dist/web/test/suite/index.cjs",
   external: ["vscode"],
   define: {
     "process.env.BROWSER_ENV": JSON.stringify("true"),
@@ -160,57 +232,30 @@ const webTestConfig = {
   plugins: [esbuildProblemMatcherPlugin],
 };
 
-function copyWorkerFile() {
-  // Copy to dist (for production/esbuild bundle)
-  const distWorkerDir = "dist/worker";
-  if (!fs.existsSync(distWorkerDir)) {
-    fs.mkdirSync(distWorkerDir, { recursive: true });
-  }
-  fs.copyFileSync(
-    "src/worker/prettier-instance-worker.js",
-    "dist/worker/prettier-instance-worker.js",
-  );
-
-  // Copy to out (for tests/tsc output)
-  const outWorkerDir = "out/worker";
-  if (!fs.existsSync(outWorkerDir)) {
-    fs.mkdirSync(outWorkerDir, { recursive: true });
-  }
-  fs.copyFileSync(
-    "src/worker/prettier-instance-worker.js",
-    "out/worker/prettier-instance-worker.js",
-  );
-}
-
 async function main() {
   const nodeCtx = await esbuild.context(nodeConfig);
   const browserCtx = await esbuild.context(browserConfig);
+  const desktopTestCtx = await esbuild.context(desktopTestConfig);
   const webTestCtx = await esbuild.context(webTestConfig);
 
-  // Copy worker file
-  copyWorkerFile();
-
   if (watch) {
-    // Watch the worker file for changes
-    fs.watchFile("src/worker/prettier-instance-worker.js", () => {
-      console.log("[watch] copying worker file");
-      copyWorkerFile();
-    });
-
     await Promise.all([
       nodeCtx.watch(),
       browserCtx.watch(),
+      desktopTestCtx.watch(),
       webTestCtx.watch(),
     ]);
   } else {
     await Promise.all([
       nodeCtx.rebuild(),
       browserCtx.rebuild(),
+      desktopTestCtx.rebuild(),
       webTestCtx.rebuild(),
     ]);
     await Promise.all([
       nodeCtx.dispose(),
       browserCtx.dispose(),
+      desktopTestCtx.dispose(),
       webTestCtx.dispose(),
     ]);
   }

eslint.config.mjs

@@ -20,9 +20,10 @@ export default tseslint.config(
   // Base ESLint recommended rules
   eslint.configs.recommended,
 
-  // TypeScript files
+  // TypeScript source files (excluding tests)
   {
     files: ["src/**/*.ts"],
+    ignores: ["src/test/**/*.ts"],
     extends: [...tseslint.configs.recommendedTypeChecked],
     languageOptions: {
       parserOptions: {
@@ -57,11 +58,30 @@ export default tseslint.config(
     },
   },
 
-  // Test files - relax rules for test code
+  // Test files - use separate tsconfig and relax rules
   {
     files: ["src/test/**/*.ts"],
+    extends: [...tseslint.configs.recommendedTypeChecked],
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.test.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
     rules: {
       "@typescript-eslint/no-floating-promises": "off",
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/restrict-template-expressions": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
       "no-console": "off",
     },
   },