JavaScript内核与高级编程之：`JavaScript` 的 `Biome`：其在代码格式化和 `linting` 中的作用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！今天咱们聊点新鲜玩意儿，一个据说能取代 ESLint、Prettier 和其他一堆工具的家伙：Biome。别害怕，不是生物课，纯粹是代码格式化和 linting 的神器。咱们一起看看它到底能干啥，怎么用，以及为什么值得你花时间了解它。

开场白：代码世界的“洁癖症”

在编写代码的过程中，我们都会遇到各种各样的问题，其中之一就是代码风格的不一致。有的用两个空格缩进，有的用四个；有的喜欢用单引号，有的偏爱双引号；有的喜欢在函数名后面加空格，有的觉得多余。这些看似微小的差异，积累起来就会让代码变得难以阅读和维护，就像一个房间里到处都是乱七八糟的东西。

所以，我们需要一些工具来帮我们整理代码，让它们看起来更加整洁、规范。这些工具就是代码格式化工具和 linting 工具。

代码格式化工具（比如 Prettier）：它们负责按照预定义的规则自动调整代码的格式，比如缩进、空格、换行等等，让代码看起来更加美观。
Linting 工具（比如 ESLint）：它们负责检查代码中潜在的错误和不规范的地方，比如未使用的变量、全局变量的使用、不安全的写法等等，帮助我们提高代码的质量。

以前，我们需要使用多个工具才能完成这些任务，配置起来也比较麻烦。但是，现在有了 Biome，它把格式化和 linting 的功能都集成到了一起，而且配置非常简单，使用起来非常方便。

Biome 的横空出世：一个全能选手

Biome 是一个由 Rome 团队开发的工具链，旨在提供统一的代码格式化、linting、编译和打包解决方案。它的目标是取代 Babel、ESLint、Prettier、webpack 和其他一系列前端工具。当然，目前 Biome 主要专注于格式化和 linting，编译和打包功能还在开发中。

Biome 的特点：

速度快： Biome 使用 Rust 编写，性能非常高，比 JavaScript 编写的工具快很多。
配置简单： Biome 的配置非常简单，只需要一个配置文件即可。
功能强大： Biome 集成了格式化、linting 和其他一些实用功能，可以满足大部分开发需求。
易于使用： Biome 提供了命令行工具和编辑器插件，使用起来非常方便。
可扩展性强： Biome 允许用户自定义规则和插件，可以满足各种特殊需求。

安装 Biome：

npm install @biomejs/biome --save-dev
# 或者
yarn add @biomejs/biome --dev
# 或者
pnpm add @biomejs/biome --save-dev

Biome 的基本用法：

安装完成后，就可以在命令行中使用 biome 命令了。

格式化代码：
```
biome format ./src
```
这个命令会格式化 src 目录下的所有代码文件。
检查代码：
```
biome lint ./src
```
这个命令会检查 src 目录下的所有代码文件，并输出错误和警告信息。
格式化并检查代码：
```
biome check ./src
```
这个命令会同时格式化和检查 src 目录下的所有代码文件。
修改文件
```
biome check --apply ./src
```
这个命令会应用格式化和检查修复的更改

Biome 的配置文件：biome.json

Biome 的配置文件是 biome.json，它位于项目的根目录下。通过这个文件，我们可以配置 Biome 的各种行为，比如格式化规则、linting 规则等等。

一个简单的 biome.json 文件可能如下所示：

