Working With XML/HTML Tags in Helix IDE

Helix IDE unlocks my long-dreamt-of command-line workflow

I’m still enjoying my Helix experience, as it enables a workflow that I think is quite cool. With my dev-on-server setup, I can’t believe how effective I can be even when using Termux on my phone, paired with my ssh-into-tmux-script.

This is what it looks like doing actual (expo) mobile development with Helix IDE from my mobile (via the termux app) while sitting in Oliver Sandwich:

But, I digress… Back to ‘Working on Tags’

While working on my expo app, I began to miss how WebStorm would automatically add closing tags, and update tag pairs as I renamed one of them, etc.

I’ve learnt a few methods to work with tags, which, for now, seem quite adequate.

First, I believe you’ll need to be in a file that has access to the HTML Language Server Protocol (LSP). It’s currently working for me when the typescript-language-server is accessible by Helix:

Tag-Related tasks, done in Helix IDE

> Rename a tag

With the cursor inside a tag, press space-h to get a cursor on each tag.

You can also use space-r to rename every instance of that tag in the page.

> Add a tag around a selection

As far as I can tell, there is currently no built-in way to do this, although there are some GitHub discussions on how best to implement it. The current suggestion is to use a macro keybinding.

I implemented two methods: adding the tag as a block or inline around specific words or a sentence. I used a bash script with a parameter to keep both functions in one place:

~/bin/helix_macros.sh:

#!/bin/sh

mode="$1"
shift

case "$mode" in
  t)
    # Block tag with newlines
    echo "<xxx>"
    cat
    echo "</xxx>"
    ;;
  i)
    # Inline tag (no newlines)
    printf '<xxx>%s</xxx>' "$(cat)"
    ;;
  *)
    echo "Unknown macro mode: $mode" >&2
    exit 1
    ;;
esac

Then, inside ~/.config/helix/config.toml, I added:

[keys.normal.L]
t = "@|helix_macros.sh t<ret>sxxx<ret>c"
i = "@|helix_macros.sh i<ret>sxxx<ret>c"

Having those in place, and selecting the code to be wrapped in tags, all one has to do is press L+t or L+i to activate the macros.