feat: load TS typings for monaco editor

components/CodeEditor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { AutoTypings, LocalStorageCache } from 'monaco-editor-auto-typings'
 import type { MonacoLanguage } from '#imports'
 import type * as Monaco from 'monaco-editor'
 import type { MonacoEditor } from '#build/components'
@@ -20,13 +21,20 @@ const options = computed<Monaco.editor.IStandaloneEditorConstructionOptions>(
 )
 
 if (props.input) {
-  watchEffect(() => {
-    const editor = toRaw(container.value?.$editor)
-    if (!editor) return
-    editor.onDidChangeCursorPosition((e) => {
-      editorCursor.value = editor.getModel()!.getOffsetAt(e.position)
-    })
-  })
+  watch(
+    () => container.value?.$editor,
+    (editor) => {
+      if (!editor) return
+
+      editor.onDidChangeCursorPosition((e) => {
+        editorCursor.value = editor.getModel()!.getOffsetAt(e.position)
+      })
+      AutoTypings.create(editor, {
+        sourceCache: new LocalStorageCache(),
+      })
+    },
+    { immediate: true },
+  )
 
   let decorationsCollection:
     | Monaco.editor.IEditorDecorationsCollection

nuxt.config.ts

@@ -8,6 +8,11 @@ export default defineNuxtConfig({
     esbuild: {
       legalComments: 'external',
     },
+    resolve: {
+      alias: {
+        path: 'pathe',
+      },
+    },
   },
   devtools: {
     enabled: true,

package.json

@@ -21,7 +21,8 @@
     "fflate": "^0.8.2",
     "json-to-ast": "^2.1.0",
     "json5": "^2.2.3",
-    "monaco-editor": "^0.49.0"
+    "monaco-editor": "^0.49.0",
+    "monaco-editor-auto-typings": "^0.4.5"
   },
   "devDependencies": {
     "@babel/parser": "^7.24.6",