question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to show quick suggestions in yaml strings

See original GitHub issue

monaco-editor version: 0.21.2 Browser: chrome OS: macos big sur Playground code that reproduces the issue: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example

change lang json to yaml ,code suggest will not working

maybe some configuration wrong,like worker etc. ,could show some example.

#2077 #1768

this is my worker configuration

 getWorkerUrl: function (moduleId, label) {
            if (label === "json") {
                return "./worker-json.js";
            }
            if (label === "css") {
                return "./worker-css.js";
            }
            if (label === 'html') {
                return './worker-html.js';
            }
            if (label === 'typescript' || label === 'javascript') {
                return './worker-javascript.js';
            }
           
            return "./worker-editor.js";
        },

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
aeschlicommented, Jan 27, 2021

@alexdima Debugging the example above I see that with json it’s a ‘other’ token, while in yaml a string token. The editor doesn’t show quick suggestions when in a string token.

2reactions
alexdimacommented, Jan 27, 2021

Thanks for figuring this out @aeschli . I think the solution is to configure the editor with quickSuggestions: { other: true, strings: true }.

So this works for me:

function createDependencyProposals(range) {
    // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
    // here you could do a server side lookup
    return [
        {
            label: '"lodash"',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "The Lodash library exported as Node.js modules.",
            insertText: '"lodash": "*"',
            range: range
        },
        {
            label: '"express"',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "Fast, unopinionated, minimalist web framework",
            insertText: '"express": "*"',
            range: range
        },
        {
            label: '"mkdirp"',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "Recursively mkdir, like <code>mkdir -p</code>",
            insertText: '"mkdirp": "*"',
            range: range
        },
        {
            label: '"my-third-party-library"',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: "Describe your library here",
            insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
            range: range
        }
    ];
}


monaco.languages.registerCompletionItemProvider('yaml', {
    provideCompletionItems: function(model, position) {
        // find out if we are completing a property in the 'dependencies' object.
        var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});
        var match = textUntilPosition.match(/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/);
        if (!match) {
            return { suggestions: [] };
        }
        var word = model.getWordUntilPosition(position);
        var range = {
            startLineNumber: position.lineNumber,
            endLineNumber: position.lineNumber,
            startColumn: word.startColumn,
            endColumn: word.endColumn
        };
        return {
            suggestions: createDependencyProposals(range)
        };
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
    language: "yaml",
    quickSuggestions: { other: true, strings: true }
});

Read more comments on GitHub >

github_iconTop Results From Across the Web

YAML Tutorial: Everything You Need to Get Started in ...
This YAML tutorial will demonstrate the language syntax with a guide and some simple coding examples in Python. YAML has broad language support ......
Read more >
YAML - Quick Guide
The shortcut key combination for commenting YAML blocks is Ctrl+Q. If you are using Sublime Text editor, the steps for commenting the block...
Read more >
10 YAML tips for people who hate YAML | Enable Sysadmin
1. Use a linter ... Ideally, programming languages and markup languages use predictable syntax. Computers tend to do well with predictability, so ...
Read more >
YAML: Do I need quotes for strings in YAML?
In general, you don't need quotes. · Use quotes to force a string, e.g. if your key or value is 10 but you...
Read more >
How to create your own auto-completion for JSON and ...
For example, If you have a package.json file opened in VS Code, you can tap CTRL + Space and a pop-up will appear,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found