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.