microsoft / microsoft/monaco-editor

[Bug] TypeScript string autocomplete works in VS Code but not Monaco

Open
#4,850 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
Monaco Editor Playground Link

Try typing document.addEventListener(" in both VS Code and the Monaco playground, with either JavaScript or TypeScript. In VS Code autocomplete shows a list of allowed event names. In Monaco there is no such suggestion.

This occurs in general with any string parameters - for example if a TypeScript function parameter type is "MyString1" | "MyString2", VS Code will autocomplete suggest those strings, but Monaco does not suggest anything.

Monaco Playground link demonstrating the problem

Monaco Editor Playground Code
// Most minimal repro:
type AllowedStrings = "MyString1" | "MyString2";
function test2(str : AllowedStrings) {}

// Then try typing: test2("
Reproduction Steps

With the most minimal repro code snippet shown previously, try typing:

test2("

Actual (Problematic) Behavior

In Monaco, no autocomplete is shown for the string parameter.

Expected Behavior

In VS Code, autocomplete is shown for the string parameter, suggesting the allowed strings "MyString1" and "MyString2". This is what Monaco should do as well.

Additional Context

Monaco is able to use the type information to correctly validate parameters - for example test2("MyString1") is allowed, and test2("invalid") is correctly marked as an error. So it seems the type information is there and working, it's just not being provided to autocomplete.

This issue makes it significantly harder to write common calls like addEventListener in Monaco outside of VS Code: autocompleting the allowed strings is very useful, and avoids the need for trial-and-error to get the right string.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Monaco Playground reproduction and the minimal TypeScript union-string example, then trace how Monaco handles autocomplete for string parameters compared with VS Code. The work is done when typing test2(" and document.addEventListener(" produces the allowed string suggestions without breaking existing validation.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.