VSCode怎么配置Biome格式化工具_VSCode Biome替代Prettier与ESLint

冬瑶姑娘_9479

冬瑶姑娘_9479

2026-06-03

250人浏览

原创

biome能直接替代prettier+eslint,但必须彻底禁用eslint插件、卸载prettier插件、删除eslint配置,否则格式化会反复跳动或静默失效;最常见失效原因是项目根目录缺失biome.jsonc配置文件,导致插件不加载、状态栏无显示、保存无反应。

vscode怎么配置biome格式化工具_vscode biome替代prettier与eslint

Biome 能直接替代 Prettier + ESLint,但必须关掉 ESLint 插件、删掉所有 ESLint 配置、禁用 Prettier 插件,否则格式化会反复跳动甚至静默失效。

VSCode 安装 Biome 插件后为什么没反应

最常见原因是:插件装了,但项目根目录没有 biome.jsonc(或 biome.json),Biome 就完全不启动——状态栏不显示、保存不格式化、也不报错,用户误以为“插件坏了”。

  • 配置文件必须放在 VSCode 工作区的**根目录**,src/biome.jsonc 或 .vscode/biome.jsonc 均无效
  • 首次打开项目时,Biome 会下载并加载 Rust 编译的二进制,可能卡顿 2–5 秒,别急着重装
  • 检查 VSCode 右下角状态栏:出现 Biome 字样才表示已就绪;没出现=没加载成功

保存时代码没走 Biome 格式化,还是被 ESLint 或 Prettier 抢了

VSCode 默认按语言关联格式化器,只要 eslint 或 prettier-vscode 插件开着,它们就会拦截 Format Document 请求,Biome 根本没机会执行。

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载
  • 彻底禁用 ESLint 插件(不是“禁用工作区”,是点击插件面板右键 → “禁用”)
  • 卸载或禁用 esbenp.prettier-vscode —— Biome 不兼容 Prettier 的格式化管道
  • 在项目级 .vscode/settings.json 中显式指定:"editor.defaultFormatter": "biome.biome"
  • 确认 biome.jsonc 中启用了 formatter:"formatter": { "enabled": true },且没被 overrides 关闭

biome.jsonc 最小可用配置长什么样

Biome 开箱即用,不需要写一堆规则。一个能跑通格式化+检查的最小配置只需三块:

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "formatter": {
    "enabled": true,
    "lineWidth": 80,
    "indentWidth": 2
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}
  • lineWidth 和 indentWidth 是可选的,不写就用默认值(80 / 2)
  • 不要加 "@typescript-eslint/*" 或 "eslint-plugin-react" 这类 ESLint 插件规则 —— Biome 没有这些概念
  • Vue 项目目前支持有限(截至 2026 年 5 月),.vue 单文件中的 <script></script> 块可检查,但 <template></template> 支持不稳定,别强求

npx biome check 和 VSCode 格式化行为不一致

命令行和编辑器的行为差异通常来自路径范围和配置作用域不同:

  • npx biome check . 扫描整个项目目录,而 VSCode 只对当前打开的文件生效
  • VSCode 读取的是工作区根目录的 biome.jsonc;如果用多根工作区,每个文件夹需各自有配置
  • 某些规则(如 useConsole)在 Biome 中默认关闭,而 ESLint 的 no-console 默认开启 —— 别拿 ESLint 的报错预期去验证 Biome
  • 运行 npx biome ci . 才是最接近 CI 环境的全量检查,比单独 check 或 format 更严格

最容易被忽略的点:Biome 的规则命名和语义跟 ESLint 完全不同,比如 eqeqeq 对应 useStrictEquality,no-unused-vars 对应 noUnusedVariables。照着 ESLint 名字去搜 Biome 文档,大概率找不到。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1255

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2592

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1889

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1707

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2587

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1798

14

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1242

10

vscode和visualstudio的区别
vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1096

8

vscode设置中文界面不生效解决方法
vscode设置中文界面不生效解决方法

vscode设置中文界面不生效解决方法:安装中文语言包、通过命令面板设置语言、检查 locale.json 设置、重新安装中文语言包、检查 VSCode 版本和更新、排除插件冲突、检查系统语言设置、查看 VSCode 日志和错误消息、重置 VSCode 设置、查看官方文档和社区支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

454

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程