视野修炼第33期

欢迎来到第 33 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）

下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。

🔥强烈推荐

1 phind 开发者专属的搜索引擎

Tip: 需要“魔法”才能访问

试用了一下还是不错的，会自动总结检索文章中的内容，并把内容来源都详细列举了出来（比baidu的开发者搜索强不少）

下面看2个案例

① 实现毛玻璃效果

② 查看端口占用情况

2 magicast - 优雅的AST操作工具

antfu 大佬参与的又一佳作

基于 recast 和 babel 实现，允许以编程方式修改 JavaScript 和 TypeScript 的源代码，操作AST更加优雅

来看看官方示例

config.js:

export default {
  foo: ["a"],
};

修改源码，往foo里插入一个值b

import { loadFile, writeFile } from "magicast";

const mod = await loadFile("config.js");

// 就像常规的对象插值一样
mod.exports.default.foo.push("b");

await writeFile(mod);

更新后的 config.js:

export default {
  foo: ["a", "b"],
};

这种库可以用到一些需要修改源码的插件中，或者自动化重构代码的场景(需要操作AST)

3 Warp - 21世纪的终端工具

最近被安利的一个Terminal工具（还是挺好用，但目前只支持Mac）

打开速度非常的快（完全基于Rust构建，不参杂WEB技术）

我们先看看官网

再看看有哪些 "开箱即用的特色功能"

① 编辑体验

支持鼠标在任意位置操作，也可通过快捷键快速的跳转与内容选取

② 搜索与补全

支持内容搜索，开箱即用的命令补全与纠错

③ AI加持

每日免费100次的 chatGPT 提问

了解更多功能推荐去看官网的介绍视频

🔧开源&技术资料

4 vue-reuse-template - 允许模板里定义可重用的模板

antfu 的又一花活，类似于使用 defineComponent 直接定义组件

大概用法如下

vue

<script setup>
import { createReusableTemplate} from 'vue-reuse-template'

const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
</script>

<template>
  <DefineTemplate v-slot="{ data, msg, anything }">
    <div>{{ data }} passed from usage</div>
  </DefineTemplate>

  <ReuseTemplate :data="data" msg="The first usage" />
  <ReuseTemplate :data="anotherData" msg="The second usage" />
  <ReuseTemplate v-bind="{ data: something, msg: 'The third' }" />
</template>