Last updated on

使用 biomejs 进行代码格式化

前言

很久以前写了一个专门用于 JSX 的 eslint plugin,主要是应用于 Solidjs 的项目,但依然有很多不满意的地方,甚至经常会出现 BUG。最近看到一个 https://biomejs.dev/ 能够完美满足 JSX 的格式化需求,那就直接用这个工具吧。

配置

在工程的根目录下创建 biome.json,下面是我的配置。

{
"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"a11y": {
"useButtonType": "off",
"useKeyWithClickEvents": "off",
"noSvgWithoutTitle": "off"
},
"style": {
"noNonNullAssertion": "off",
"noParameterAssign": "off",
"useImportType": "warn"
},
"complexity": {
"noForEach": "off",
"useArrowFunction": "off"
},
"suspicious": {
"noExplicitAny": "off",
"noEmptyInterface": "off"
}
},
"ignore": ["node_modules/**", "dist/**", ".vscode/**"]
},
"formatter": {
"indentStyle": "space",
"indentWidth": 2,
"ignore": ["node_modules/**", "dist/**", ".vscode/**"],
"lineEnding": "lf"
},
"javascript": {
"formatter": {
"semicolons": "asNeeded",
"quoteStyle": "single"
}
}
}

完成后,在 packages.json 中,增加一条运行脚本:

{
"scripts": {
"format": "biome format --write ."
}
}

即可通过下面的命令行来执行格式化了。

Terminal window
pnpm run format ./src

二编

刚开始用的时候配置的规则稍,按照他本身的规则来写代码是真难受啊。尤其是 import 语句,VSCode 不会自动给引入的 interfacetype 加上 import type 的提示,然后 biome 不做配置就不会自动修复。

翻来找去找文档,终于在 .vscode/settings.json 的配置中找到了答案。

{
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
}

我估计之后还是会回到 eslint,毕竟有个亲民的大佬 @antfu 在不断地做贡献啊。

#formatter #linter