How to have intellisense for a language ? (in Nextjs)

[dev265545]

No description provided.

[suren-atoyan]

You have IntelliSense for the following languages out of the box:

• TypeScript
• JavaScript
• CSS
• LESS
• SCSS
• JSON
• HTML

For all other supported languages, you have only syntax highlighting, so you have to implement IntelliSense by yourself by using an appropriate LSP or doing it manually by using a completion provider

[ansh]

How do I integrate Shiki highlighter? @suren-atoyan

I'm currently doing it in handleEditorWillMount like this:

  const handleEditorWillMount: BeforeMount = async (monaco) => {
    // SETUP SHIKI HIGHLIGHTER
    // Create the highlighter, it can be reused
    const highlighter = await createHighlighter({
      themes: ["slack-dark", "vitesse-dark", "vitesse-light"],
      langs: ["javascript", "typescript", "css", "html", "json"],
    })
    // Register the languageIds first. Only registered languages will be highlighted.
    monaco.languages.register({ id: "typescript" })
    monaco.languages.register({ id: "javascript" })
    monaco.languages.register({ id: "css" })
    monaco.languages.register({ id: "html" })
    monaco.languages.register({ id: "json" })
    // Register the themes from Shiki, and provide syntax highlighting for Monaco.
    shikiToMonaco(highlighter, monaco)

    monaco.editor.addKeybindingRules([
      {
        keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyG,
        command: "null",
      },
    ])
  }

But this has a delay so it doesn't work properly. If I save highlighter into a state variable, then it doesn't work either.

Any workarounds since createHighlighter is async?

I opened a new issue for it here: #641