Ace linters is lsp client for Ace editor. It comes with large number of preconfigured easy to use in browser servers.

If you're uncertain about integrating ace-linters, consult our diagram on the GitHub Wiki for a quick setup guide tailored to your needs.

import * as ace from "ace-code";
import {Mode as TypescriptMode} from "ace-code/src/mode/typescript";
import {LanguageProvider} from "ace-linters/build/ace-linters";

// Create a web worker
let worker = new Worker(new URL('./webworker.js', import.meta.url));

// Create an Ace editor
let editor = ace.edit("container", {
    mode: new TypescriptMode() // Set the mode of the editor to Typescript
});

// Create a language provider for web worker (
let languageProvider = LanguageProvider.create(worker);

// Register the editor with the language provider
languageProvider.registerEditor(editor);

Example webworker.js with all services

• registerServer method in ServiceManager enables management of both services and servers on the web worker's side. Just add new servers to your webworker like this:

  manager.registerServer("astro", {
      module: () => import("ace-linters/build/language-client"),
      modes: "astro",
      type: "socket", // "socket|worker"
      socket: new WebSocket("ws://127.0.0.1:3030/astro"),
      initializationOptions: {
          typescript: {
              tsdk: "node_modules/typescript/lib"
          }
      }
  });

• Multiple servers management on main thread. Just register servers like this:

  let servers = [
      {
          module: () => import("ace-linters/build/language-client"),
          modes: "astro",
          type: "socket",
          socket: new WebSocket("ws://127.0.0.1:3030/astro"),
      },
      {
          module: () => import("ace-linters/build/language-client"),
          modes: "svelte",
          type: "socket",
          socket: new WebSocket("ws://127.0.0.1:3030/svelte"),
      }
  ]
  let languageProvider = AceLanguageClient.for(servers);

• Breaking change: AceLanguageClient.for interface was changed

<script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ace.js"></script>
<script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ext-language_tools.js"></script>
<script src="https://www.unpkg.com/ace-linters@latest/build/ace-linters.js"></script>
<div id="editor" style="height: 100px">some text</div>

<script>
    ace.require("ace/ext/language_tools"); //To allow autocompletion
    var CssMode = ace.require("ace/mode/css").Mode;
    var editor = ace.edit("editor", {
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        mode: new CssMode()
    });

    var provider = LanguageProvider.fromCdn("https://www.unpkg.com/ace-linters@latest/build/");
    provider.registerEditor(editor);
</script>

Ace linters client currently supports two modes: WebSockets and WebWorkers.

In WebSockets mode, you need to start a language server on any port and connect to it.

Here's an example client:

import * as ace from "ace-code";
import {Mode as JSONMode} from "ace-code/src/mode/json"; //any mode you want
import {AceLanguageClient} from "ace-linters/build/ace-language-client";

// Create a web socket
const serverData = {
    module: () => import("ace-linters/build/language-client"),
    modes: "json|json5",
    type: "socket",
    socket: new WebSocket("ws://127.0.0.1:3000/exampleServer"), // address of your websocket server
}
// Create an Ace editor
let editor = ace.edit("container", {
    mode: new JSONMode() // Set the mode of the editor to JSON
});

// Create a language provider for web socket
let languageProvider = AceLanguageClient.for(serverData);

// Register the editor with the language provider
languageProvider.registerEditor(editor);

Full Example client

Full Example server

client.js:

import * as ace from "ace-code";
import {Mode as TypescriptMode} from "ace-code/src/mode/typescript";
import {AceLanguageClient} from "ace-linters/build/ace-language-client";

// Create a web worker
let worker = new Worker(new URL('./webworker.js', import.meta.url));
const serverData = {
    module: () => import("ace-linters/build/language-client"),
    modes: "json",
    type: "webworker",
    worker: worker,
}

// Create an Ace editor
let editor = ace.edit("container", {
    mode: new TypescriptMode() // Set the mode of the editor to Typescript
});

// Create a language provider for web worker
let languageProvider = AceLanguageClient.for(worker);

// Register the editor with the language provider
languageProvider.registerEditor(editor);

Example client

[!] You need to describe server similar to that example: Example server

• Text Document Synchronization (with incremental changes)
• Hover
• Diagnostics
• Formatting
• Completions
• Signature Help

Full list of capabilities

Ace linters supports the following languages by default with webworkers approach:

• JSON, JSON5 powered by vscode-json-languageservice
• HTML powered by vscode-html-languageservice
• CSS, SCSS, LESS powered by vscode-css-languageservice
• Typescript, Javascript, JSX, TSX powered by Typescript
• Lua powered by luaparse
• YAML powered by Yaml Language Server
• XML powered by XML-Tools
• Javascript, JSX powered by Eslint
• Python powered by Ruff

• MySQL, FlinkSQL, SparkSQL, HiveSQL, TrinoSQL, PostgreSQL, Impala SQL, PL/SQL with ace-sql-linter

To install Ace linters, you can use the following command:

npm install ace-linters

Ace linters is released under the MIT License.