External extension usage

[adnanjpg]

Hi there,

I'm trying to use TypeScript Essential Plugins extension in my editor but could not figure out how to. it is not specified neither in the docs nor in the examples, can anyone please give me an example of using an external extension?

[CGNonofr]

Indeed the feature is demonstrated

if you're using vite or rollup, you can follow the instruction here: https://github.com/CodinGame/monaco-vscode-api#loading-vsix-file

if not, I suggest you to use rollup to bundle your extension then digest the output in your app

[CGNonofr]

well you're unlucky because your extension seems to be not working, I'll have a look

[adnanjpg]

does rollup have to be the main compiler of the app or can I use this script on postinstall or something and still be able to use the ts-essential-plugins folder?

[CGNonofr]

You can just run it before running webpack by any mean you want

[CGNonofr]

Ok for it to work, you'll need 2 things:

• waiting for Fix typescript plugin loading #170 to be released
• helping the vsix plugin by providing additionnal used files:

import vsixPlugin from 'vscode/rollup-vsix-plugin'

export default {
  input: 'zardoy.ts-essential-plugins-0.0.68.vsix',
  output: [{
    format: 'esm',
    dir: 'ts-essential-plugins',
    entryFileNames: 'index.js',
    assetFileNames: chunkInfo => {
      return `assets/[name][extname]`
    },
  }],
  external: ['vscode'],
  plugins: [
    vsixPlugin({
      async getAdditionalResources () {
        return [{
          path: 'node_modules/typescript-essential-plugins/package.json'
        }, {
          path: 'node_modules/typescript-essential-plugins/index.mjs'
        }]
      }
    })
  ]
}

[adnanjpg]

In my monaco component code, should I import the .vsix file, or index.js from the outputs?

[CGNonofr]

The rollup build step will transform the vsix to importable javascript, then you import the generated javascript in your app

[adnanjpg]

The setting I want to enable from this extension is called tsEssentialPlugins.fixSuggestionsSorting. when I set it to true on the vsc on my machine it gives me the functionality I want.

for my monaco component, should I import the index file import "../../ts-essential-plugins/index" and then use it like:

import { createConfiguredEditor, createModelReference } from "vscode/monaco"
import * as monaco from "monaco-editor/esm/vs/editor/editor.api"

const modelRef = await createModelReference(
  monaco.Uri.file("/tmp/test.tsx"),
  defaultEditorContents,
)
createConfiguredEditor(
  document.getElementById("editor-mountpoint")!,
  {
    model: modelRef.object.textEditorModel,
    "tsEssentialPlugins.fixSuggestionsSorting": true,
  } as monaco.editor.IStandaloneEditorConstructionOptions,
)

is this the way it is supposed to work?

[CGNonofr]

If you provide your configuration only to the editor, the extension will not be able to access it

instead, you can use the updateUserConfiguration function from vscode/service-override/configuration