云南省网站开发软件WordPress连接微博

1. 背景

最近在重新学习一个React的开源项目，其中代码规范和格式化工具最开始用的是eslint和prettier，后来换成了biome。猛地发现Webstorm对双引号、4缩进没有了报错提示，也没有了自动格式化和右键手动格式化，很不习惯，那就开始调教吧~

2. 了解biome

https://biomejs.dev/zh-cn/guides/getting-started/
在GitHub可以看到有18.5K的Star，而eslint目前有25.8K的Star。
好奇的看了下它们的tag开始时间，biome最早开始与2023年左右，而eslint开始于2013年，它们竟然相差10年！！！
为什么使用biome的开发者人数增速如此之快？我的第一印象是简单、简单、简单。


对比去年和今年两个时间段学习那个React开源项目的package.json文件不难发现，使用eslint大概需要安装12个左右的不同的包，而biome只需要1个

3. biome真的有那么好用吗

我的第一感觉是并没有。
单/双引号、2/4缩进IDE都没有任何报错或者警告提示信息。 会不会是我打开方式不对，IDE可能也需要什么相关的插件呢？是的，我后来下载了插件Biome

这样总算万事大吉了吧？然而单/双引号、2/4缩进IDE都没有任何报错或者警告提示信息。
不过biome.json中linter的rules相关配置都有了错误提示

"linter": {"enabled": true,"rules": {"style": {"noVar": "error"},"recommended": true,}},

怎么解决？又怎么格式化？

4. IDE的保存自动格式化

vscode和webstorm都提供了保存后自动格式化的功能，用eslint的时候大家可能都用过。

4.1 Webstorm配置自动保存的触发条件：

可以看出，目前只有两个条件

1. IDE空闲一定的时间后则自动保存。
2. 切换到其它APP或者内置终端。(说白了就是当前文件的光标失去焦点)

4.2 配置biome保存后格式化

打开设置，搜索biome，然后勾选这两个即可：

到这里，当触发自动保存后，也就触发了biome的自动格式化，勉强能用了。

5. 保存后自动格式化的痛点

是的，上面只是勉强能用了。为什么？
我一直不喜欢甚至比较抵触用这个功能，原因就在于下面类似的例子:

// 当你输入
return (<><div><div/></>
)

然后切换界面到浏览器抄代码的时候

// 好了，代码格式化成这样了
return <div><div/>

类似这样的情况可能还有很多。所以我在Webstorm中使用Eslint的格式化一直是右键手动fix,像下面这样：

6. 最终解决方法？

自定义指令/右键快捷键/外部工具
只对单个文件在我想格式化的时候再执行格式化。
打开外部工具，配置如下

建议关闭打开工具输出的控制台，这样格式化几乎是无感的。上面的程序中的pnpm也可以换成npx效果是一样的。
这样在右击之后，就可以点击biome check格式化了。

右击太麻烦，还可以添加快捷键

至此，大功告成！！！
不过单/双引号、2/4缩进IDE都没有任何报错或者警告提示信息。 ，但是，手动或者自动格式化是生效的，会吧错误的缩进和引号纠正。有大佬知道怎么让单/双引号、2/4缩进IDE给出报错或者警告提示信息。 请帮忙告诉我吧。