用 Biome 替代 ESLint 和 Prettier

简介

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/

简单教程

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

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

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

2. 安装 VS Code 插件
3. 在你的项目的根目录下，找到配置文件 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": {
      "semicolons": "always",
      "quoteStyle": "single",
      "trailingCommas": "none",
      "arrowParentheses": "always"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "style": {
        "noVar": "error",
        "useBlockStatements": "error",
        "useConst": "error",
        "useFilenamingConvention": {
          "level": "error",
          "options": {
            "strictCase": true,
            "requireAscii": true,
            "filenameCases": ["PascalCase"]
          }
        },
        "useNamingConvention": {
          "level": "error",
          "options": {
            "strictCase": true,
            "requireAscii": true,
            "conventions": [
              {
                "selector": { "kind": "const", "scope": "global" },
                "formats": ["CONSTANT_CASE"]
              }
            ]
          }
        }
      },
      "performance": {
        "noReExportAll": "warn"
      },
      "suspicious": {
        "noDoubleEquals": "error",
        "noDuplicateAtImportRules": "error"
      },
      "complexity": {
        "noExcessiveCognitiveComplexity": "error"
      },
      "correctness": {
        "noUnusedImports": "warn"
      }
    }
  }
}

含注释版

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", // 指定 Biome 配置文件的 JSON Schema，用于验证配置文件的结构和内容
  "vcs": {
    "enabled": false, // 禁用版本控制系统（VCS）集成
    "clientKind": "git", // 设置 VCS 客户端类型为 Git
    "useIgnoreFile": false // 禁用使用 Git 忽略文件
  },
  "files": {
    "ignore": ["dist/*", "node_modules/*", ".vscode/*"], // 忽略指定的文件和文件夹
    "ignoreUnknown": true // 忽略未知文件类型
  },
  "organizeImports": {
    "enabled": false // 禁用自动导入排序功能
  },
  "formatter": {
    "enabled": true, // 启用代码格式化功能
    "indentStyle": "space", // 设置缩进样式为空格
    "indentWidth": 2, // 设置缩进宽度为 2 个空格
    "lineWidth": 80, // 设置每行最大宽度为 80 个字符
    "lineEnding": "lf", // 设置行结束符为 LF（换行符）
    "bracketSpacing": true // 在对象字面量的大括号之间添加空格
  },
  "javascript": {
    "formatter": {
      "semicolons": "always", // 始终在语句末尾添加分号
      "quoteStyle": "single", // 使用单引号表示字符串
      "trailingCommas": "none", // 不添加尾随逗号
      "arrowParentheses": "always" // 始终在箭头函数的参数周围添加括号
    }
  },
  "linter": {
    "enabled": true, // 启用代码检查功能
    "rules": {
      "style": {
        "noVar": "error", // 禁止使用 var 声明变量
        "useBlockStatements": "error", // 强制使用块级语句（即：不能省略花括号，比如if只有一句）
        "useConst": "error", // 强制使用 const 声明常量（针对代码中只用了一次的变量）
        "useFilenamingConvention": {
          "level": "error", // 设置文件命名约定规则的诊断级别为错误
          "options": {
            "strictCase": true, // 强制严格的大小写规则，true是禁止连续大写，反之
            "requireAscii": true, // 强制文件名使用 ASCII 字符，比如：无法使用中文命名
            "filenameCases": ["PascalCase"] // 强制文件名使用 PascalCase 命名风格
          }
        },
        "useNamingConvention": {
          "level": "error", // 设置命名约定规则的诊断级别为错误
          "options": {
            "strictCase": true, // 强制严格的大小写规则，true是禁止连续大写，反之
            "requireAscii": true, // 强制使用 ASCII 字符，比如：无法使用中文命名
            "conventions": [
              {
                "selector": { "kind": "const", "scope": "global" }, // 对于 const，在全局范围内（强制全局常量使用 CONSTANT_CASE 命名风格）
                "formats": ["CONSTANT_CASE"] // 强制全局常量使用 CONSTANT_CASE 命名风格
              }
            ]
          }
        }
      },
      "performance": {
        "noReExportAll": "warn" // 禁止导出所有内容，降低资源消耗，比如 import *
      },
      "suspicious": {
        "noDoubleEquals": "error", // 禁止使用双等号（==）进行比较，只能用三等号 (===)，null除外
        "noDuplicateAtImportRules": "error" // 禁止在导入规则中出现重复的 import 语句
      },
      "complexity": {
        "noExcessiveCognitiveComplexity": "error" // 禁止过高的认知复杂度，比如嵌套超过15个if-else语句
      },
      "correctness": {
        "noUnusedImports": "warn" // 禁止存在未使用的导入，即：不能导入后不用
      }
    }
  }
}