Intellisense tips like webstorm

I don’t know if Intellisense already exists, but I miss how the webstorm works. He gives tips to simplify / improve the code.

See the example below, ignore the simplicity, because I just want to show the tip that the webstorm with Intellisense brings.

Writing roughly, by a junior developer: (javascript/typescript)

const t = 'teste';
const testFn = () => {
    if (t && t === 'teste') {
        return true;
    } else {
        return false;
    }
};

webstorm tip

after the tip the webstorm gave:

how do you activate something like that in monaco? or if you don’t have it, you can create a custom configuration to do this and how I would configure it and get the result suggested above by the webstorm.

[rcjsuen]

@GlauberF You’ll need to a) create some model markers and b) create the code action and its corresponding edit. Run this code in the Monaco Editor Playground to see a sample.

monaco.languages.register({ id: 'demoLanguage' });
const uri = monaco.Uri.parse("inmemory://test");
monaco.languages.registerCodeActionProvider("demoLanguage", {
    provideCodeActions() {
        return {
            actions: [
                {
                    title: "lowercase",
                    edit: {
                        edits: [
                            {
                                resource: uri,
                                edit: {
                                    text: "abcde",
                                    range: {
                                        startLineNumber: 1,
                                        startColumn: 1,
                                        endLineNumber: 1,
                                        endColumn: 6,
                                    }
                                }
                            }
                        ]
                    }
                }
            ],
            dispose: () => {}
        }
    }
});

const model = monaco.editor.createModel("ABCDE", "demoLanguage", uri);
editor = monaco.editor.create(document.getElementById("container"), {
    model: model,
    lightbulb: {
        enabled: true
    },
});
monaco.editor.setModelMarkers(model, "owner", [
    {
        message: "Sample error message",
        severity: monaco.MarkerSeverity.Error,
        startLineNumber: 1,
        startColumn: 1,
        endLineNumber: 1,
        endColumn: 1,
    }
]);

[alexdima]

@GlauberF You need to implement this by yourself. You need to find an AST parser, you can use the one from the TypeScript project, or get another one and then you would need to walk the AST and search for this pattern x && x=='y'. This is something that you need to figure out and is not related to the Monaco Editor. @rcjsuen has done a fantastic job of showing you how to plug into the editor your semantic analysis, once you have implemented it.