Configuring Emacs and Eglot to work with Astro language server

Emacs connected to astrojs/language-server using Eglot LSP Client.

Astro is a fast and powerful web framework which comes with its own language server. You can easily configure it to work with Eglot (Emacs LSP Client) in 3 simple steps.

1. Prerequisite

You must have web-mode and eglot packages installed, if not you can with the following use-package declaration in your Emacs config file.

init.el

;; WEB MODE
(use-package web-mode
  :ensure t)

;; EGLOT
(use-package eglot
  :ensure t)

2. Install Typescript and Astro Language Server

During the initial Astro project creation using npm create astro@latest , you are given an option whether you plan to write Typescript (Yes or No).

If you said Yes , Astro tooling would have already installed Typescript for you.

If you said No , you will have to manually install Typescript for Astro LSP (Language Server Protocol) to work. You can do that by running the below command in your project folder.

npm install -D typescript

Install Astro Language Server using the below command:

npm i -g @astrojs/language-server

3. Astro Mode and Eglot

Emacs by default does not have an astro-mode we can derive it from web-mode as follows.

init.el

;; WEB MODE
(use-package web-mode
  :ensure t)

;; ASTRO
(define-derived-mode astro-mode web-mode "astro")
(setq auto-mode-alist
      (append '((".*\\.astro\\'" . astro-mode))
              auto-mode-alist))

;; EGLOT
(use-package eglot
  :ensure t)

Finally you have to tell Eglot to use Astro Language Server when in astro-mode

init.el

;; WEB MODE
(use-package web-mode
  :ensure t)

;; ASTRO
(define-derived-mode astro-mode web-mode "astro")
(setq auto-mode-alist
      (append '((".*\\.astro\\'" . astro-mode))
              auto-mode-alist))

;; EGLOT
(use-package eglot
  :ensure t
  :config
  (add-to-list 'eglot-server-programs
               '(astro-mode . ("astro-ls" "--stdio"
                               :initializationOptions
                               (:typescript (:tsdk "./node_modules/typescript/lib")))))
  :init
  ;; auto start eglot for astro-mode
  (add-hook 'astro-mode-hook 'eglot-ensure))

Restart Emacs and open any .astro file from your project.
Eglot would have connected to Astro language server and you can use its available capabilities.

Note:

If you do not provide tsdk path as mentioned in the above config, the LSP server will exit with error.

References:

https://github.com/sublimelsp/LSP-astro/blob/main/LSP-astro.sublime-settings#L18