Biome 格式化代码、修复错误,不止于此!
发现每个星期里最好的时间段是每个周六的上午。
- 6点半:手表90+的睡眠评分,起床、洗漱一连串。
- 7点半: 带小朋友出门去上课。
- 8点:小朋友上课,附近的瑞幸咖啡8点开门,时间刚刚好续上,在瑞幸看一小时书。
- 9点半:小朋友下课,接送中转换课堂,顺带商量午饭归属。
- 9点45:书画班旁边的咖啡店接着续上,电脑和书综合的一个半小时,看心情旁边的旧庙和菜市场都可以随机选择。
- 11点15 :小朋友下课一块去吃午饭。
他学习了,我充实了,老婆享受了安静。相当完美!
配合朋友重新开一个新项目,又到了配eslint和prettier的环节,前段时候看到biome的,让二者合二为一,基于试试看的心态,从头配置一下使用。欲用其必先了解其。
Biome的自我定义:
Web 项目开发的一体化工具链
优点:
- 快--基于Rust的构建
- 简单--无需配置也可直接使用
- 可扩展--为处理任何规模的代码库而设计
- 优化--通过部分整合达到工具互相复用的效果
- 信息丰富--更准确的告诉你问题的位置以及如何修复它
- 全--支持前端各种语言特别(有吹的成份)
不需要再单独安装eslint和prettier,官方定义的速度比prettier提升35倍,我没测。
支持情况
Table
语言
解析
格式化
检查
✅
✅
✅
✅
✅
✅
JSX
✅
✅
✅
TSX
✅
✅
✅
JSON
✅
✅
✅
JSONC
✅
✅
✅
HTML
⌛️
🚫
🚫
🚫
🚫
🚫
🚫
🚫
🚫
🚫
🚫
🚫
CSS
✅️
⌛️
⌛️
⌛️
🚫
🚫
⌛️
🚫
🚫
Markdown
🚫
🚫
🚫
从当前这个支持情况来说,还是在自己单纯的项目上用用,大项目看需求再定吧。
我很喜欢他网站里面理念的那一份内容。
项目管理:
- 设定明确的期望
- 清晰地传达决策
通俗讲一下,可以理解为 明确的目标和公开的信息,公开共享的信息有便于更好的沟通,如果可以的话我愿意再加上一个“顺畅和谐的沟通”。
技术
- 错误应尽可能建议修复和提示。 这些应从使用中推断和过滤,以减少表面上无关和无帮助的信息。
- 独特且具体的错误信息。 不使用通用的错误信息。 这可以帮助用户理解出了什么问题,并为维护者提供独特的调用位置和调试所需的信息。
- 优化API。 对所有选项和标记的存在提出疑问。 它们是否必要?它们可以被合并吗?我们如何减少代码分支?
- 降低行话。 不要假设用户会理解特定的术语。 力求为专家和初学者提供精确的含义。 例如,在生成解析器错误时,使用”字符”而不是传统的”token”。
- 在命名命令和标志时使用详细描述。 没有不必要且令人困惑的缩写。
- 使用包容性的术语。 使用中性的代词。不使用有关健全主义的侮辱。 不使用可能被认为是敏感的词语。
- 为通用客户端构建。 不要假设终端只会使用ANSI代码来消耗输出。 使用可以用于在IDE、浏览器或其他环境中查看的抽象。
- 终端输出应该是明确的。 在设计终端输出时,不要仅依赖于像颜色这样的格式化提示。 总是使用格式化、符号和间隔的组合。 如果所有的ANSI代码都被剥离,所有的输出仍应被理解。
正经开始安装
用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**:**
- 打开IntelliJ IDEA。
- 转到设置/首选项。
- 从左侧菜单中选择插件。
- 单击Marketplace选项卡。
- 搜索”Biome”并单击安装。
- 重新启动IDE以激活插件。
最后在设置里面把保存时的一些操作设置好。
这时候我们测试一下,特意缩进两行,按ctrl+s 保存。自动格式化清空了两行的缩进。
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`
儿童节快乐
附:
官方的Rules列表