Biome 格式化代码、修复错误,不止于此!

Biome 格式化代码、修复错误,不止于此!

发现每个星期里最好的时间段是每个周六的上午。

  • 6点半:手表90+的睡眠评分,起床、洗漱一连串。
  • 7点半: 带小朋友出门去上课。
  • 8点:小朋友上课,附近的瑞幸咖啡8点开门,时间刚刚好续上,在瑞幸看一小时书。
  • 9点半:小朋友下课,接送中转换课堂,顺带商量午饭归属。
  • 9点45:书画班旁边的咖啡店接着续上,电脑和书综合的一个半小时,看心情旁边的旧庙和菜市场都可以随机选择。
  • 11点15 :小朋友下课一块去吃午饭。

他学习了,我充实了,老婆享受了安静。相当完美!

image

配合朋友重新开一个新项目,又到了配eslint和prettier的环节,前段时候看到biome的,让二者合二为一,基于试试看的心态,从头配置一下使用。欲用其必先了解其。

Biome的自我定义:
Web 项目开发的一体化工具链
优点:
  • 快--基于Rust的构建
  • 简单--无需配置也可直接使用
  • 可扩展--为处理任何规模的代码库而设计
  • 优化--通过部分整合达到工具互相复用的效果
  • 信息丰富--更准确的告诉你问题的位置以及如何修复它
  • 全--支持前端各种语言特别(有吹的成份)

不需要再单独安装eslint和prettier,官方定义的速度比prettier提升35倍,我没测。

支持情况

Table

语言

解析

格式化

检查

JavaScript

TypeScript

JSX

TSX

JSON

JSONC

HTML

⌛️

🚫

🚫

Vue

🚫

🚫

🚫

Svelte

🚫

🚫

🚫

Astro

🚫

🚫

🚫

CSS

✅️

⌛️

⌛️

YAML

⌛️

🚫

🚫

GraphQL

⌛️

🚫

🚫

Markdown

🚫

🚫

🚫

从当前这个支持情况来说,还是在自己单纯的项目上用用,大项目看需求再定吧。

我很喜欢他网站里面理念的那一份内容。

项目管理:
  • 设定明确的期望
  • 清晰地传达决策

通俗讲一下,可以理解为 明确的目标和公开的信息,公开共享的信息有便于更好的沟通,如果可以的话我愿意再加上一个“顺畅和谐的沟通”。

技术
  • 错误应尽可能建议修复和提示。 这些应从使用中推断和过滤,以减少表面上无关和无帮助的信息。
  • 独特且具体的错误信息。 不使用通用的错误信息。 这可以帮助用户理解出了什么问题,并为维护者提供独特的调用位置和调试所需的信息。
  • 优化API。 对所有选项和标记的存在提出疑问。 它们是否必要?它们可以被合并吗?我们如何减少代码分支?
  • 降低行话。 不要假设用户会理解特定的术语。 力求为专家和初学者提供精确的含义。 例如,在生成解析器错误时,使用”字符”而不是传统的”token”。
  • 在命名命令和标志时使用详细描述。 没有不必要且令人困惑的缩写。
  • 使用包容性的术语。 使用中性的代词。不使用有关健全主义的侮辱。 不使用可能被认为是敏感的词语。
  • 为通用客户端构建。 不要假设终端只会使用ANSI代码来消耗输出。 使用可以用于在IDE、浏览器或其他环境中查看的抽象。
  • 终端输出应该是明确的。 在设计终端输出时,不要仅依赖于像颜色这样的格式化提示。 总是使用格式化、符号和间隔的组合。 如果所有的ANSI代码都被剥离,所有的输出仍应被理解。

image

正经开始安装

用npm安装,nodejs v14.18以上的版本
pnpm add --save-dev --save-exact @biomejs/biomenpm install --save-dev --save-exact @biomejs/biome

然后官方说不推荐全局安装,当然没有说原因。

原因应该是版本管理,不同的项目可能使用不同的版本。

相信这里是不用看的。官方防止你没有NODE,提供了其它安装方式

brew install biome
# macOS arm (M1或更新版本)curl -L https://github.com/biomejs/biome/releases/download/cli%2Fv<version>/biome-darwin-arm64 -o biomechmod +x biome
# Linux (x86_64)curl -L https://github.com/biomejs/biome/releases/download/cli%2Fv<version>/biome-linux-x64 -o biomechmod +x biome
# Windows (x86_64, Powershell)Invoke-WebRequest -Uri "https://github.com/biomejs/biome/releases/download/cli%2Fv<version>/biome-win32-x64.exe" -OutFile "biome.exe"

注意:请确保将<version>替换为您要安装的Biome版本。
现在,您可以通过运行./biome来使用Biome。

运行初化始命令

pnpm biome init

目录中将出现一个新的biome.json文件

默认启用了代码检查和推荐,格化式也已启用。

使用方法

常规的时候,我们通常是开发的时候编辑每个文件经过biome的文件检查。如果是一个以往的项目呢,我不能一个个重新打开文件吧,biome提供了处理方法

您可以使用format命令和--write选项格式化文件和目录:

pnpm biome format --write <files>

您可以使用lint命令和--apply选项来对文件和目录进行代码检查并应用安全修复:

pnpm biome lint --apply <files>

您可以通过使用check命令来同时应用两者

pnpm biome check --apply <files>

check命令旨在一次运行多个工具。目前,它会:

格式化文件、检查文件、组织导入。

在编辑器中集成Biome(VS CODE没试)

Webstorm**:**

  1. 打开IntelliJ IDEA。
  2. 转到设置/首选项
  3. 从左侧菜单中选择插件
  4. 单击Marketplace选项卡。
  5. 搜索”Biome”并单击安装
  6. 重新启动IDE以激活插件。

image

最后在设置里面把保存时的一些操作设置好。

image

这时候我们测试一下,特意缩进两行,按ctrl+s 保存。自动格式化清空了两行的缩进。

image

image

Biome在项目使用中的一些特点

多配置文件

如果在当前目录找不到配置文件,Biome会向上遍历文件系统的目录,直到找到一个配置文件。

app/b/biome.json
app/biome.json

这意味着当您从文件app/b/package.json运行脚本时,Biome将使用配置文件app/b/biome.json

当您从app/package.json运行脚本时,Biome将使用配置文件app/biome.json

我很认同你刚刚说的多配置文件方式,但如果我多个目录里面有很一样的配置,只是有一点点不同的定制化要求呢?共享配置

共享配置

同样假设有多个目录

app/b/biome.json
app/a/biome.json
app/biome.json

我们在app/biome.json里面配置

{
  "formatter": {
    "enabled": true,
    "lineWidth": 120
  }
}

在app/a/biome.json和app/b/biome.json里面分别用extends引用app/biome.json

{
  "extends": ["../../biome.json"],
  "formatter": {
    "indentStyle": "space"
  }
}
以下文件目前被Biome忽略。
- `package.json`
- `package-lock.json`
- `npm-shrinkwrap.json`
- `yarn.lock`
- `composer.json`
- `composer.lock`
- `typescript.json`
- `tsconfig.json`
- `jsconfig.json`
- `deno.json`
- `deno.jsonc`

image

儿童节快乐

附:

官方的Rules列表

https://biomejs.dev/zh-cn/linter/rules/