🚀

Astro + Biome (+Prettier) で手軽に個人サイトを作っていくぞ！

2024/10/12に公開

Prettier

Astro

Biome

tech

ESLint と Prettier の初期セットアップが毎回面倒くさいので、設定が簡単という噂の Biome に手を出してみる。
あまりややこしいプロダクトでいきなり採用するのも難しいので Astro で簡単な個人サイトを作る想定。

Node.js

入ってる

$ node -v
v20.18.0

Astro

入れる

npm create astro@latest

オプションは TypeScript を Strictest にするだけで、あとはデフォルト。

   dir   Where should we create your new project?
         ./

  tmpl   How would you like to start your new project?
         Include sample files

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strictest

  deps   Install dependencies?
         Yes

立ち上げる

npm run dev

動くことを確認

http://localhost:4321/

VSCode 用の設定

.vscode/extensions.json に astro-build.astro-vscode が自動的に入っている

このプラグインにはフォーマッターがついていて Formatting (powered by Prettier and prettier-plugin-astro) と競合しそうな気もするが、とりあえず競合したときに無効化しようと思う。

Biome

入れる

Even a patch release can result in slightly different behavior. とか書かれているけれども、一人で使うだけなのでバージョン固定はしないで --save-exact なしで

npm install -D @biomejs/biome

設定

Biome 1.6 時点では Astro は partial support とされており完全サポートではない模様。

部分サポートだったのは意外だったが、とりあえず設定を進めていく。

設定の JSON にコメントを書きたいので --jsonc のオプションだけつける。

npx @biomejs/biome init --jsonc

デフォルトではインデントが tab、タブ幅が 2、行幅が 80 となっている。
タブインデントは久しぶりだけれどもせっかくなのでデフォルトを尊重して使ってみる。

https://biomejs.dev/ja/formatter/

Astro 用の設定は .astro ファイルを静的解析する際、誤検知を避けるために javascript.globals に "Astro" を追加する必要があります。 とのことなので追加する。

  "javascript": {
    "globals": ["Astro"]
  }

VSCode 用の設定

biomejs.biome をインストールして .vscode/extensions.json にも書いておく。

保存時の自動フォーマットを有効にしたいので .vscode/settings.json にこんな感じの設定を書く。（なんか設定が重複している気もするけど）

{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "biomejs.biome",
	"editor.codeActionsOnSave": {
		"quickfix.biome": "explicit",
		"source.organizeImports.biome": "explicit"
	}
}

フォーマット

既存のファイルを一括フォーマットする。

npx @biomejs/biome check --write ./

Biome の部分サポート

おそらく Astro ファイルの HTML 部分のフォーマットには未対応で、インデントが tab, space で揺れていたりしても自動で直してくれない
TypeScript 部分は自動フォーマットが効く
CSS の対応状況は「進行中」とあるが、最低限のフォーマットは効かせてくる

Prettier

Astro ファイルを編集しているとフォーマットが効かないのがきついので Prettier も入れてみる。

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

.vscode/settings.json で Astro ファイルだけフォーマッターを変える。

	"[astro]": {
		"editor.defaultFormatter": "astro-build.astro-vscode"
	},

.prettierrc は Biome に寄せる。

{
	"useTabs": true,
	"tabWidth": 2,
	"semi": true,
	"singleQuote": false
}

完了

あとはサイトを作っていくだけ！

Node.js

Astro

VSCode 用の設定

Biome

設定

VSCode 用の設定

フォーマット

Biome の部分サポート

Prettier

完了

Discussion