astro-ts-mode

A major mode for editing Astro templates. Requires Emacs 29.

Installation

MELPA

Available as astro-ts-mode. Install with your preferred package manager, such as straight.el.

Manual

Clone this repo anywhere you want, probably somewhere in ~/.emacs.d . Then, add the directory to your load-path.

For example:

cd ~/.emacs.d
git clone https://github.com/Sorixelle/astro-ts-mode.git

Then, in init.el:

(add-to-list 'load-path (concat user-emacs-directory "astro-ts-mode"))
(require 'astro-ts-mode)

Setup

The first time you open a .astro file, or (require 'astro-ts-mode), you’ll likely get a warning such as the following:

Cannot activate tree-sitter, because language grammar for astro is unavailable

Because this major mode is powered by Tree-sitter, it depends on an external grammar to provide a syntax tree for Astro templates. To set it up, you’ll need to set treesit-language-source-alist to point to the correct repositories for each language. At a minimum, you’ll need to specify astro, tsx and css, like so:

(setq treesit-language-source-alist
      '((astro "https://github.com/virchau13/tree-sitter-astro")
        (css "https://github.com/tree-sitter/tree-sitter-css")
        (tsx "https://github.com/tree-sitter/tree-sitter-typescript" "master" "tsx/src")))

Once that’s been setup, you’ll need to run treesit-install-language-grammar once for each language in the list. You can do this interactively (M-x), or by evaluating this snippet:

(mapc #'treesit-install-language-grammar '(astro css tsx))

Alternatively, if you’re using treesit-auto to manage tree-sitter grammars for you, you can specify a recipe for it:

(let ((astro-recipe (make-treesit-auto-recipe
                     :lang 'astro
                     :ts-mode 'astro-ts-mode
                     :url "https://github.com/virchau13/tree-sitter-astro"
                     :revision "master"
                     :source-dir "src")))
  (add-to-list 'treesit-auto-recipe-list astro-recipe))

Make sure you have a working C compiler as cc in your PATH, since this needs to compile the grammars.

Customization

You can use these variables to customize the behaviour of astro-ts-mode:

astro-ts-mode-indent-offset

Number of spaces for each indentation step. Defaults to 2.

Credits

• virchau13 for tree-sitter-astro, the Tree-sitter grammar this major mode is built on
• The Astro team for the framework this mode is built for