Sharing intellisense features for VSCode Extension & Electron app with Monaco Editor

Question

Background

I am working on a desktop application build with Electron, Electron-forge, TypeScript, React, Webpack. One of the features is a editor to write a custom language. For this I have used the Monaco Editor via the @monaco-editor/react package. I started writing intellisense features (e.g. completionProvider, hoverProvider etc.) using the Monaco API which work great for the desktop Electron app.

I would like to reuse those provider functions in a VSCode Extension. But that requires using the vscode api instead.

First idea

My initial approach was to add the VSCode API on top of the Monaco API in order to write the providers using the VSCode API that is also used for extensions. I looked at the monaco-vscode-api package but find it rather confusing to get working.

Today I have code like this for setting up the editor component:

import Editor, { loader } from "@monaco-editor/react";
import * as monaco from "monaco-editor";

// Use the local monaco instead of retrieving from the cdn
loader.config({ monaco });

monaco.languages.register({
  id: "myLang",
  aliases: ["mylang", "MyLang"],
  extensions: [".ml"],
});

monaco.languages.setLanguageConfiguration("mylang", conf)
monaco.languages.setMonarchTokensProvider("mylang", language)

monaco.languages.registerCompletionItemProvider("mylang", {
  provideCompletionItems: completionProvider,
});

I would like to get some help in order to obtain something like this:

import * as vscode from 'vscode'
...
vscode.registerCompletionItemProvider("mylang", {
  provideCompletionItems: completionProvider,
});

I am new to the js/ts world and therefore unsure if I am missing something about the interaction of electron, webpack and the different packages (monaco, vscode-api).

Any advise is much appreciated.