VSCode Syntax Highlighting

[dashdeckers]

RCL seems to be exactly what I am looking for, and I am currently successfully using it at work, but the lack of syntax highlighting in VSCode is making it a bit hard to use; It would be a great addition to provide an official extension for the language for such a widely used editor.

On my personal computer I might use Helix, but at work it makes no sense to swim against the current.

[ruuda]

I agree it’s needed, VS Code is certainly a widely used editor. I briefly looked into it in the past, it will require writing a custom TextMate grammar. It’s on my to do list, but I don’t use VS Code myself, so it’s not top priority for me. Alternatively, if anybody is interested in building a community-maintained VS Code extension, I would be open to that.

[matthieucx]

It's possible to use the tree-sitter grammar provided in this repo to bypass the lack of an extension for now. The setup is a bit involved because VSCode only supports TextMate, but I just automated most of it today at work.

The steps are broadly:

• Install rcl and tree-sitter
• Generate WASM bindings through tree-sitter for the rcl grammar
• Set up a VSCode tree-sitter extension to use the bindings and the queries defined in this repo
• Register RCL as a language in VSCode, to trigger the extension above

The script below does everything, including automatic brackets colorization, except updating your VSCode user settings. Copy all three files to the same folder and run the bash script.

Here's the script:

This will always override the CLI tools, the grammar, query and VSCode configuration. You will need to change vscode-server to vscode in the paths depending on your setup.

#!/bin/bash

# https://just.systems/man/en/safer-bash-shebang-recipes.html
set -euo pipefail

SCRIPT_DIR=$(dirname "$0")
GRAMMAR_DIR="$HOME/.local/share/tree-sitter-rcl"
# Added to $PATH automatically by `~/.profile` if the folder exists
BIN_DIR="$HOME/.local/bin"

echo ""
printf "\033[36m=== RCL Tree-sitter Setup for VSCode ===\033[0m\n"
echo ""

# Install CLI tools
echo "Installing/updating RCL CLI..."
mkdir -p "$BIN_DIR"
LATEST_RCL_URL=$(curl -s https://api.github.com/repos/ruuda/rcl/releases/latest | \
    jq -r '.assets[] | select(.name | test("x86_64-unknown-linux-gnu$")) | .browser_download_url')
curl -sLo "$BIN_DIR/rcl" "$LATEST_RCL_URL"
chmod +x "$BIN_DIR/rcl"
printf "\033[32m✓ RCL CLI installed/updated\033[0m\n"

echo ""
echo "Installing/updating tree-sitter CLI..."
wget -q https://github.com/tree-sitter/tree-sitter/releases/latest/download/tree-sitter-linux-x64.gz -O /tmp/tree-sitter-linux-x64.gz
gunzip -f /tmp/tree-sitter-linux-x64.gz
mv /tmp/tree-sitter-linux-x64 "$BIN_DIR/tree-sitter"
chmod +x "$BIN_DIR/tree-sitter"
printf "\033[32m✓ tree-sitter CLI installed/updated\033[0m\n"

echo ""

# Setup grammar files
echo "Setting up tree-sitter RCL grammar..."
rm -rf "$GRAMMAR_DIR"
mkdir -p "$GRAMMAR_DIR"
pushd "$GRAMMAR_DIR" > /dev/null

echo "Downloading RCL grammar..."
wget -q https://raw.githubusercontent.com/ruuda/rcl/refs/heads/master/grammar/tree-sitter-rcl/grammar.js

# `js-runtime --native` was introduced in v0.26
# https://github.com/tree-sitter/tree-sitter/blob/master/docs/src/cli/generate.md#--js-runtime-executable
# v0.26 requires GLIBC > 2.39
# https://github.com/tree-sitter/tree-sitter/issues/4174#issuecomment-3641355754
# If this is an issue, install an older tree-sitter version, install bun, npm or whatever and pass it with `--js-rutime`
echo "Building WASM parser..."
tree-sitter generate --abi 14 --js-runtime native 1>/dev/null
tree-sitter build --wasm

echo "Downloading highlight queries..."
mkdir -p queries
wget -q -O queries/highlights.scm https://raw.githubusercontent.com/ruuda/rcl/refs/heads/master/grammar/tree-sitter-rcl/queries/highlights.scm

popd > /dev/null

