Ace Linters Demo

Introduction

Ace Linters (Ace Language Client) is an LSP client for the Ace editor. It comes with a large number of preconfigured, easy-to-use, in-browser language 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.

Below you’ll find demos, new features, and usage instructions for both WebSocket and WebWorker modes.

Demos

• Ace Linters LSP with WebWorker Demo
  (with JSON-RPC)
• Ace Linters with WebWorker Demo
  (with default services)
• Ace Linters with WebWorker Change Modes Demo
• Ace Linters LSP for Rust-Analyzer on WebWorker Demo
• Ace Linters LSP with WebSocket Demo
  (Requires LSP server running on port 3000)
• Ace Linters LSP with Pylsp WebSocket Demo
  (Requires Python LSP Server running on port 3000)
• Ace Linters with WebWorker Demo with Multiple Services
• Ace Linters LSP with Svelte Language Server Demo
  (Requires Svelte Language Server WebSocket Wrapper running on port 3030)
• Ace Linters LSP with LSP-AI Language Server Demo
  (Requires Language Server WebSocket Bridge or a plain WebSocket server)
• Ace Linters LSP with GitHub Copilot Language Server Demo
  (Requires Language Server WebSocket Bridge or a plain WebSocket server)
• Ace Linters LSP with File System Access API Demo
  (Requires Language Server WebSocket Bridge or a plain WebSocket server)

Usage

Example Client with Pre-defined Services

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 to Typescript
});

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

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

Example webworker.js with all services

Example Using Script Tag from CDN

<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 editor = ace.edit("editor", {
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
    mode: "ace/mode/css"
  });

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

Usage with WebSocket (JSON-RPC)

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

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";

const serverData = {
    module: () => import("ace-linters/build/language-client"),
    modes: "json|json5",
    type: "socket",
    socket: new WebSocket("ws://127.0.0.1:3000/exampleServer"), // your websocket server address
}

// Create an Ace editor
let editor = ace.edit("container", {
    mode: new JSONMode()
});

// Create a language provider for WebSocket
let languageProvider = AceLanguageClient.for(serverData);
languageProvider.registerEditor(editor);

Usage with WebWorker (JSON-RPC)

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";

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,
}

let editor = ace.edit("container", {
    mode: new TypescriptMode()
});

let languageProvider = AceLanguageClient.for(serverData);
languageProvider.registerEditor(editor);

See the Example client and Example server .

Installation

To install Ace Linters, run:

npm install ace-linters

License

Ace Linters is released under the MIT License.