Typescript incorrect type highlighting

[KornelijusS]

Hey,

I recently started using this library for web code editor side project. I have copied over wrapperTs, but cannot get Typescript errors to be highlighted. Is there some setting that has to be checked?

This is my monaco.ts that is basically a copy of wrapperTs.ts.

import * as monaco from 'monaco-editor';
import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
import '@codingame/monaco-vscode-theme-defaults-default-extension';
import '@codingame/monaco-vscode-typescript-basics-default-extension';
import '@codingame/monaco-vscode-typescript-language-features-default-extension';
import { CodePlusUri, MonacoEditorLanguageClientWrapper, UserConfig } from 'monaco-editor-wrapper';
import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';

export const configureMonacoWorkers = () => {
    useWorkerFactory({
        ignoreMapping: true,
        workerLoaders: {
            editorWorkerService: () => new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), { type: 'module' })
        }
    });
};

export const runTsWrapper = async () => {
    const codeUri = '/workspace/hello.ts';
    const code = `function sayHello(): string {
    return "Hello";
};`;

    const codeOriginalUri = '/workspace/goodbye.ts';
    const codeOriginal = `function sayGoodbye(): string {
    return "Goodbye";
};`;

    const monacoEditorConfig = {
        glyphMargin: true,
        guides: {
            bracketPairs: true
        },
        lightbulb: {
            enabled: monaco.editor.ShowLightbulbIconMode.On
        },
        theme: 'vs-light'
    };

    const monacoDiffEditorConfig = {
        ...monacoEditorConfig,
        renderSideBySide: false
    };

    const userConfig: UserConfig = {
        wrapperConfig: {
            serviceConfig: {
                userServices: {
                    ...getKeybindingsServiceOverride()
                },

                enableExtHostWorker: true,
                debugLogging: true
            },
            editorAppConfig: {
                $type: 'extended',
                codeResources: {
                    main: {
                        text: code,
                        uri: codeUri,
                        fileExt: 'ts'
                    },
                    original: {
                        text: codeOriginal,
                        uri: codeOriginalUri,
                        fileExt: 'ts'
                    }
                },
                useDiffEditor: false,
                editorOptions: monacoEditorConfig,
                diffEditorOptions: monacoDiffEditorConfig
            }
        }
    };

What should I include in the code to get errors highlighted. For example, this should show an error:

console.abc();

Property 'abc' does not exist on type 'Console'. Did you mean 'log'?(2551)

[kaisalmen]

Hi @KornelijusS both the original TS example/your config make use of the TypeScript extension host and I thought as well this is marked as an error. Don't know if that is true for the regular monaco-editor TS Worker.

@CGNonofr I see that in https://monaco-vscode-api.netlify.app/ console.abc() is also not marked as error when you add it to a TS file. Is this usually available in the extension worker or did something break recently?

[kaisalmen]

Or is it related to this? https://github.com/CodinGame/monaco-vscode-api?tab=readme-ov-file#the-typescript-language-features-extension-is-not-providing-project-wide-intellisense

[KornelijusS]

Hey, found a solution. It seems that this options must be enabled in userConfig to work: "typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors": false. Thanks for pointing me on the right track. I hope I didn't take too much of your time

[CGNonofr]

You were faster than me :) that what I was going to answer, not really sure why they disable it by default...

[kaisalmen]

@KornelijusS and @CGNonofr thank you. TIL something new. I should add this in the example.

[CGNonofr]

Btw, keep it mind that even from microsoft perspectives, the typescript worker project wide intellisense is still experimental and only enabled in the insider version.

At CodinGame we chose to not use it and go back to the monaco worker instead (with some glue)

[KornelijusS]

Okay, thanks, I'll keep that in mind. In my use-case it's more that I need one workspace to have intellisense and all other parts will be included as d.ts files only to get only the definitions

[kaisalmen]

Btw, keep it mind that even from microsoft perspectives, the typescript worker project wide intellisense is still experimental and only enabled in the insider version.

