创建项目
使用 vite 创建。
pnpm create vite@latest
选择 react 和 typescript。
pnpm install 安装依赖，pnpm run dev 启动项目：
卸载eslint，安装biome
由于 vite 初始化 react 项目只有eslint，不带有 prettier，又因为 eslint 和 prettier 容易冲突，干脆直接卸载 eslint，采用 biome。
先观察 package.json 文件，将带有 eslint 的依赖卸载掉，并且删除 eslint 配置文件。
然后安装 biome：pnpm add -D -E @biomejs/biome
并生成 biome.json 配置文件：pnpm exec biome init
保存文件自动格式化
vscode下载插件：Biome
并设置 settings：
{
"editor.defaultFormatter": "biomejs.biome",
"[javascript]": { "editor.formatOnSave": true },
"[typescript]": { "editor.formatOnSave": true },
"[javascriptreact]": { "editor.formatOnSave": true },
"[typescriptreact]": { "editor.formatOnSave": true }
}
测试是否起作用：
修改 biome.json 文件，在 javascript 的 formatter 块添加 "semicolons": "always"，意思是每条语句使用分号结尾。
"javascript": {
"formatter": {
"quoteStyle": "double",
"semicolons": "always"
}
},
当重新保存 tsx 文件的时候，自动添加分号结尾。
集成tailwindcss
1、安装依赖：pnpm add tailwindcss @tailwindcss/vite
2、vite.config.ts 文件配置 tailwindcss() 插件：
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
server: {
port: 3000, // 修改为其他端口
},
});
3、全局样式文件清空，只引入：@import "tailwindcss";
4、引入 tailwind 原子样式：<h1 className="text-3xl font-bold underline">Hello world!</h1>
5、启动项目，观察样式是否生效
