Hints on getting ace-linters to work in a Vite/React/TypeScript application

[jasonterando]

Here are some "tricks" I figured out in to get ace-linters to work in my Vite/React/TypeScript application (hosted in Tauri). Maybe these will help somebody else...

1. Add "skipLibCheck": true to your tsconfig.json if you are getting errors like the following when transpiling your app: "Property '[Symbol.iterator]' in type 'LinkedMap<K, V>' is not assignable to the same property in base type 'Map<K, V>'. Type '() => IterableIterator<[K, V]>' is not assignable to type '() => MapIterator<[K, V]>'.".

2. In your vite.config.ts file, add entries for ace-linters, including the services you will be using, to keep the application from optimizing and reloading when starting. For example:

export default defineConfig(async () => ({
plugins: [react()],

// These need to be in to clean up @emotion duplication
optimizeDeps: {
  include: ['@emotion/react', 'ace-linters/build/service-manager', 'ace-linters/build/javascript-service', 'ace-linters/build/json-service'],
}
// ...

3. I was able to get a working Typescript webworker.ts like this:

import('ace-linters/build/service-manager').then(
    ({ ServiceManager }) => {
        let manager = new ServiceManager(self);

        manager.registerService("javascript", {
            features: { completion: true, completionResolve: false, diagnostics: true, format: false, hover: false, documentHighlight: false, signatureHelp: false },
            module: () => import("ace-linters/build/javascript-service"),
            className: "JavascriptService",
            modes: "javascript",
        });

        manager.registerService("json", {
            features: { signatureHelp: false, documentHighlight: false },
            module: () => import("ace-linters/build/json-service"),
            className: "JsonService",
            modes: "json",
        });

    }
)

4. And finally, in my component's useEffect, I was able to set get it all working like this:

    useEffect(() => {
        editor.current = ace.edit('editor')
        editor.current.setTheme(theme)
        editor.current.setOptions({
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
            fontSize: `${apicizeSettings.fontSize}pt`,
            showGutter: true,
            showPrintMargin: false,
            tabSize: 4,
            foldStyle: 'markbegin',
            displayIndentGuides: true,
            enableAutoIndent: true,
            fixedWidthGutter: true,
            showLineNumbers: true,
            useWorker: false,
        })

       editor.session.setMode(new JavaScriptMode());
       // or
       editor.session.setMode(new JsonMode());
       // etc.