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

• 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}})

• 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 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>

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(serverData); // 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 (incremental changes)
• Diagnostics
  • Related document support
  • Diagnostic tags (Unnecessary, Deprecated)
  • Related diagnostic information support
• Hover
  • Markdown and plaintext content formats
• Formatting
• Completions
  • Snippet support
  • Documentation formats (Markdown, plaintext)
• Signature Help
  • Documentation formats (Markdown, plaintext)
  • Active parameter highlighting support
• Document Highlight
• Semantic Tokens
  • Relative format tokens
  • Range requests supported
  • Augments syntax tokens
• Code Actions
• Inline Completions
• Workspace Capabilities
  • Configuration change notifications
  • Command execution
  • Workspace edits (applyEdit supported)
• Window Capabilities
  • showDocument request support

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

• MySQL, FlinkSQL, SparkSQL, HiveSQL, TrinoSQL, PostgreSQL, Impala SQL, PL/SQL with ace-sql-linter
• Clang with ace-clang-linter
• Dart with ace-dart-linter
• Go with ace-go-linter
• Lua with ace-lua-linter
• Python with ace-python-linter
• Zig with ace-zig-linter

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

npm install ace-linters

Ace linters is released under the MIT License.