Specify tab/indent size in LeetCode Prettier extension

Author: miorel

workspaces/leetcode-prettier-extension/package.json

@@ -31,6 +31,7 @@
     "cross-env": "7.0.3",
     "eslint": "9.12.0",
     "fork-ts-checker-webpack-plugin": "9.0.2",
+    "monaco-editor": "0.52.0",
     "ts-loader": "9.5.1",
     "tsx": "4.19.1",
     "type-fest": "4.26.1",

workspaces/leetcode-prettier-extension/src/isMonaco.ts

@@ -0,0 +1,13 @@
+import type { editor as MonacoEditorNamespace } from "monaco-editor";
+
+type Monaco = { editor: typeof MonacoEditorNamespace };
+
+type RecursiveObj = { [key: string]: RecursiveObj | undefined };
+
+export function isMonaco(obj: unknown): obj is Monaco {
+  return (
+    // The optional chaining should make the cast safe enough.
+    typeof (obj as RecursiveObj | null | undefined)?.editor
+      ?.onDidCreateEditor === "function"
+  );
+}

workspaces/leetcode-prettier-extension/src/main.ts

@@ -2,30 +2,62 @@ import { format } from "prettier/standalone";
 import estreePlugin from "prettier/plugins/estree";
 import tsPlugin from "prettier/plugins/typescript";
 
+import { isMonaco } from "./isMonaco.ts";
+
 function main(): void {
-  // TODO: improve types
-  let monaco: any = undefined;
+  let monaco: unknown;
 
   Object.defineProperty(globalThis, "monaco", {
     get() {
       return monaco;
     },
 
-    set(newMonaco) {
+    set(newMonaco: unknown) {
       monaco = newMonaco;
-      monaco.editor.onDidCreateEditor((ed: any) => {
+      if (!isMonaco(monaco)) {
+        console.error(
+          "The `monaco` property doesn't follow the expected interface!",
+        );
+        return;
+      }
+
+      monaco.editor.onDidCreateEditor((ed) => {
+        ed
+          ?.getModel?.()
+          ?.updateOptions?.({ tabSize: 2, indentSize: "tabSize" });
+
+        if (typeof ed?.getAction !== "function") {
+          // TODO: console.error something interesting
+          return;
+        }
+
         const { getAction } = ed;
+
         ed.getAction = function (this: unknown) {
-          const action = getAction.apply(this, arguments);
-          action.run = function () {
-            format(ed.getValue(), {
-              parser: "typescript",
-              plugins: [estreePlugin, tsPlugin],
-            }).then((text) =>
+          const action = getAction.apply(
+            this,
+            // Slight lie but `.apply` will work with the `arguments` object.
+            arguments as unknown as Parameters<typeof getAction>,
+          );
+          if (!action) {
+            // TODO: console.error something interesting
+            return action;
+          }
+
+          action.run = async function () {
+            try {
+              const formattedText = await format(ed.getValue(), {
+                parser: "typescript",
+                plugins: [estreePlugin, tsPlugin],
+              });
+
               // TODO: switch to https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.ITextModel.html#pushEditOperations.pushEditOperations-1 in the future
-              ed.setValue(text),
-            );
+              ed.setValue(formattedText);
+            } catch (err) {
+              console.error(err);
+            }
           };
+
           return action;
         };
       });