@CGNonofr I pushed an update to main where the config of the TS example is changed, but it does not have the desired effect

[CGNonofr]

Btw, keep it mind that even from microsoft perspectives, the typescript worker project wide intellisense is still experimental and only enabled in the insider version.

@CGNonofr I pushed an update to main where the config of the TS example is changed, but it does not have the desired effect

What do you mean?

[kaisalmen]

It seems the error marking does not work even if "typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors": false is set to true (see here):

[KornelijusS]

I had to recreate the whole vscode demo and it works then. It seems at least to me in the ts example the ts semantic server is not registered, might this be the reason why it does not work?

[CGNonofr]

are you sure corssOriginIsolated is true?

[kaisalmen]

are you sure corssOriginIsolated is true?

Ok, overlooked that (see my own comment https://github.com/TypeFox/monaco-languageclient/issues/695#issuecomment-2202114867 😅 ). Is this relevant in local dev env as well?

[KornelijusS]

Maybe you know something about this issue? after updating all dependencies to 6.0.3 I cannot build the project. I'm using this vite config:

export default defineConfig({
  plugins: [vue()],
  resolve: {
    dedupe: ['vscode']
  },
  base: './',
  build: {
    target: 'esnext',
    rollupOptions: {
      external: ['vue'],
      output: {
        assetFileNames: '[name][extname]',
        chunkFileNames: '[name]-[hash].js',
        entryFileNames: '[name].js',
      },
    }
  },

  optimizeDeps: {
    esbuildOptions: {
      plugins: [importMetaUrlPlugin]
    }
  }
})

this is my package.json if needed:

{
  "name": "monacolanguageclient",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@codingame/esbuild-import-meta-url-plugin": "^1.0.2",
    "@codingame/monaco-vscode-accessibility-service-override": "6.0.3",
    "@codingame/monaco-vscode-ai-service-override": "6.0.3",
    "@codingame/monaco-vscode-authentication-service-override": "6.0.3",
    "@codingame/monaco-vscode-comments-service-override": "6.0.3",
    "@codingame/monaco-vscode-debug-service-override": "6.0.3",
    "@codingame/monaco-vscode-dialogs-service-override": "6.0.3",
    "@codingame/monaco-vscode-emmet-service-override": "6.0.3",
    "@codingame/monaco-vscode-explorer-service-override": "6.0.3",
    "@codingame/monaco-vscode-extension-gallery-service-override": "6.0.3",
    "@codingame/monaco-vscode-extensions-service-override": "^6.0.3",
    "@codingame/monaco-vscode-interactive-service-override": "6.0.3",
    "@codingame/monaco-vscode-keybindings-service-override": "6.0.3",
    "@codingame/monaco-vscode-language-detection-worker-service-override": "6.0.3",
    "@codingame/monaco-vscode-lifecycle-service-override": "6.0.3",
    "@codingame/monaco-vscode-log-service-override": "6.0.3",
    "@codingame/monaco-vscode-markers-service-override": "6.0.3",
    "@codingame/monaco-vscode-multi-diff-editor-service-override": "6.0.3",
    "@codingame/monaco-vscode-notifications-service-override": "6.0.3",
    "@codingame/monaco-vscode-performance-service-override": "6.0.3",
    "@codingame/monaco-vscode-preferences-service-override": "6.0.3",
    "@codingame/monaco-vscode-python-default-extension": "6.0.3",
    "@codingame/monaco-vscode-relauncher-service-override": "6.0.3",
    "@codingame/monaco-vscode-scm-service-override": "6.0.3",
    "@codingame/monaco-vscode-search-service-override": "6.0.3",
    "@codingame/monaco-vscode-snippets-service-override": "6.0.3",
    "@codingame/monaco-vscode-storage-service-override": "6.0.3",
    "@codingame/monaco-vscode-theme-defaults-default-extension": "6.0.3",
    "@codingame/monaco-vscode-typescript-basics-default-extension": "6.0.3",
    "@codingame/monaco-vscode-typescript-language-features-default-extension": "6.0.3",
    "@codingame/monaco-vscode-update-service-override": "6.0.3",
    "@codingame/monaco-vscode-user-data-profile-service-override": "6.0.3",
    "@codingame/monaco-vscode-user-data-sync-service-override": "6.0.3",
    "@codingame/monaco-vscode-view-banner-service-override": "6.0.3",
    "@codingame/monaco-vscode-view-status-bar-service-override": "6.0.3",
    "@codingame/monaco-vscode-view-title-bar-service-override": "6.0.3",
    "@codingame/monaco-vscode-working-copy-service-override": "6.0.3",
    "@codingame/monaco-vscode-workspace-trust-service-override": "6.0.3",
    "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@6.0.3",
    "monaco-editor-wrapper": "^5.2.0",
    "monaco-languageclient": "^8.5.0",
    "vscode": "npm:@codingame/monaco-vscode-api@6.0.3",
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@types/node": "^20.14.8",
    "@types/vscode": "^1.90.0",
    "@vitejs/plugin-vue": "^5.0.5",
    "typescript": "^5.2.2",
    "vite": "^5.3.1",
    "vue-tsc": "^2.0.21"
  }
}

