Viteで雑にフロントエンド開発する
Init
はじめに | Vite
code:sh
bun create vite
開発
biome
code:sh
bun install -D @biomejs/biome
bunx @biomejs/biome init
code:biome.json
{
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"style": {
"noNonNullAssertion": "off",
"noUselessElse": "off",
"useSelfClosingElements": "off"
},
"suspicious": {
"noExplicitAny": "off"
},
"a11y": {
"noSvgWithoutTitle": "off"
}
}
},
"javascript": {
"parser": {
"unsafeParameterDecoratorsEnabled": true
},
"formatter": {
"enabled": true,
"quoteStyle": "single",
"jsxQuoteStyle": "single",
"semicolons": "asNeeded",
"arrowParentheses": "asNeeded",
"indentWidth": 2,
"indentStyle": "space",
"lineWidth": 160,
"quoteProperties": "asNeeded"
}
},
"json": {
"parser": { "allowComments": true },
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 80
}
},
"files": {
"maxSize": 4194304
}
}
tailwind
Install Tailwind CSS with Vite - Tailwind CSSを参照
GitHub Pagesにデプロイする場合
code:sh
bun install -D gh-pages
ファイルにいくつか追加
code:vite.config.ts
export default defineConfig({
plugins: react(),
base: '/your-app-name/', // <- これを追加
..
})
code:package.json
"homepage": "https://your-account-name.github.io/your-app-name",
"scripts": {
...
"deploy": "gh-pages -d dist"
},
...
デプロイ
code:sh
bun run build
bun run deploy
GitHubのsettings > PagesのBuild and deploymentのbranchをgh-pagesの/(root)に変更する
関連
雑にReactアプリを作りたい時に使ってるもの
vite