{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "lineWidth": 120,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

这个配置文件指定了以下内容：

$schema: 指定了 JSON Schema 的版本，用于验证配置文件的格式。
organizeImports: 启用导入排序功能
formatter: 启用格式化功能，并设置了行宽、缩进风格和缩进宽度。
linter: 启用 linting 功能，并启用了推荐的规则。

biome.json 的详细配置：

biome.json 文件包含多个配置项，下面是一些常用的配置项：

$schema： 用于指定 JSON Schema 的版本，用于验证配置文件的格式。
organizeImports: 用于配置 imports 排序。
- enabled: 是否开启，默认为 false
- ignore: 忽略的文件或文件夹。
formatter： 用于配置代码格式化。
- enabled：是否启用格式化功能，默认为 true。
- lineWidth：指定每行的最大长度，默认为 80 个字符。
- indentStyle：指定缩进风格，可以是 space（空格）或 tab（制表符），默认为 space。
- indentWidth：指定缩进宽度，默认为 2 个空格。
- lineEnding：指定换行符，可以是 lf（n）、crlf（rn）或 cr（r），默认为 lf。
- quoteStyle：指定引号风格，可以是 single（单引号）或 double（双引号），默认为 single。
- quoteProperties：指定对象属性的引号风格，可以是 asNeeded（按需添加）、preserve（保持不变）或 consistent（统一风格），默认为 asNeeded。
- trailingComma：指定尾随逗号的风格，可以是 es5（ES5 风格）、all（所有情况都添加）或 none（不添加），默认为 es5。
- semicolons：是否在语句末尾添加分号，默认为 asNeeded。
- arrowParentheses：指定箭头函数的括号风格，可以是 always（总是添加）或 asNeeded（按需添加），默认为 asNeeded。
- bracketSpacing：指定对象字面量中括号和属性之间的空格，默认为 true。
- bracketSameLine：指定 JSX 元素的闭合标签是否与开始标签在同一行，默认为 false。
- ignore: 忽略格式化的文件或文件夹。
linter： 用于配置代码检查。
- enabled：是否启用 linting 功能，默认为 true。
- rules：用于配置 linting 规则。
  - recommended：启用推荐的规则，默认为 false。
  - all：启用所有规则，默认为 false。
  - style：启用风格相关的规则，默认为 false。
  - correctness：启用代码正确性相关的规则，默认为 false。
  - performance：启用性能相关的规则，默认为 false。
  - security：启用安全相关的规则，默认为 false。
  - nursery：启用实验性的规则，默认为 false。
  - complexity：启用代码复杂度相关的规则，默认为 false。
  - suspicious：启用可疑的代码相关的规则，默认为 false。
  - a11y: 启用辅助功能相关的规则，默认为 false。
  - ignore: 忽略lint检查的文件或文件夹。
  - globals: 全局声明，防止no-undeclared-variables报错
  - unsafeParameterDecorators: 将装饰器视为不安全的，从而触发更多规则。
- ignore: 忽略 linting 的文件或文件夹。

Biome 的 linting 规则：

Biome 提供了大量的 linting 规则，可以帮助我们检查代码中潜在的错误和不规范的地方。这些规则可以分为以下几类：

风格相关的规则： 这些规则用于检查代码的风格是否符合规范，比如缩进、空格、换行等等。
代码正确性相关的规则： 这些规则用于检查代码中潜在的错误，比如未使用的变量、全局变量的使用、不安全的写法等等。
性能相关的规则： 这些规则用于检查代码中可能影响性能的地方，比如不必要的循环、重复计算等等。
安全相关的规则： 这些规则用于检查代码中可能存在的安全漏洞，比如 SQL 注入、跨站脚本攻击等等。

Biome 的规则非常多，不可能一一列举。下面是一些常用的规则：

规则名称	描述
`noUnusedVariables`	禁止使用未使用的变量。
`noConsoleLog`	禁止使用 `console.log`。
`noDebugger`	禁止使用 `debugger`。
`noEval`	禁止使用 `eval`。
`noWith`	禁止使用 `with`。
`noImplicitGlobals`	禁止使用隐式全局变量。
`noShadowRestrictedNames`	禁止使用受限的名称作为变量名。
`useIsNaN`	强制使用 `isNaN` 函数来检查 `NaN`。
`validTypeOf`	强制使用合法的 `typeof` 操作符。
`eqeqeq`	强制使用 `===` 和 `!==`，而不是 `==` 和 `!=`。
`noUnreachable`	禁止使用无法访问的代码。
`getterReturn`	强制 `getter` 函数返回一个值。
`noDupeArgs`	禁止在函数定义中使用重复的参数名。
`noDupeKeys`	禁止在对象字面量中使用重复的键名。
`noDuplicateCase`	禁止在 `switch` 语句中使用重复的 `case`。
`noEmptyBlock`	禁止使用空的代码块。
`noExtraBooleanCast`	禁止不必要的布尔类型转换。
`noFallthrough`	禁止 `case` 语句中缺少 `break`。
`noInnerDeclarations`	禁止在嵌套的代码块中声明变量。
`noInvalidRegexp`	禁止使用无效的正则表达式。
`noIrregularWhitespace`	禁止使用不规则的空白字符。
`noObjCalls`	禁止将全局对象作为函数调用。
`noSparseArrays`	禁止使用稀疏数组。
`noUnexpectedMultiline`	禁止使用意外的多行表达式。
`noUnsafeFinally`	禁止在 `finally` 代码块中使用控制流语句。
`noUnsafeNegation`	禁止使用不安全的否定表达式。
`useCamelCase`	强制使用驼峰命名法。
`useArrowFunction`	尽可能使用箭头函数。
`noConstAssign`	禁止修改常量。
`noClassAssign`	禁止修改类名。
`noImportAssign`	禁止修改导入的变量。
`noRedeclare`	禁止重复声明变量。
`noSelfAssign`	禁止将变量赋值给自己。
`noUnmodifiedLoopCondition`	禁止在循环条件中不修改变量。
`useSingleVarDeclarator`	强制使用单个变量声明。
`noShadow`	禁止变量声明覆盖外层作用域的变量。

在编辑器中使用 Biome：

Biome 提供了各种编辑器的插件，可以让我们在编辑器中直接使用 Biome 的功能。

VS Code： 安装 Biome 插件后，就可以在 VS Code 中自动格式化和检查代码了。
1. 打开 VS Code 的扩展商店。
2. 搜索 Biome 并安装。
3. 在 VS Code 的设置中启用 Biome。
JetBrains 系列 IDE (如 WebStorm, IntelliJ IDEA 等): 也可以安装相应的插件。

Biome 与 Prettier 和 ESLint 的比较：

特性	`Biome`	`Prettier`	`ESLint`
功能	格式化、`linting`、编译（部分支持）	格式化	`Linting`
性能	非常快（`Rust` 编写）	较快（`JavaScript` 编写）	较慢（`JavaScript` 编写）
配置	简单	简单	复杂
规则	较少，但常用规则都有	格式化规则较多	规则非常多，可定制性强
可扩展性	较强，支持自定义规则和插件	较弱，主要通过插件扩展	很强，支持自定义规则和插件
社区支持	正在快速发展	非常成熟	非常成熟
集成难度	简单	简单	较复杂
是否全能型	是，目标是取代多个工具	否，只专注于格式化	否，只专注于 `linting`

Biome 的优势：

速度快： Biome 使用 Rust 编写，性能非常高，比 JavaScript 编写的工具快很多。在大型项目中，可以节省大量的格式化和 linting 时间。
配置简单： Biome 的配置非常简单，只需要一个配置文件即可。相比之下，ESLint 和 Prettier 的配置都比较复杂，需要安装多个插件，并配置各种规则。
集成方便： Biome 可以很方便地集成到各种编辑器和构建工具中。

Biome 的局限性：

规则较少： 相比于 ESLint，Biome 的规则还比较少，可能无法满足一些特殊的需求。
社区支持： Biome 的社区还在快速发展中，可能不如 ESLint 和 Prettier 成熟。
编译功能： 编译功能还在开发中，目前只能进行简单的代码转换。

Biome 的未来：

Biome 的目标是取代 Babel、ESLint、Prettier、webpack 和其他一系列前端工具。虽然目前 Biome 主要专注于格式化和 linting，但随着它的不断发展，相信它会成为一个更加强大的工具链，为前端开发带来更多的便利。

总结：

Biome 是一个非常有潜力的代码格式化和 linting 工具。它具有速度快、配置简单、集成方便等优点，可以帮助我们提高代码的质量和开发效率。如果你正在寻找一个替代 ESLint 和 Prettier 的工具，不妨尝试一下 Biome。

代码示例：

// 使用 Biome 格式化后的代码
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");

// 未使用 Biome 格式化的代码
function greet(name){
console.log("Hello, "+name+"!");
}

greet("World")

Biome 的适用场景：

新项目： 如果你正在创建一个新的项目，可以考虑直接使用 Biome，它可以为你提供统一的代码格式化和 linting 解决方案。
现有项目： 如果你已经在使用 ESLint 和 Prettier，可以逐步迁移到 Biome。可以先从格式化开始，然后再逐步启用 linting 规则。
大型项目： 在大型项目中，Biome 的性能优势会更加明显，可以节省大量的格式化和 linting 时间。

结束语：

好了，今天的 Biome 讲座就到这里了。希望通过今天的介绍，大家对 Biome 有了一个更深入的了解。代码的世界日新月异，各种工具层出不穷，我们要不断学习和尝试新的工具，才能保持竞争力。记住，代码的整洁程度，体现的是程序员的素养！下次再见！

发表回复 取消回复

发表回复取消回复