printf "\033[32m✓ RCL tree-sitter grammar configured\033[0m\n"
echo ""

# tree-sitter extension, add RCL as a language in VSCode
echo "Installing tree-sitter-vscode extension..."
code --install-extension AlecGhost.tree-sitter-vscode --force

echo "Configuring RCL language in VSCode..."

EXTENSION_PATH=$(find ~/.vscode-server/extensions -name "package.json" -path "*tree-sitter-vscode*" 2>/dev/null | head -1)
if [ -z "$EXTENSION_PATH" ]; then
    echo "ERROR: tree-sitter-vscode extension not found in ~/.vscode-server/extensions"
    echo "Please ensure the extension is installed."
    exit 1
fi
EXTENSION_DIR=$(dirname "$EXTENSION_PATH")

cp "$SCRIPT_DIR/language-configuration.json" "$EXTENSION_DIR/language-configuration-rcl.json"
jq --arg cfg "./language-configuration-rcl.json" '
  .contributes.languages = (
    (.contributes.languages // [])
    | map(select(.id != "rcl"))
    | . + [{"id": "rcl", "extensions": [".rcl"], "configuration": $cfg}]
  )
' "$EXTENSION_DIR/package.json" > "$EXTENSION_DIR/package.json.tmp" && \
  mv "$EXTENSION_DIR/package.json.tmp" "$EXTENSION_DIR/package.json"

printf "\033[32m✓ RCL language configured\033[0m\n"
echo $EXTENSION_DIR

# Create user settings
sed "s|<HOME_PLACEHOLDER>|$HOME|g" $SCRIPT_DIR/user-settings.json.template > $SCRIPT_DIR/user-settings.json

echo ""
printf "\033[36m=== Setup Complete! ===\033[0m\n"
echo ""
printf "Grammar location: \033[36m$GRAMMAR_DIR\033[0m\n"
printf "RCL CLI: \033[36m$BIN_DIR/rcl\033[0m\n"
printf "tree-sitter CLI: \033[36m$BIN_DIR/tree-sitter\033[0m\n"
echo ""
echo "If the CLI tools are not found, restart an SSH session for your \$PATH to be updated."
echo ""
printf "\033[36mNext steps:\033[0m\n"
printf "1. Copy the contents of \033[36m"$SCRIPT_DIR/user-settings.json"\033[0m to your user settings: \033[36mCtrl+Shift+P > Open User Settings (JSON)\033[0m\n"
printf "2. Reload tree-sitter extension: \033[36mCtrl+Shift+P > tree-sitter-vscode: Reload\033[0m\n"

user-settigns.json.template

Most semantic tokens are mapped automatically, only constants (bools and nulls) and string holes tokens ( "{" and "}" ) and escape sequences need to be mapped explicitly.

The tree-sitter types are declared in the highlights query. On the VSCode side, here's the doc.

{
    "tree-sitter-vscode.languageConfigs": [
        {
            "lang": "rcl",
            "parser": "<HOME_PLACEHOLDER>/.local/share/tree-sitter-rcl/tree-sitter-rcl.wasm",
            "highlights": "<HOME_PLACEHOLDER>/.local/share/tree-sitter-rcl/queries/highlights.scm",
            "semanticTokenTypeMappings": {
                "constant": {
                    "targetTokenModifiers": ["declaration", "readonly"],
                    "targetTokenType": "variable"
                },
                "string.special": {
                    "targetTokenModifiers": ["declaration", "readonly"],
                    "targetTokenType": "variable"
                }
            }
        }
    ]
}

language-configuration.json

{
    "brackets": [
        ["{", "}"],
        ["[", "]"],
        ["(", ")"]
    ],
    "autoClosingPairs": [
        ["{", "}"],
        ["[", "]"],
        ["(", ")"],
        ["\"", "\""]
    ],
    "surroundingPairs": [
        ["{", "}"],
        ["[", "]"],
        ["(", ")"],
        ["\"", "\""]
    ]
}

One everything is set-up, reload the tree-sitter extension (Ctrl+Alt+P > tree-sitter-vscode: Reload)

Hope that can help!

[ruuda]

I started working on an extension (#104). At this point it supports the full grammar. I tested the basics, but it could use more intensive testing. If anybody wants to help test this, I uploaded a preview version to https://marketplace.visualstudio.com/items?itemName=rcl-lang.rcl. You can leave comments on #104.