An Astro starter project set up with pnpm, Prettier, ESLint, Stylelint, autoprefixer, cssnano, Husky, and Astro Sitemap, plus sensible VS Code defaults and recommended workspace extensions.
- Click "Use this template" and create a new repository.
- In
astro.config.mjs
, updatesite
fromhttps://mysite.com
to your site URL. - In
src/layouts/BaseLayout.astro
, updatesiteName
to your site name. - Good to go!
Basics
- A blank Astro project with TypeScript enabled
pnpm
package management plusonly-allow pnpm
- Import aliases of
src
using~
to enable usingimport { Component } from '~/components'
- Basic meta tags and open graph tags in
layouts/BaseLayout.astro
initial-scale=1
onviewport
to prevent default mobile zoom-out- Site name displays after the page title (
Page Title · Site Name
) on pages other than the main index - smartypants smart quotes for page titles and descriptions
Styles
scss
for nested style declarations until broader native support- PostCSS
autoprefixer
for browser prefixing andcssnano
for CSS minification - Josh Comeau's reset.css
Prettier
- Auto code formatting with Prettier and prettier-plugin-astro
- Auto import sorting with prettier-plugin-astro-organize-imports
Linting
.astro
,.js
,.jsx
,.json
,.ts
, and.tsx
linting with ESLint and eslint-plugin-astro- Accessibility checks with eslint-plugin-jsx-a11y
- Style linting with Stylelint and stylelint-config-astro
VS Code
- Format on save and on paste
- Default formatter set to Astro
- Workplace recommendations for Astro, axe Accessibility Linter, and ESLint
Package.json scripts
lint
— Run ESLintlint:fix
— Run ESLint and fix errorsstylelint
— Run Stylelintstylelint:fix
— Run Stylelint and fix errors
Husky
astro check
on pre-commit
Dependabot
- Weekly dependency update checks
- All GitHub Action updates grouped in a single pull request
- All patch or minor package updates grouped in a single pull request
- All major package updates created as individual pull requests
Config
- Link prefetching enabled
- Dev toolbar disabled
- Astro Sitemap installed