📌

ぼくの考えるさいきょうのSvelte開発環境

2024/05/13に公開

ESLint

2024年4月現時点でのSvelte開発環境をボイラープレートにしようと思いまして。
手順書も兼ねているので長文になる予定です。
成果物はこちら↓

仕様

Bun
SvelteKit
Tailwind CSS
Autoprefixer
ESLint
- antfu/eslint-config: Anthony's ESLint config preset
StyleLint
Husky + staged
MSW
❌ Prettier 使わない
npm, yarn, pnpm の無効化
VS Code 対応

Bun + SvelteKit のセットアップ

次のステップもまとめて構築するコマンド

コミュニティによるユーティリティsvelte-addを利用して次セクションまで自動でインストールできます。

npm create @svelte-add/kit@latest my-svelte-boilerplate -- --package-manager=bun --with typescript+postcss+postcss-autoprefixer+tailwindcss+tailwindcss-forms+tailwindcss-typography

途中にある--はタイポじゃなく必要です。
Link: svelte-add/svelte-add: Easily add integrations and other functionality to Svelte apps

ちなみにこのコマンドをnpmでなくbunで実行すると途中で止まりました。バグっぽいです。

アプリ名はmy-svelte-boilerplateとします。

bun create svelte@latest my-svelte-boilerplate

Outputs

create-svelte version 6.0.10

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting
│
└  Your project is ready!

✔ Typescript
  Inside Svelte components, use <script lang="ts">

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

Next steps:
  1: cd my-svelte-boilerplate
  2: bun install
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: bun run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

参考

Autoprefixer, Tailwindを自動インストール

一部のパッケージはsvelte-addを利用すると簡単にインストールできます。bunx svelte-addでautoprefixer, tailwind, eslintをインストールしていきます。

$ bunx svelte-add@latest postcss --postcss-autoprefixer

PostCSS
 ✅ already set up! skipping.
Create or find an existing issue at https://github.com/svelte-add/svelte-add/issues if this is wrong.

Run bun install to install new dependencies, and then reload your IDE before starting your app.

$ bunx svelte-add@latest tailwindcss

PostCSS
 ✅ successfully set up and repaired (it looks like it was in a broken setup before this command was run)!
Create or find an existing issue at https://github.com/svelte-add/svelte-add/issues if this is wrong.

Tailwind CSS
 ✅ successfully set up and repaired (it looks like it was in a broken setup before this command was run)!
Create or find an existing issue at https://github.com/svelte-add/svelte-add/issues if this is wrong.

bun installを実行すると新しい依存パッケージがインストールされます。

ESLint Config

最近はantfu/eslint-configがお気に入りなので、eslintとこのコンフィグも入れます。次のコマンドでダイアログが出てきます。

bunx @antfu/eslint-config@latest

ダイアログにて使用フレームワークを選ぶのでsvelteを選択。Flat configのeslint.config.jsが作られるので、.eslintignore, .eslintrc.cjsは手動で削除します。そしてbun installで依存関係をインストール。

その後eslint.config.jsは好きにカスタムしましょう！

私の`eslint.config.js`

こだわりは'style/key-spacing'です！

import antfu from '@antfu/eslint-config'

export default antfu(
	{
		stylistic: {
			indent: 'tab',
			quotes: 'single',
		},
		typescript: true,
		svelte:     true,
        ignores:   [...],
	},
	{
		files: ['*.svelte'],
		rules: {
			'svelte/indent': [
				'error',
				{ indent: 'tab', alignAttributesVertically: true },
			],
			'svelte/block-lang': [
				'error',
				{
					enforceScriptPresent: true,
					enforceStylePresent:  false,
					script:               ['ts'],
					style:                ['scss', null],
				},
			],
			'svelte/html-self-closing': [
				'error',
				'all',
			],
			'svelte/sort-attributes': 'error',
		},
	},
	{
		rules: {
			'style/key-spacing': [
				'error',
				{
					align: 'value',
				},
			],
			'style/no-multi-spaces': [
				'error',
				{
					exceptions: {
						ArrayExpression:  true,
						TSTypeAnnotation: true,
					},
				},
			],
			'style/type-annotation-spacing': [
				'error',
				{ before: false, after: true },

			],
			'prefer-const': 'off',
		},
	},

)

一度 bun run eslint --fix .を走らせておきましょう。

Stylelint

stylelintとルールを追加します。

bun add -D stylelint stylelint-config-standard stylelint-config-html stylelint-config-recess-order stylelint-declaration-block-no-ignored-properties

.stylelintrc.yamlを作成します。

私のコンフィグ

extends:
  - stylelint-config-html
  - stylelint-config-recess-order
  - stylelint-declaration-block-no-ignored-properties

Husky + staged

以前にまとめた記事を参考にしました。今回チェックするとhuskyのドキュメントにbunの記述が追加されていましたね。

MSW

モックで使用するMSWもインストールしておきます。こちらも以前に記事にしたものを参考にしました。改めて読むと筋が通っていないところがあるので修正しないとな。

今回は

bun add --dev msw @iodigital/vite-plugin-mswをパッケージをインストール
src/mockに３つのファイル作成：handlers.ts, browsers.ts, servers.ts
フックを設定 src/以下にhooks.client.ts, hooks.server.ts
vite.config.tsのプラグインにvite-plugin-mswを追加

エディターの準備

VS Codeをbunで便利に使えるようにカスタムします。まず設定を書きます。.vscode/setting.jsonを作成し、

setting.json

{
	"npm.packageManager": "bun"
}

値は"bun"あるいは"auto"で。
これで、サイドバーのNPM SCRIPTSからタスクを実行する時にbunが使えます。

なお、ユーザー設定で "npm.packageManager": "auto"以外ではうまく動作しませんでした。自分の環境では最初"yarn"になっており苦戦しました。ユーザー設定の方が優先されるのか？

また、dev serverを起動するコマンドbun run devはデフォルトでNodeを使用します。bunを使用するにはbun --bun run devとbunフラグを追加する必要があります。これを実行しやすいように.vscode/tasks.jsonを書きます。

tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "shell",
			"command": "bun",
			"args": [
				"--bun",
				"run",
				"dev"
			],
			"label": "bun: dev",
			"detail": "bun run dev using bun runtime",
			"group": "test",
			"problemMatcher": [],
			"presentation": {
				"echo": true,
				"reveal": "always",
				"focus": false,
				"panel": "shared",
				"showReuseMessage": true,
				"clear": false
			}
		}
	]
}

まとめ

以上でテンプレができました。このリポジトリをクローンしてbun installすると使えます。

ここまで長々と書いてきました。これで今後プロジェクトを始めるとき楽になると思います。依存先のアップデートや自分の考えが変わればアップデートしていこうと思います。

ライセンスはMITにしているので、ご自由に使ってみてください。改善点があればコメントやGithubなどでお待ちしています。