前言

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.4.14/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"
      },
     "security": {
        "noBlankTarget": "off"
      }
    }
  }
}

参考

一个被拒绝的PR

其它

短路径

vite.config.ts

export default defineConfig({
  resolve: {
   // ...
    alias: {
      '@': '/src'
    }
  }
 // ...
});

tsconfig.app.json

{
  "compilerOptions": {
    //...
     /* sort paths */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
 // ...
}