Closed2ヶ月前にクローズ21

TypeScript + Biome + Bun + Zod + Vitest

TypeScript + Biome + Bun + Zod + Vitestを組み合わせたBoilerplateの構築を検討してみる。
プログラミング言語：TypeScript@5.6.2

静的解析ツール：Biome@1.8.3

JavaScriptラインタイム：Bun@1.1.27

スキーマバリデーション：Zod@3.23.8

テストフレームワーク：Vitest@2.0.5
後でバージョンとかは整理する。

まずは、JavaScriptラインタイムにNodeの代わりにBunを利用できるようにします。
brewで今回はインストール

ログインできたことを確認

$ bun
Bun is a fast JavaScript runtime, package manager, bundler, and test runner. (1.1.27+267afa293)

Usage: bun <command> [...flags] [...args]

Commands:
  run       ./my-script.ts       Execute a file with Bun
            lint                 Run a package.json script
  test                           Run unit tests with Bun
  x         eslint               Execute a package binary (CLI), installing if needed (bunx)
  repl                           Start a REPL session with Bun
  exec                           Run a shell script directly with Bun

  install                        Install dependencies for a package.json (bun i)
  add       react                Add a dependency to package.json (bun a)
  remove    jquery               Remove a dependency from package.json (bun rm)
  update    lyra                 Update outdated dependencies
  outdated                       Display latest versions of outdated dependencies
  pack                           Archive the current workspace package
  link      [<package>]          Register or link a local npm package
  unlink                         Unregister a local npm package
  patch <pkg>                    Prepare a package for patching
  pm <subcommand>                Additional package management utilities

  build     ./a.ts ./b.jsx       Bundle TypeScript & JavaScript into a single file

  init                           Start an empty Bun project from a blank template
  create    vite                 Create a new project from a template (bun c)
  upgrade                        Upgrade to latest version of Bun.
  <command> --help               Print help text for command.

Learn more about Bun:            https://bun.sh/docs
Join our Discord community:      https://bun.sh/discord

bun init にてプロジェクトを作成

bun init
bun init helps you get started with a minimal project and tries to guess sensible defaults. Press anytime to quit

package name (your project name):
entry point (index.ts): src/index.ts

Done! A package.json file was saved in the current directory.
 + src/index.ts
 + .gitignore
 + tsconfig.json (for editor auto-complete)
 + README.md

To get started, run:
  bun run src/index.ts

プロジェクトが作成されたことを確認

tree -I node_modules -L 2 ./
./
├── README.md
├── bun.lockb
├── package.json
├── src
│   └── index.ts
└── tsconfig.json

新規で.gitignoreやbun.lockbなど必要なファイルが生成されている。

tsconfig.json

{
  "compilerOptions": {
    // Enable latest features
    "lib": ["ESNext", "DOM"],
    "target": "ESNext",
    "module": "ESNext",
    "moduleDetection": "force",
    "jsx": "react-jsx",
    "allowJs": true,

    // Bundler mode
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,

    // Best practices
    "strict": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": true,

    // Some stricter flags (disabled by default)
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noPropertyAccessFromIndexSignature": false
  }
}

とりあえず実行してみる
実行に成功しました。

Bun src/index.ts
Hello via Bun!

src/index.ts

console.log("Hello via Bun!");

メモ
公式にあったtsconfig.jsonについてはBunのベストプラクティスとのこと。

そのまま利用する。

Bun init でインストールしたTypeScriptのバージョンが5.0.0だったので、最新にする。

bun add typescript@latest
bun add v1.1.27 (267afa29)

installed typescript@5.6.2 with binaries:
 - tsc
 - tsserver

[142.00ms] done
`` 

package.jsonのtypescriptのバージョンが ^5.6.2 になっていることを確認
バージョンが変更されても困るので^だけ削除して5.6.2固定に変更

Biomeをインストールする。
公式を確認してbunを利用したインストール方法を確認する。

VSCodeでBiomeを検索し拡張機能をインストールします。

biome.jsonを作成するために bunx biome initを実行

bunx biome init

Welcome to Biome! Let's get you started...

Files created

  - biome.json
    Your project configuration. See https://biomejs.dev/reference/configuration

Next Steps

  1. Setup an editor extension
     Get live errors as you type and format when you save.
     Learn more at https://biomejs.dev/guides/integrate-in-editor/

  2. Try a command
     biome check  checks formatting, import sorting, and lint rules.
     biome --help displays the available commands.

  3. Migrate from ESLint and Prettier
     biome migrate eslint   migrates your ESLint configuration to Biome.
     biome migrate prettier migrates your Prettier configuration to Biome.

  4. Read the documentation
     Find guides and documentation at https://biomejs.dev/guides/getting-started/

  5. Get involved with the community
     Ask questions and contribute on GitHub: https://github.com/biomejs/biome
     Seek for help on Discord: https://discord.gg/BypW39g6Yc

biome.jsonが生成された。

{
	"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}

Biomeのデフォルトの設定はこれとのこと
インデントがtabなのがちょっとなという感じ。spaceがいいんじゃないと思うけど。

{
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "ignore": [],
    "attributePosition": "auto",
    "indentStyle": "tab",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "arrowParentheses":"always",
      "bracketSameLine": false,
      "bracketSpacing": true,
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded",
      "semicolons": "always",
      "trailingCommas": "all"
    }
  },
  "json": {
    "formatter": {
      "trailingCommas": "none"
    }
  }
}

BiomeとPrettier/ESLintとの互換性については乗り換えしやすいように方法が用意されている。
あとはお好みに合わせて設定をしていくという感じ。

airbnbのテンプレートをよく利用していたのでこのあたりわかるような感じで移行できるといいけど。
いまは。後回し。

zodを導入

import { z } from "zod";

const schema = z.coerce.string();
console.log(schema.parse("tuna")); // => "tuna"
console.log(schema.parse(12)); // => "12"
console.log(schema.parse(12)); // => "12"
console.log(schema.parse(true)); // => "true"
console.log(schema.parse(undefined)); // => "undefined"
console.log(schema.parse(null)); // => "null"

bun src/index.ts
tuna
12
12
true
undefined
null

無事に使えたのでOK。簡単

Vitestを導入する。
ちゃんと公式にbunの選択があるのがいい。他もそうだけど。

無事にインストール完了

bun add -D vitest
bun add v1.1.27 (267afa29)

installed vitest@2.0.5 with binaries:
 - vitest

63 packages installed [2.07s]

バージョンを固定にするために

^2.0.5 → 2.0.5に修正

Zodもバージョンを固定するために

^3.23.8 → 3.23.8に修正

Vitestの動作検証

// sum.ts
import { z } from 'zod'

// 引数のスキーマを定義します。数値であることを検証します。
const numberSchema = z.number();

export function sum(a: number, b: number): number {
  // 引数が数値であるかを検証します
  numberSchema.parse(a);
  numberSchema.parse(b);

  // 検証が成功した場合、合計を計算します
  return a + b;
}

// sum.test.js
import { expect, test } from 'vitest'
import { sum } from './sum.js'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

動作確認OK

 RERUN  src/sum.test.ts x10

 ✓ src/sum.test.ts (1)
   ✓ adds 1 + 2 to equal 3

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  19:28:18
   Duration  7ms


 PASS  Waiting for file changes...
       press h to show help, press q to quit

Biomeの設定をVSCodeの設定を追加

設定が必要な理由などはこちら参照に。

.vscode/setting.json

{
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit"
  }
}

.vscode/extensions.json

{
  "recommendations": ["biomejs.biome"]
}

推奨する設定があるので一応情報を残す

このスクラップは2ヶ月前にクローズされました