使用 biomejs 进行代码格式化

Biomejs 支持的语言有 JS, TS, JSX, JSON, JSONC，那么以后 React 和 Solidjs 的工程就可以直接用这个来格式化了。Vue, Svelte, Astro 的支持还在跟进，还是挺期待的。

前言

很久以前写了一个专门用于 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 ."
  }
}

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

pnpm run format ./src

二编

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

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

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

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

#formatter #linter