tuzemec

It took me a while to figure this out, but here’s my current setup for running Zed with Astro and Biome.

Note that Biome handles only the frontmatter portion of Astro files (at least for ver 1.9.4), while Prettier formats the HTML and CSS content. And since Zed supports running multiple formatters sequentially, we’ll configure it to run Prettier first followed by Biome. Additionally, we need to explicitly configure the LSP settings for Astro files to enable the astro-language-server.

Local project config .zed/settings.json:

{
	"language_servers": [
		"vtsls",
		"biome",
		"!typescript-language-server",
		"!eslint",
		"!prettier",
		"..."
	],
	"format_on_save": "on",
	"formatter": {
		"language_server": {
			"name": "biome"
		}
	},
	"code_actions_on_format": {
		"source.fixAll.biome": true,
		"source.organizeImports.biome": true
	},
	"languages": {
		"Astro": {
			"language_servers": ["astro-language-server", "..."],
			"formatter": [
				"prettier",
				{
					"language_server": { "name": "biome" }
				}
			]
		}
	}
}

Configure Prettier to ignore frontmatter formatting in .prettierrc.mjs:

/** @type {import("prettier").Config} */

export default {
	plugins: ["prettier-plugin-astro"],
	overrides: [
		{
			files: "*.astro",
			options: {
				parser: "astro",
				astroSkipFrontmatter: true,
			},
		},
	],
};