用 Biome 替代 ESLint 和 Prettier

原创

已于 2025-02-21 20:26:47 修改 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Biome

于 2025-02-19 22:40:07 首次发布

简介

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": {

最低0.47元/天解锁文章