↖ Writing

Setting up Neovim for Astro development

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