There's an Astro extension for VS Code that provides syntax highlighting, completion and emmet support, but as of April 2022 it doesn't support auto-formatting.
There's a prettier plugin for Astro. We can install that and then configure VS Code to run Prettier when we save a file.
Let's start by installing prettier
and the Astro plugin into our project:
npm install -D prettier prettier-plugin-astro
We'll also add a custom script that will let us format all the files in the project at once. Add this format command to the "scripts" section of your package.json
file:
"scripts": {
"format": "prettier --write \"src/**/*.astro\""
}
You can run that to test your prettier
installation, like this:
npm run format
There are two stages to setting this up:
- Configuring the "Format Document" command (i.e. telling VS Code how to format a
.astro
file), and - Enabling format on save (i.e. telling VS Code when to run the formatter).
The only way to associate a file extension with a formatter in VS Code is through an extension. Unfortunately the Astro extension doesn't do this (yet; hopefully it will at some point).
Luckily, we can use the Custom Local Formatters extension in the meantime. Follow these steps:
- Install the extension
- Open your settings panel (Ctrl + , on Windows and Linux, Cmd + , on Mac) and search for "customlocal" (you should see "Custom Local Formatters: Formatters" in the search results)
- Click the "Edit in settings.json" link
- Set your
customLocalFormatters.formatters
setting to this:
"customLocalFormatters.formatters": [
{
"command": "npx prettier --parser astro",
"languages": ["astro"]
}
]
- Open a
.astro
file and run the Format Document command. You can find it in the command palette, or run it with Ctrl + Shift + i (replace Ctrl with Cmd on Mac).
That should be it. When you run the format document for the first time VS Code may prompt you to configure a formatter, prompting you to choose from a list. If it does, choose "jkillian.custom-local-formatters".
That setting will appear in your settings.json
file like this:
"[astro]": {
"editor.defaultFormatter": "jkillian.custom-local-formatters"
}
This is pretty straightforward.
First, we'll instruct VS Code to run Format Document every time we save a file.
- Re-open your VS Code settings (Ctrl + , on Windows and Linux, Cmd + , on Mac)
- Search for "format on save"
- You'll find a checkbox that you can check/un-check — check it
If you try saving a .astro
file you should now find that it gets reformatted automatically.
Sometimes, format on save isn't really what you want, particularly if you're working on a project where nobody else is using prettier.
For the icing on the cake, let's tell VS Code that it should only reformat a file on save when we're working on projects where Prettier is configured.
Search the settings panel for "prettier config". Make sure the "Prettier: Require Config" setting is checked.
Now we just need to create a prettier config file in projects where we want to use it. The config file is called .prettierrc
(note the leading .
which hides the file on Mac and Linux).
The format is JSON, so we can just put an empty JSON object in the file. I'll leave exactly how you create that file to you (the easiest approach varies from operating system to operating system), but on Mac and Linux, this would do it:
echo "{}" > .prettierrc