Give the Wiki images background colours

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

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

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

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>

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

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

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

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:

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

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.

mkslanc / ace-linters Goto Github PK

ace-linters's Introduction

Ace Linters (Ace Language Client)

Example client with pre-defined services:

New Features in 1.2.0

New Features in 1.0.0

Example using script tag from CDN

Usage with WebSocket (JSON-RPC)

Usage with WebWorker (JSON-RPC)

Supported LSP capabilities:

Supported languages

Supported languages via extensions

Installation

License

ace-linters's People

Contributors

Stargazers

Watchers

Forkers

ace-linters's Issues

worker.ts

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

Specifications

Discussed in #104

Discussed in #62

Recommend Projects

Recommend Topics

Recommend Org