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 inServiceManager
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);
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);
[!] You need to describe server similar to that example: Example server
- Text Document Synchronization (with incremental changes)
- Hover
- Diagnostics
- Formatting
- Completions
- Signature Help
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.