↖ Writing

Setting up Neovim for Astro development

This post gives an overview on how to set up Neovim for developing in the web framework Astro. We’ll configure nvim-lspconfig for code completion and errors, nvim-treesitter for syntax highlighting, and nvim-web-devicons for icons.

Note: This setup assumes you’ve already got these plugins installed and configured.

Astro LSP

Install the Astro language server by running this anywhere on the command line:

npm install -g @astrojs/language-server

Add the language server to lspconfig:

-- init.lua
require("lspconfig").astro.setup({})

Read more

Treesitter highlighting for .astro files

Run inside any open neovim buffer:

:TSInstall Astro

Create a new file at nvim/ftdetect/astro.lua. Add this for vim to correctly associate the .astro file types.

vim.filetype.add({
    extension = {
        astro = "astro"
    }
})

Read more

Treesitter highlighting for .mdx files

Tell nvim to use the Markdown parser for mdx files:

-- init.lua

vim.filetype.add({
    extension = {
        mdx = "mdx",
    },
})


vim.treesitter.language.register("markdown", "mdx") -- the mdx filetype will use the markdown parser and queries.

Run in any nvim buffer to install tsx highlighting for Treesitter:

:TSInstall tsx

Create a new file at nvim/after/queries/markdown/injections.scm:

; extends
((inline) @_inline (#match? @_inline "^\(import\|export\)")) @tsx

This Treesitter query will use the tsx parser for lines that start with import or export.

Read more

Devicons

Add the icon for .astro files:

-- init.lua

-- devicons
require("nvim-web-devicons").setup({
    strict = true,
    override_by_extension = {
        astro = {
            icon = "",
            color = "#EF8547",
            name = "astro",
        },
    },
})

NerdFonts doesn’t include the Astro logo (yet). So I went with a rocket icon in the brand colour. You can replace the icon with any NerdFonts icon.

Read more

Takeaway

With Astro being a younger framework, plugins for Neovim are less established than for other frameworks. After a few steps of setup, Neovim proves to be a powerful and light-weight development environment for Astro.

Read more