Monaco Editor intellisense from multiple files

Question

I am using monaco-editor and I would like to include suggestions from multiple files. I am not sure what is the best way to do it but basically, I want that when I am exporting some functions in a file2.js, to be able to access that from another file1.js in the suggestions.

Any idea on how to achieve that ? Thank you !

file1

var express = require('express');
var pug = require('pug');
var config = require('./config');
var fs = require('fs');
var router = express.Router();
var utils = require('/utils');
// Here I would like to use the function newTest from the other file 
but it does not show in the suggestions
router.get('/', function (req, res) {
    console.log("ip - ", req.connection.remoteAddress)
    res.send(pug.compileFile('views/main.pug')({
        config
    }))
});
module.exports = router;

file2

function newTest() {
    
}
module.exports.newTest = newTest;

editorFile

$(document).ready(function() {
// I prefetch my models, then I have a callback to create an instance of the editor
preFetchAllModels(function() {
    var models = monaco.editor.getModels();
    // I check that I have my models (file1 and file2) prefetched before creating the editor
    console.log("models", models);
    monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true)

    monacoEditor = monaco.editor.create(document.getElementById("editor"), {
        value: "loading...",
        language: "javascript",
        theme: 'monokai',
        lineHeight: 20,
        fontSize: 16,
        wordWrap: "bounded",
        automaticLayout: true,
        wrappingIndent: 'indent'
    });
});

Answer 1

To achieve the goal of IntelliSense across multiple files, you need to use a single instance of monaco.editor and for each file you want IntelliSense for, initialize a new model, during application boot. Additionally, for autocompletion support, you must implement a completion item provider. Read below for more details.

Application Initial Load

1. Use const myEditorInstance = monaco.editor.create({ ... , model: null }) to create a single editor instance.
2. Create n-model instances via monaco.editor.createModel(...) where n is the number of files.
3. Configure language defaults for eager model sync: monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true).
4. To enable autocompletion, you will need to implement a method according to the CompletionItemProvider api.

Handling various events after initial load

• Get a list of existing models via monaco.editor.getModels().
• When a file is opened (either by a user clicking on a button or programmatically by some code you write), set the editor instance's model to the file you want to open using myEditorInstance.setModel(model).
• When closing a file, you should save that model's view state (includes cursor position, etc) using myEditorInstance.saveViewState().
• If opening that file again, you may restore that previous model state using myEditorInstance.restoreState().
• If a file is renamed or deleted, you need to properly dispose the corresponding model and in the case where the file was renamed, re-initialize the model.