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.

Get Jayaram’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

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