[CGNonofr]

No idea, there is NO import to anything related to issue service in extensionBisect.js

[kaisalmen]

@KornelijusS you need to use the newest version. 8.6.0 and 5.3.0 are compatible with v6. See if npm list shows mismatching monaco-vscode-api versions.

    "monaco-editor-wrapper": "^5.2.0",
    "monaco-languageclient": "^8.5.0",

[kaisalmen]

Did you get a peerDependency warning during npminstall by any chance?

[KornelijusS]

No, but updated the dependencies and it worked. Thank you!

[KornelijusS]

crossOriginIsolated is turned on, but it does not seem to register the TS semantic server still. I guess this is the reason the compiler does not work and no errors a shown

[KornelijusS]

@CGNonofr Hey, could you maybe provide an example how you implemented the tsserver using monaco worker? :/

[CGNonofr]

Sure, everything is here: https://github.com/CodinGame/monaco-editor-wrapper/blob/main/src/features/typescriptStandalone.ts

[KornelijusS]

One last question I have is: Is there some way to get TS semantic server to work/register when not running a server, but just from build index.html? As I am trying to run it as a worker, but only syntax server registers. Or the only way would be to turn to monaco worker?

[CGNonofr]

Are you trying to put everything into a single html file? why?

[KornelijusS]

I'm just using the npm run build and then running the resulting index.html, which loads everything that is in the assets folder. So everything loads and works fine from the demo, the only missing part is the TS semantic server, which does not load for some reason, but no errors are shown. I need this particular way, because to integrate into my existing project I can't create a new server to run the editor. For this reason I upload the resulting build files to CDN as a library and then run the index.js, which loads everything else.

[CGNonofr]

I'm not sure why you expect to need a "new server" nor what it would do.

It the worker doesn't work, we can help you but we would need to see your code

[KornelijusS]

I have forked the monaco-vscode-api repository and ran all the steps needed to run npm run build on demo folder. Then I just opened the resulting index.html in a browser. Haven't changed any code there, just what is from the fork. Everything loads except the TS semantic server, which is needed for the errors to be shown.

[CGNonofr]

What is the TS semantic server exactly? Are you talking about the whole TS intellisense or only a part of it?)

What makes you think it doesn't work?

[KornelijusS]

This is from your demo site. As I understand the TS semantic server is needed for errors to be shown. As without it I don't get any errors like console.abc() should throw one, but it does not if. the TS semantic server is not running, but if I run the demo from my fork with npm run start - the TS semantic server registers and the console.abc() does show an error. The TS Intellisense is working as console or array or any other build-in types do have autocompletion, but errors and imported functions/classes do not work even if the files are open.