Ace Linters (Ace Language Client)
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.
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";
let worker = new Worker(new URL('./webworker.js', import.meta.url));
let editor = ace.edit("container", {
mode: new TypescriptMode()
});
let languageProvider = LanguageProvider.create(worker);
languageProvider.registerEditor(editor);
Example webworker.js with all services
New Features in 1.2.0
- add
setProviderOptions
method to LanguageProvider
to set options for client. - add experimental semantic tokens support (turned off by default). To turn on semantic tokens, set
semanticTokens
to
true
in setProviderOptions
method or use it in create
or fromCdn
methods like that
LanguageProvider.create(worker, {functionality: {semanticTokens: true}})
New Features in 1.0.0
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: 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
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");
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.
Usage with WebSocket (JSON-RPC)
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";
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"),
}
let editor = ace.edit("container", {
mode: new JSONMode()
});
let languageProvider = AceLanguageClient.for(serverData);
languageProvider.registerEditor(editor);
Full Example client
Full Example server
Usage with WebWorker (JSON-RPC)
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";
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);
Example client
[!] You need to describe server similar to that example:
Example server
Supported LSP capabilities:
- Text Document Synchronization (with incremental changes)
- Hover
- Diagnostics
- Formatting
- Completions
- Signature Help
Full list of capabilities
Supported languages
Ace linters supports the following languages by default with webworkers approach:
Supported languages via extensions
- MySQL, FlinkSQL, SparkSQL, HiveSQL, TrinoSQL, PostgreSQL, Impala SQL, PL/SQL with ace-sql-linter
Installation
To install Ace linters, you can use the following command:
npm install ace-linters
License
Ace linters is released under the MIT License.