{"id":18320577,"url":"https://github.com/lukasbach/monaco-editor-auto-typings","last_synced_at":"2025-05-15T13:08:42.177Z","repository":{"id":37598888,"uuid":"326502399","full_name":"lukasbach/monaco-editor-auto-typings","owner":"lukasbach","description":"Automatically load declaration files while typing in monaco editor instances","archived":false,"fork":false,"pushed_at":"2024-11-25T18:32:33.000Z","size":5985,"stargazers_count":195,"open_issues_count":19,"forks_count":43,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-09T11:08:56.889Z","etag":null,"topics":["declaration","hacktoberfest","ide","monaco-editor","types","typescript","typescript-definitions"],"latest_commit_sha":null,"homepage":"https://lukasbach.github.io/monaco-editor-auto-typings/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukasbach.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"lukasbach"}},"created_at":"2021-01-03T21:17:21.000Z","updated_at":"2025-05-06T17:13:19.000Z","dependencies_parsed_at":"2024-12-27T23:33:33.361Z","dependency_job_id":null,"html_url":"https://github.com/lukasbach/monaco-editor-auto-typings","commit_stats":{"total_commits":100,"total_committers":10,"mean_commits":10.0,"dds":"0.18000000000000005","last_synced_commit":"4787b40cd4dda2a0b49a125f08470d90206c4457"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fmonaco-editor-auto-typings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fmonaco-editor-auto-typings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fmonaco-editor-auto-typings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasbach%2Fmonaco-editor-auto-typings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukasbach","download_url":"https://codeload.github.com/lukasbach/monaco-editor-auto-typings/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346624,"owners_count":22055808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["declaration","hacktoberfest","ide","monaco-editor","types","typescript","typescript-definitions"],"created_at":"2024-11-05T18:16:44.739Z","updated_at":"2025-05-15T13:08:37.168Z","avatar_url":"https://github.com/lukasbach.png","language":"TypeScript","funding_links":["https://github.com/sponsors/lukasbach"],"categories":[],"sub_categories":[],"readme":"# monaco-editor-auto-typings\n\n![Main](https://github.com/lukasbach/monaco-editor-auto-typings/workflows/Main/badge.svg)\n\n\u003e View the demo at [lukasbach.github.io/monaco-editor-auto-typings](https://lukasbach.github.io/monaco-editor-auto-typings/)\n\nmonaco-editor-auto-typings is a plugin for [Microsoft's Monaco Editor](https://microsoft.github.io/monaco-editor/),\nwhich automatically loads type declarations when you enter import-calls in the code editor.\n\nTry it out in the [demo](https://lukasbach.github.io/monaco-editor-auto-typings/)! Add some imports to some\nlibraries available on npm, such as `import express from 'express';`, and see that any imported variables\nare automatically strictly typed.\n\nmonaco-editor-auto-typings comes with lots of customization options, but is still a one-liner to\nadd to your project. It works by loading declarations from UnPkg. They can then be optionally\ncached in localStorage or elsewhere.\n\n- Demo: [lukasbach.github.io/monaco-editor-auto-typings](https://lukasbach.github.io/monaco-editor-auto-typings/)\n- Documentation: [lukasbach.github.io/monaco-editor-auto-typings/docs](https://lukasbach.github.io/monaco-editor-auto-typings/docs/)\n\n![Example image](https://raw.githubusercontent.com/lukasbach/monaco-editor-auto-typings/HEAD/screenshot.png)\n\n## Example\n\nInstall via `yarn add monaco-editor-auto-typings monaco-editor` or `npm install monaco-editor-auto-typings monaco-editor --save`.\n\n```typescript\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\nimport { AutoTypings, LocalStorageCache } from 'monaco-editor-auto-typings';\n\nconst val = `\nimport React from 'react';\nReact.useEffect(0); // Type Error!\n`;\n\n// Create monaco editor instance\nconst editor = monaco.editor.create(document.getElementById('root')!, {\n  model: monaco.editor.createModel(val, 'typescript'),\n});\n\n// Initialize auto typing on monaco editor. Imports will now automatically be typed!\nconst autoTypings = await AutoTypings.create(editor, {\n  sourceCache: new LocalStorageCache(), // Cache loaded sources in localStorage. May be omitted\n  // Other options...\n});\n```\n\n## Custom Monaco Version\n\nBy default, monaco-editor-auto-typings directly imports the monaco editor library itself. You can\ncustomize the monaco object with the `monaco` option. If you want to skip the entire import\nof monaco when bringing your own instance of monaco, you can import from `monaco-editor-auto-typings/custom-editor`\ninstead of `monaco-editor-auto-typings`.\n\n## Configuration\n\nhttps://lukasbach.github.io/monaco-editor-auto-typings/docs/interfaces/Options.html\n\n```typescript\nexport interface Options {\n  /**\n   * Share source cache between multiple editor instances by storing\n   * the cache in a static property.\n   *\n   * Defaults to false.\n   */\n  shareCache: boolean;\n\n  /**\n   * Only use packages specified in the `versions` property.\n   *\n   * Defaults to false.\n   */\n  onlySpecifiedPackages: boolean;\n\n  /**\n   * Load typings from prespecified versions when initializing. Versions\n   * need to be specified in the ``versions`` option.\n   *\n   * Defaults to false.\n   */\n  preloadPackages: boolean;\n\n  /**\n   * Updates compiler options to defaults suitable for auto-loaded\n   * declarations, specifically by setting ``moduleResolution`` to\n   * ``NodeJs`` and ``allowSyntheticDefaultImports`` to true.\n   * Other options are not changed. Set this property to true to\n   * disable this behaviour.\n   *\n   * Defaults to false.\n   */\n  dontAdaptEditorOptions: boolean;\n\n  /**\n   * After typings were resolved and injected into monaco, auto-typings\n   * updates the value of the current model to trigger a refresh in\n   * monaco's typing logic, so that it uses the injected typings.\n   */\n  dontRefreshModelValueAfterResolvement: boolean;\n\n  /**\n   * Prespecified package versions. If a package is loaded whose\n   * name is specified in this object, it will load with the exact\n   * version specified in the object.\n   *\n   * Setting the option ``onlySpecifiedPackages`` to true makes this\n   * property act as a whitelist for packages.\n   *\n   * Setting the option ``preloadPackages`` makes the packages specified\n   * in this property load directly after initializing the auto-loader.\n   */\n  versions?: { [packageName: string]: string };\n\n  /**\n   * If a new package was loaded, its name and version is added to the\n   * version object, and this method is called with the updated object.\n   * @param versions updated versions object.\n   */\n  onUpdateVersions?: (versions: { [packageName: string]: string }) =\u003e void;\n\n  /**\n   * Supply a cache where declaration files and package.json files are\n   * cached to. Supply an instance of {@link LocalStorageCache} to cache\n   * files to localStorage.\n   */\n  sourceCache: SourceCache;\n\n  /**\n   * Supply a custom resolver logic for declaration and package.json files.\n   * Defaults to {@link JsDelivrSourceResolver}. Not recommended to change.\n   */\n  sourceResolver: SourceResolver;\n\n  /**\n   * The root directory where your edited files are. Must end with\n   * a slash. The default is suitable unless you change the default\n   * URI of files loaded in the editor.\n   *\n   * Defaults to \"inmemory://model/\"\n   */\n  fileRootPath: string;\n\n  /**\n   * Debounces code reanalyzing after user has changed the editor contents\n   * by the specified amount. Set to zero to disable. Value provided in\n   * milliseconds.\n   *\n   * Defaults to 4000, i.e. 4 seconds.\n   */\n  debounceDuration: number;\n\n  /**\n   * Maximum recursion depth for recursing packages. Determines how many\n   * nested package declarations are loaded. For example, if ``packageRecursionDepth``\n   * has the value 2, the code in the monaco editor references packages ``A1``, ``A2``\n   * and ``A3``, package ``A1`` references package ``B1`` and ``B1`` references ``C1``,\n   * then packages ``A1``, ``A2``, ``A3`` and ``B1`` are loaded. Set to zero to\n   * disable.\n   *\n   * Defaults to 3.\n   */\n  packageRecursionDepth: number;\n\n  /**\n   * Maximum recursion depth for recursing files. Determines how many\n   * nested file declarations are loaded. The same as ``packageRecursionDepth``,\n   * but for individual files. Set to zero to disable.\n   *\n   * Defaults to 10.\n   */\n  fileRecursionDepth: number;\n\n  /**\n   * Called after progress updates like loaded declarations or events.\n   * @param update detailed event object containing update infos.\n   * @param textual a textual representation of the update for debugging.\n   */\n  onUpdate?: (update: ProgressUpdate, textual: string) =\u003e void;\n\n  /**\n   * Called if errors occur.\n   * @param error a textual representation of the error.\n   */\n  onError?: (error: string) =\u003e void;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasbach%2Fmonaco-editor-auto-typings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukasbach%2Fmonaco-editor-auto-typings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasbach%2Fmonaco-editor-auto-typings/lists"}