Setting up Neovim and Astro

This article will be a 3 min read.

This blog post was last updated on: 8/23/2023.

Settings and plugins I use for My local Astro development enjoyment.

TLDR

• Astro is a web framework that ships with ZERO javascript to the client by default.
• The Astro LSP can be installed with Mason and set up through the nvim-lsp-config plugin.

Basics

We need LSP support and syntax Highlighting for .astro files to get started. Neovim supports this though nvim-lsp-config and treesitter plugins.

MDX syntax Highlighting

I noticed that .mdx files weren’t highlighted because of the markdown.mdx file type wasn’t detected by Neovim. The Neovim version as of writing right now is v0.10.0. There is a super simple fix to this, you need to associate the filetype mdx to markdown where you configure treesitter.

The first part tells Neovim to use the mdx filetype for every file with the .mdx extension.

vim.filetype.add({
  extension = {
    mdx = 'mdx'
  }
})

local ft_to_parser = require("nvim-treesitter.parsers").filetype_to_parsername
ft_to_parser.mdx = "markdown"

Formatting

I love to get formatting and linting on save. Luckily, many of the community astro themes already have eslint and prettier configured. Let us use them.

However, the formatter does not work by default in Neovim. And I’m using null-ls to inject the LSP to Neovim.

My prettierd config didn’t have by default the Astro filetype, so I added it like this:

local null_ls = require("null-ls")
local formatting = null_ls.builtins.formatting

local sources = {
  formatting.prettierd.with({
    extra_filetypes = { "astro", "mdx" },
  }),
}

Now I was able to get null-ls server attached to my astro buffer.

Editing Markdown in Neovim

My markdown files contain long lines that will trail off the screen if no text-wrapping is enabled. If you want to keep the text wrapping off, there is an option for you, the sidescroll option. It controls the minimum number of columns to scroll horizontally when the wrap option is off and the cursor moves off the screen.

The default is one column. I set it to ten columns in mdx

vim.opt.wrap = false
vim.opt.sidescroll = 10

Also, something that I have into consideration is the amount of long lines that I have, I prefer having a line breaks whenever there is a comma or a dot. That way my paragraphs aren’t too long and I can read them easily.

Let’s talk colors

For the colors and syntax highlighting it’s simple, we need to tell treesitter to parse some code as JS/TS instead of markdown. This is done by adding the following to your treesitter.lua file.

local ft_to_parser = require("nvim-treesitter.parsers").filetype_to_parsername
ft_to_parser.mdx = "markdown"

With this now we now have good colors and nice syntax highlighting for our markdown files.

Wow this is great, but now, another isssue

This blog post was last updated on: 12/8/2023.