I'm using VS Code, and have eslint & prettier set up in my project. They work fine on .vue files, but not .astro files. What am I missing in my config?
#How to get ESLint & Prettier working with Astro
zenith umbra
west deltaBOT
Hi @zenith umbra. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To enable ESLint and Prettier to work with .astro files in your VS Code setup, you need to install specific plugins.
For ESLint, you can use a community-maintained plugin for Astro support. You can find more information on how to install and set it up in the project's User Guide (https://ota-meshi.github.io/eslint-plugin-astro/user-guide/).
For Prettier, you need to install the official Astro Prettier plugin. This plugin allows you to format .astro files outside of the editor or inside editors that don’t support Astro's editor tooling. Here's how you can install it:
npm install --save-dev prettier prettier-plugin-astro
After installing, Prettier will automatically detect the plugin and use it to process .astro files when you run it:
prettier --write .
If you're using pnpm, you need to add the following parameter when running Prettier:
prettier --write . --plugin=prettier-plugin-astro
You can find more information about the Prettier plugin's supported options and how to set up Prettier inside VS Code in the Prettier plugin’s README (https://github.com/withastro/prettier-plugin-astro/blob/main/README.md).
Remember to also install the Astro VS Code Extension (https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) for an improved Astro developer experience.
Sources:
- Astro Documentation: Editor Setup - ESLint (https://docs.astro.build/en/editor-setup/)
- Astro Documentation: Editor Setup - Prettier (https://docs.astro.build/en/editor-setup/)