How to do async lint

v6
1

Hi there,

Recently, I am working on an editor project. I want to add CSS lint to codemirror v6. I chose to use stylelint to do the job and I followed the example in this page.

Here is my code.

const langLinter = linter(view => {
    let diagnostics = [];
    ... ...
    if(lang == "CSS"){
        stylelint.lint({
                config: {
                    ...lintConfig,
                    customSyntax: doc.includes("{") ? null : "sugarss"
                },
                code: doc, 
                formatter: () => {}
            })
            .then(result => {
                ... ...
                diagnostics.push({
                                    from: nodeFrom,
                                    to: nodeTo,
                                    severity: "warning",
                                    message: warning.text,
                                    // actions: [{
                                    //     name: "Remove",
                                    //     apply(view, from, to) { view.dispatch({changes: {from, to}}); }
                                    // }]
                                });
            })
            .catch(err => {
                console.log(err);
            });
    }
    return diagnostics;
});

const extensions = [
    basicSetup,
    history(),
    ... ...
    lintGutter(),
    langLinter
];
const state = EditorState.create({ "doc": "Some code", "extensions": extensions});
const editor = new EditorView({ state, parent: document.querySelector("#editor") });

The issue is diagnostics array is returned first and then stylelint pushes the value in it. So is there a way to do async lint at codemirror end?

Any help is appreciated.

Thanks.,

2

A lint source can return a promise. So just make your function async and make sure you only return after you have the actual result, and everything should work.

1 Like
3

Thank you so much, marjin.

I will keep working on it.

Thank you.