当前位置：首页 > news >正文

vite使用biome

news 2026/5/2 15:20:54

前言

rsbuld创建的项目默认自动使用的就是 biome。
但是随着新版vite启用rolldown后，vite也不如rust的步伐。这个时候我又想用回vite了！

但是苦 eslint+pretter 组合久矣：需要的相关依赖包多、效率低、还有两者各种冲突规则！

移除不需要的

在新版的vite项目中，pretter已经被官方移除（Vite 团队在 2026 年执行的“工具链瘦身计划”和“Rust 化战略”的共同结果。默认模板的“去风格化”），因此我们只需要移除eslint相关即可！

npm uninstall eslint @eslint/js typescript-eslint eslint-plugin-react-hooks eslint-plugin-react-refresh

修改script

将 package.json 的

"scripts": {"dev": "vite","build": "tsc -b && vite build","preview": "vite preview""lint": "eslint .",
}

改为

"scripts": {"dev": "vite","build": "tsc -b && vite build","preview": "vite preview","lint": "biome lint .","lint:fix": "biome lint . --fix","format": "biome format .","format:check": "biome format . --check","biome":"biome check --write ."
},

其实对比发现只是改动 lint ,和新加了4个script（其实推荐新增的4个里，只要第4个就行）
代码质量：行使以前eslint的作用，lint和lint:fix，前者检查，后者检查顺带修复。
风格：行使以前pretter的能力，format:check和format，前者检查，后者检查顺带修复。
风格+代码质量：biome check --write . 先当医生（lint:fix）再当理发师（format）。运行这一个，它会把逻辑错误修了，顺便把头发也理顺了。这也是目前最推荐的做法。

需要注意的是，无论dev还是build时vite都不会帮你执行lint或format，需要你自己执行！

配置文件(可选)

删除 eslint.config.js 配置文件，新增 biome.json

{"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json","assist": {"actions": {"source": {"organizeImports": "on"}}},"vcs": {"enabled": true,"clientKind": "git","useIgnoreFile": true},"formatter": {"indentStyle": "space","lineWidth": 320},"javascript": {"formatter": {"quoteStyle": "single"}},"json": {"parser": {"allowComments": true,"allowTrailingCommas": true}},"css": {"parser": {"cssModules": true,"tailwindDirectives": true}},"linter": {"enabled": true,"rules": {"recommended": true,"a11y": {"recommended": false},"style": {"noNonNullAssertion": "off"}}}
}