Skip to content

Instantly share code, notes, and snippets.

@gma
Last active April 26, 2022 11:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gma/a7999290c2d8a5a42aa425ae268e08b6 to your computer and use it in GitHub Desktop.
Save gma/a7999290c2d8a5a42aa425ae268e08b6 to your computer and use it in GitHub Desktop.
Configuring VS Code to format Astro files with Prettier

Configuring VS Code to format Astro files with Prettier

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.

Installing prettier

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

Auto-formatting in VS Code

There are two stages to setting this up:

  1. Configuring the "Format Document" command (i.e. telling VS Code how to format a .astro file), and
  2. Enabling format on save (i.e. telling VS Code when to run the formatter).

Configuring 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:

  1. Install the extension
  2. 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)
  3. Click the "Edit in settings.json" link
  4. Set your customLocalFormatters.formatters setting to this:
"customLocalFormatters.formatters": [
  {
    "command": "npx prettier --parser astro",
    "languages": ["astro"]
  }
]
  1. 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"
}

Enabling format on save

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment