ESLint, Prettier, and Husky for an Astro Site
Original post: ESLint, Prettier, and Husky for an Astro Site Series: Part of How this blog was built — a series of posts on every decision that shaped this site. Code quality tooling should disappear into the background. The point is not to spend time thinking about ESLint or Prettier. The point is to have Astro components, TypeScript, Netlify functions, and utility scripts all follow the same…
ESLint, Prettier, and Husky are essential tools for maintaining code quality and consistency in an Astro website. The setup combines these tools to ensure that code follows the same rules across various environments, including the editor, pre-commit hook, local commands, and GitHub Actions CI. This approach aims to minimize ceremony and focus on the actual components, TypeScript, Netlify functions, and utility scripts.
The key components of the setup include:
1. ESLint for code-quality rules.
2. Prettier for formatting the entire repository consistently.
3. Husky to install a pre-commit hook, which runs linting checks before each commit.
4. lint-staged to ensure the pre-commit hook only touches staged files.
5. EditorConfig to maintain basic whitespace rules consistently, even before Prettier runs.
The required dependencies in the package.json file include:
- @eslint/js ^10.0.1
- @typescript-eslint/parser ^8.68.0
- eslint ^10.9.1
- eslint-config-prettier ^10.1.8
- eslint-plugin-astro ^1.7.0
- globals ^17.11.0
- husky ^9.1.7
- lint-staged ^16.4.0
- prettier ^3.9.6
- prettier-plugin-astro ^0.14.1
- typescript-eslint ^8.68.0
Notably, Astro needs both ESLint support and a Prettier plugin to properly understand the .astro files that make up most of the UI. The setup uses ESLint's flat configuration format, which is the current standard, instead of the older .eslintrc format.
The npm scripts defined in the project enable various commands for local development, quick fixes, formatting checks, and CI/build verification:
- `lint`: Runs ESLint on all JavaScript, TypeScript, and other relevant files.
- `lint:fix`: Performs a safe first pass for auto-fixable issues using Pnpm lint.
- `format`: Performs a fast read-only check of the code to ensure it adheres to the formatting rules, similar to `lint`.
- `format:fix`: Normalizes the repository by formatting all files, mirroring the functionality of `lint:fix`.
- `prepare`: Ensures Husky is installed when running `pnpm install`.
Once these configurations are in place, the CI process can use the same checks that developers run locally, ensuring consistent code quality throughout the development workflow.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
This story
This is one outlet's version. Read the fullest account.
