用 Biome 替代 ESLint 和 Prettier

原创 2025-02-21 20:26:47 1.2k 阅读 AI写同款

code_stream

1238粉丝169篇原创

关注

Biome 实战：如何无缝迁移 ESLint 和 Prettier 配置本文详细介绍了如何将前端项目从ESLint和Prettier迁移到Biome这一更高效的代码检查和格式化工具。Biome凭借其Rust编写的优势，提供比ESLint+Prettier更快的运行速度和更简单的配置，特别适合大型项目。文章涵盖了迁移步骤、常见问题解决、工作流集成以及性能对比，帮助开发者顺利完成工具切换。阅读详情

AI摘要

博客介绍了 ESLint、Prettier 和 Biome 工具。ESLint 用于代码质量检查，Prettier 用于代码格式化，二者结合可自动美化和检查代码。Biome 集代码检查与美化于一体，性能高。对比发现，ESLint 和 Prettier 配置复杂但生态成熟，Biome 配置简单但生态待完善，还给出了 Biome 简单教程。

简介

ESLint 和 Prettier
ESLint：代码质量检查工具，确保代码风格一致与无错误
Prettier：代码格式化工具，自动美化代码布局
所以：ESLint + Prettier == 能自动美化代码、自动检查代码错误的工具

Biome
Biome：集代码检查、代码美化于一体的”高性能“的工具

对比

ESLint 和 Prettier 配置复杂，但生态成熟、对应资料多
（紧急补充：ESLint 团队在v8.53.0已经放弃代码风格相关规则，这意味着两者的冲突减少，配置复杂度会降低！此外，目前最新版本 ESLint v9 有重大更新）
Biome 配置相对简单、性能好，但生态尚未成熟、对应资料少、目前对 Vue 框架的支持度较低
（紧急补充：截至2025年2月19日，Biome 最新版本为 1.9.4）

官网

Biome 官网链接：https://biomejs.dev/

简单教程

注：这里只是简单演示，如果你的项目和下面不匹配，请前往官网查看详细的文档教程

在你的项目运行下面命令，安装 biome

npm install --save-dev --save-exact @biomejs/biome

安装 VS Code 插件
在你的项目的根目录下，找到配置文件 biome.json，根据你的需求修改文件内容即可（怎么修改？建议去官网查看配置属性。而对于比较懒的朋友，可参考我的个人开发规范，基本上常用的配置都在这里了，复制粘贴到你项目修改即可。另外，下面配有它的注释版，有看不懂的朋友，可以看看其注释）

无注释版

{
   
   
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
   
   
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {
   
   
    "ignore": ["dist/*", "node_modules/*", ".vscode/*"],
    "ignoreUnknown": true
  },
  "organizeImports": {
   
   
    "enabled": false
  },
  "formatter": {
   
   
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf",
    "bracketSpacing": true
  },
  "javascript": {
   
   
    "formatter": {