Code Validation (& IntelliSense) for Javascript

[pbrostean]

Hi everyone,

I'm wondering how I can get syntax highlighting or IntelliSense for JavaScript in the Monaco editor. I have always been able to do this before using the packages provided by Codingame (the default extension and the language features), or the corresponding VSIX extensions.

For JavaScript, however, only the default extension is available, and this only provides syntax highlighting. JavaScript is one of the built-in languages in VSCode, so can this also be activated by default, or is there another way to achieve code validation and IntelliSense?

Thanks in advance!

[kaisalmen]

Hi @pbrostean change our TypeScript example like the following and you have it:

[pbrostean]

Hey @kaisalmen!
Thank you, it seems to try to activate the language features, but fails with the following error message:

I don't know why it is telling me it is outside of a module, I have nothing configured in the package.json ("type": "module") or in the tsconfig.json regarding commonjs.

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "skipLibCheck": true,
        "module": "ES2022",
        "target": "ES2022",
        "lib": ["ESNext", "DOM", "DOM.Iterable"],
        "allowJs": false,
        "esModuleInterop": true,
        "strict": true,
        "noEmit": true,
        "resolveJsonModule": true,
        "moduleResolution": "bundler",
        "forceConsistentCasingInFileNames": true,
        "types": ["vite/client"],
        "paths": {
            "components/*": ["./lib/components/*"],
            "index.css": ["./lib/index.css"]
        }
    },
    "include": ["lib", "App.tsx"],
    "exclude": ["node_modules", "dist"]
}

I use an ordinary vite as well as monacoWrapperConfig and import like in your TypeScript example.

import { LogLevel } from "@codingame/monaco-vscode-api"
import { WrapperConfig } from "monaco-editor-wrapper"
import { configureDefaultWorkerFactory } from "monaco-editor-wrapper/workers/workerLoaders"

export const createMonacoWrapperConfig = (
    text: string,
    projectId: string,
    branch: string,
    filePath: string
): WrapperConfig => {
    return {
        $type: "extended",
        logLevel: LogLevel.Warning,
        // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
        htmlContainer: document.getElementById("monaco-editor-root") as HTMLElement,
        vscodeApiConfig: {
            enableExtHostWorker: true,
            userConfiguration: {
                json: JSON.stringify({
                    "editor.experimental.asyncTokenization": true
                })
            }
        },
        editorAppConfig: {
            codeResources: {
                original: {
                    text: text,
                    uri: `original/${projectId}/${branch}/${filePath}`
                },
                modified: {
                    text: text,
                    uri: `modified/${projectId}/${branch}/${filePath}`
                }
            },
            editorOptions: {
                theme: "Default Light Modern",
                minimap: {
                    enabled: false
                },
                lineNumbersMinChars: 2
            },
            useDiffEditor: false,
            diffEditorOptions: {
                renderSideBySide: true,
                renderOverviewRuler: false,
                lineNumbersMinChars: 2,
                hideUnchangedRegions: {
                    enabled: true
                }
            },
            monacoWorkerFactory: configureDefaultWorkerFactory as () => void
        }
    }
}

import metaUrlPlugin from "@chialab/esbuild-plugin-meta-url"
import vsixPlugin from "@codingame/monaco-vscode-rollup-vsix-plugin"
import react from "@vitejs/plugin-react-swc"
import path from "path"
import tailwindcss from "tailwindcss"
import { defineConfig } from "vite"

export default defineConfig({
    base: "./",
    build: {
        lib: {
            formats: ["es"],
            entry: path.resolve(__dirname, "lib/index.ts"),
            name: "@test/lib-ui",
            fileName: "index"
        }
    },
    worker: {
        format: "es"
    },
    css: {
        postcss: {
            plugins: [tailwindcss]
        }
    },
    optimizeDeps: {
        include: ["vscode-textmate", "vscode-oniguruma"],
        esbuildOptions: {
            plugins: [metaUrlPlugin()]
        }
    },
    plugins: [
        react(),
        vsixPlugin()
    ]
})

[kaisalmen]

@pbrostean did you produce a build or use a dev server?
Try to set the assetsInlineLimit o 0 like here

[pbrostean]

@kaisalmen I use a dev server, the error occurs when I serve the unbuilt code directly or also the editor from the build. The assetsInlineLimit option does not change anything.

[kaisalmen]

Try to not invoke metaUrlPlugin, but only provide the function reference

[pbrostean]

Thanks for the Note, it seems that my importMetaUrl plugin from chialab did not have the same logic as the plugin from codingame. With a few customizations I got it working now, thanks for the help! 🎉