Setting Up Prettier and ESLint in Astro

1 February 2022

In this guide, I will provide instructions on setting up linters in your Astro project. Specifically, we will look at Prettier and ESLint.

Prettier

First, you’ll need to install Prettier itself:

npm i prettier

Then, you’ll need to create a configuration. This is not required since all configuration in Prettier is optional, but you will probably want to specify things like tab width and use of string quotes.

After configuring Prettier, let’s install an Astro plugin:

npm i prettier-plugin-astro

In Prettier, plugins are enabled automatically, so no configuration is required.

Now, you can run npx prettier . in your project directly, and Prettier will output formatted code. You can also run npx prettier -c . to check the files without printing the output (useful for CI) and npx prettier -w . to fix all found issues (this will overwrite your code).

You can also define a scope in which Prettier runs by specifying a glob pattern. For example, you can run npx prettier "src/**/*.{css,astro}" to run Prettier only for Astro and CSS files in your source directory.

ESLint

So far, there is no ESLint plugin available for Astro. You might still want to set up ESLint if you want to lint other files (e.g. JS) in your project.

If you use any frontend framework with Astro, you may also want to install framework-specific ESLint plugins. For example, if you use Vue, there is eslint-plugin-vue package that adds Vue-related checks.

Other than that, configuring ESLint in Astro projects works the same way as in other projects. You might want to check my project template ↗ which has an example of ESLint configuration.