Zenn
Open1

Astroの知見をまとめる

Prettier
Astro
MonoMono
npm create astro@latest

Astroをインストールした際に、自動作成されたコンポーネントはタブのインデントが結構深いので、個人的にはもう少し浅くしたい

Prettierをインストールしてスクリプトを実行したが、*.astroファイルのみにだけ適応されない

$ npm run format

> proper-parallax@0.0.1 format
> prettier --write "src/**/*.{js,jsx,ts,tsx,scss,astro}"

[error] No parser could be inferred for file ".../src/components/BaseHead.astro".
[error] No parser could be inferred for file ".../components/Footer.astro".
[error] No parser could be inferred for file ".../src/components/FormattedDate.astro".
[error] No parser could be inferred for file ".../src/components/Header.astro".
[error] No parser could be inferred for file ".../src/components/HeaderLink.astro".
src/consts.ts 242ms (unchanged)
src/content/config.ts 16ms (unchanged)
src/env.d.ts 3ms (unchanged)
：
[error] No files matching the pattern were found: "astro".

Astroは日本語ドキュメントがあり、「エディタのセットアップ」を確認してみるとastro用のプラグインがあるのでインストールして.prettierrcに追加してみる

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
  {
    "files": "*.astro",
    "options": {
      "parser": "astro"
      }
    }
  ]
}

できた 🎉

$ npm run format

> proper-parallax@0.0.1 format
> prettier --write "src/**/*.{js,jsx,ts,tsx,scss,astro}"

src/components/BaseHead.astro 310ms
src/components/Footer.astro 114ms
src/components/FormattedDate.astro 11ms
src/components/Header.astro 68ms
src/components/HeaderLink.astro 14ms
：