How to setup ESLint and Prettier in your Astro projects

I recently went through the process of setting up ESLint in my astro templates, in addition to prettier which I was already using. Unfortunately, I found the information available online to be lacking, so I decided to write this post to help others going through the same process.

INFO

I always use tailwindcss, so that setup is included here as well.

Prerequisites

You’ll need to do this setup in your individual project, so you’ll need an Astro project to start with. If you don’t already have one, you can create one with npm create astro@latest.

Prettier setup

Prettier is pretty easy to set up. First, install the appropriate packages:

npm install --save-dev prettier prettier-plugin-astro prettier-plugin-tailwindcss

Now you can create the prettier config file at the base of your project. There are various filename options you can use here, but I like to use .prettierrc.mjs.

/** @type {import("prettier").Config} */
export default {
  printWidth: 100,
  useTabs: true,
  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  overrides: [
    {
      files: ["**/*.astro"],
      options: {
        parser: "astro",
      },
    },
  ],
};

TIP

These are the settings I like, but many options are available and can be found here.

.prettierignore

You’ll also likely want to create a .prettierignore file of items not to pretty-ify. Here’s a good starting point. You’ll likely also want to add folders generated by your hosting provider, such as the .netlify folder.

# Ignore artifacts:
dist
.astro

# Standard
**/.git
**/.svn
**/.hg
**/node_modules

# lockfiles
pnpm-lock.yaml
yarn.lock
package-lock.json

ESLint setup

ESLint was a little more involved to setup, and unfortunately involves installing a bunch of packages. This is a basic setup which you can always adjust and add new features, or remove ones suggested here.

First install the necessary packages:

npm install --save-dev eslint eslint-plugin-astro eslint-plugin-prettier eslint-plugin-jsx-a11y @eslint/js globals typescript-eslint

Now you can create the eslint config file eslint.config.mjs at the base of your project. These are the settings I currently use.

INFO

For the typescript setup, you may need to create a tsconfig.json file at the root of your project.

import { defineConfig } from "eslint/config";
import globals from "globals";
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import astro from "eslint-plugin-astro";
import prettier from "eslint-plugin-prettier";

// parsers
const tsParser = tseslint.parser;
const astroParser = astro.parser;

export default defineConfig([
  // Global configuration
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
  },

  // Base configs
  js.configs.recommended,
  tseslint.configs.recommended,

  // Prettier config
  {
    plugins: {
      prettier: prettier,
    },
    rules: {
      // disable warnings, since prettier should format on save
      "prettier/prettier": "off",
    },
  },

  // astro setup with a11y
  astro.configs.recommended,
  astro.configs["jsx-a11y-recommended"],
  {
    files: ["**/*.astro"],
    languageOptions: {
      parser: astroParser,
      parserOptions: {
        parser: tsParser,
        extraFileExtensions: [".astro"],
        sourceType: "module",
        ecmaVersion: "latest",
        project: "./tsconfig.json",
      },
    },
    rules: {
      "no-undef": "off", // Disable "not defined" errors for specific Astro types that are globally available (ImageMetadata)
      "@typescript-eslint/no-explicit-any": "off", // you may want this as it can get annoying
    },
  },

  // Ignore patterns
  {
    ignores: ["dist/**", "**/*.d.ts", ".github/"],
  },
]);

Production-ready Astro Templates

Templates with tons of features others leave out. I18n, CMS, animations, image optimization, SEO, and more.

View Free Themes

So, what now?

That’s it! You’ve added both prettier and eslint to your project. You can now use them to format your code and catch errors before they happen. Happy coding. 🚀

How to setup ESLint and Prettier in your Astro projects

Prerequisites

Prettier setup

.prettierignore

ESLint setup

Production-ready Astro Templates

So, what now?

C O S M I C