使用 Biome 代替 prettier

[AaronConlon]

---

description: hello 大家好~今天继续给大家带来我的新周刊内容。
cover: https://github.com/Developer27149/blog/assets/23721611/84d5b7eb-f87a-4269-b21d-05ffc4f660a3

封面图：江苏·秋冬·红色的枫叶

OK！继续来分享上一周接触到了一些讯息！

CSS 技巧：高度自适应过度

笔者在这里分享一个CSS高度过度动画的小技巧：在鼠标hover在某个元素上时，显示其子元素文本，同时添加一个动画效果。

原文：[🧙‍♂️ CSS trick: transition from height 0 to auto! - DEV Community](https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de?ref=dailydev)

举个例子：

<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
</div>

你或许尝试过如下CSS样式来添加"动画":

.accordion-body {
  height: 0;
  transition: 500ms height ease;
}

.accordion:hover .accordion-body {
  height: auto;
}

但是这个属性是无法实现动画的，如果你能确定容器的高度，那么可以使用maax-height属性来添加动画过度效果：

.accordion-body {
  max-height: 0;
  transition: 500ms max-height ease;
}

.accordion:hover .accordion-body {
  max-height: 200px;
}

最大高度的设定能触发渐变效果，鼠标hover的时候确实可以让高度实现渐变。

但是，很多时候我们无法确定内部元素的高度，最好的方案还是希望忽视其内容高度。我们可以使用CSS Grid属性来解决这个问题：

.accordion-body {
  display: grid; 
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}

.accordion:hover .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-body > div {
  overflow: hidden;
}

Chrome 在去年这个时候发布的v107版本上支持了grid-template-rows的动画过渡支持，如果你想要在生产上使用这个特性，可能需要考虑一下兼容性。

实在有这样的需求的话，也可以使用JS来实现。

Biome

前几天algora发起了使用Rust重写prettier工具的挑战，最终的赢家便是Biome!

[Biome](https://biomejs.dev/) 是一款基于Rust语言开发的前端工具链，完美替代prettier+eslint。

你是否觉得eslint+prettier处理代码的速度变得难以忍受？不妨将其切换到Biome上来试试。

Vienna

[ViennaRSS – The Free and Open Source RSS/Atom Reader for macOS](https://www.vienna-rss.com/#)免费开源的`RSS`阅读器，我用来作为`Readkit`的平替。

Comprehensive Rust

[Welcome to Comprehensive Rust 🦀 - Comprehensive Rust 🦀](https://google.github.io/comprehensive-rust/index.html) 这是一份来自google安卓团队的免费Rust开发教程。

推荐给具有一定编程经验且并且打算学习Rust的朋友。

Daily.dev

[daily.dev | Where developers grow together](https://app.daily.dev/) 开发者信息聚合应用，用户可以接收官方或者社区用户分享的技术讯息，主要内容都来源于国外，喜欢学习新知识的开发者应该会很喜欢。

Web3.0 资讯整理

[wangschang/web3.0: web3.0知识整理 web3.0知识 web3.0学习资料](https://github.com/wangschang/web3.0)

最后

笔者上周感染了流感，目前还没完全恢复，大家别放松，尤其是家里有小孩的。

好了，今天的分享就先到这里，大家下周见~