---
url: https://sugarat.top/weekly/2024-06-16.md
description: >-
  ① Bread Jam - 变量上色 ② JsonTree.js - JSON 数据可视化 ③ Reshot - 免费图标和插图 ④ 2024
  年度备受期待的 JavaScript 项目 ⑤ 万能视频图片解析下载 ⑥ Chromicons - 线条风格图标集合 ⑦ DGM.js - 无限画布 ⑧
  英：从头开始了解 JS Promise ⑨  TextToSpeech - 免费在线转换文字为语音
---

# 视野修炼第88期 | 突出变量插件

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

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. Bread Jam](https://marketplace.visualstudio.com/items?itemName=tingcode.bread-jam#breadjam) - 变量上色

一个有趣的 VS Code 扩展插件，可以变量和属性着色，使其更易区分。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/8a80bdc225ca47503397d5468728685b)

有 11 种模式可选。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/74c2d43171bf9581b76fd8faba60d2e9)

笔者还是比较喜欢插件的默认过渡色的，装上下周用于看看效果。

### [2. JsonTree.js](https://github.com/williamtroup/JsonTree.js) - JSON 数据可视化

一个非常轻量的库，用于渲染 JSON 数据的树视图。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/4bd2e1f1ba0783ff45d43f71252eb4ed)

### [3. Reshot](https://www.reshot.com/) - 免费图标和插图

![](https://cdn.upyun.sugarat.top/mdImg/sugar/052ebb2a21240e76b994896c152d78eb)

搜一个月亮。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/6068c953b4f7d45af0dee043fb6b5f78)

40000+ 团标，可以直接复制 SVG 使用 👍🏻。

*收藏起来！*

## 🔧开源工具&技术资讯

### [4. 2024 年度备受期待的 JavaScript 项目](https://mp.weixin.qq.com/s/n8YsLPMuXp0DMAA-z4691A)

* Rspack：基于 Rust 开发的高性能 Web 构建工具，兼容 Webpack 生态；
* Effect-TS：一个强大的 TypeScript 库，它旨在帮助开发者轻松地创建复杂、同步和异步程序；
* Biome：高性能的前端工具链，它提供快速的代码格式化，兼容 `Prettier`；
* screenshot-to-code：截图生成代码。

*当然文章还提到了其它的一些项目，感兴趣的可以深入都上手试试。*

### [5. 万能视频图片解析下载](https://snapany.com/zh)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/965ff22f2c3096254736759e4c0eed3d)

支持常见的与不常见的。

*试了一下，搜索引擎提供的播放网站基本都能解析*

### [6. Chromicons](https://lifeomic.github.io/chromicons.com/) - 线条风格图标集合

![](https://cdn.upyun.sugarat.top/mdImg/sugar/2b9e63c5cec377d765567858ed70a2e1)

*不多说直接收藏起来！*

### [7. DGM.js](https://github.com/dgmjs/dgmjs) - 无限画布

![](https://cdn.upyun.sugarat.top/mdImg/sugar/210439a5a5a8f416f2cd7bf014a8b06c)

可简单的几步创建出一个无限画布，自定义程度高。

## 📚 教程&文章

### [8. 英：从头开始了解 JS Promise](https://www.joshwcomeau.com/javascript/promises/)

文章介绍了:

1. 为什么 js 没有 sleep 函数
2. callback 的问题
3. Promise 的用法
4. 与 async/await 配合使用

*来龙去脉讲得还比较清楚，有示例结合，只不过是英文的。*

## 🤖AI工具&资讯

### [9. TextToSpeech](https://texttospeech.im/zh-CN) - 免费在线转换文字为语音

![](https://cdn.upyun.sugarat.top/mdImg/sugar/1b035e35e19852f3ad4c64ad2e0505d3)

完全免费，支持多种语言，多音色。

## 😛趣图

![](https://cdn.upyun.sugarat.top/mdImg/sugar/869745a65d9cccc2d7aedf9eed3ed330)

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://sorrycc.com/mdh/) - 前端资讯和分享
* [前端RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章
* [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！
* [FRE123 技术周刊精选](https://www.fre123.com/weekly) - 前后端技术周刊精选推荐信息流