4 个强大的开源工具，帮你大幅提升开发体验

前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer

Hello，大家好，我是 Sunday。

今天给大家介绍 4 个开发必备工具，涉及到：图片压缩，Git 可视化，组件库构建、字体探索

01：Squoosh 轻松实现图像优化

官方地址：https://squoosh.app/

Squoosh.app 是一个 开源的 在线图像压缩工具，主要用于优化图像的大小和质量。它由 Google Chrome Labs 开发，支持多种图像格式和压缩算法，可以直接在浏览器中运行，无需安装软件。

作用

1. 图像压缩：Squoosh 支持多种压缩格式，如 JPEG、WebP、PNG 等。用户可以通过调节参数来压缩图像大小，同时保持较高的图像质量。
2. 格式转换：Squoosh 支持将图像从一种格式转换为另一种格式，如将 PNG 转换为 WebP。
3. 图像优化：工具提供了高级功能，如色彩管理、降噪处理、裁剪、缩放等，帮助用户优化图像。
4. 离线使用：由于它是一个 PWA（渐进式 Web 应用程序），可以在离线状态下使用。

特点

1. 实时预览：Squoosh 提供实时预览功能，用户可以即时查看压缩前后的效果对比。
2. 拖放支持：用户可以通过拖放图像文件到浏览器中快速开始压缩操作。
3. 多种压缩算法：支持 MozJPEG、OptiPNG、WebP、AVIF 等多种压缩算法，用户可以根据需要选择最合适的算法。
4. 完全在本地执行：所有操作都在本地浏览器中执行，无需上传到服务器，因此数据隐私得到保障。

02：SourceTree Git可视化工具

官方地址：https://www.sourcetreeapp.com/

Sourcetree 是 Atlassian 开发的一款 免费的 Git 和 Mercurial 图形化客户端，可以让你不通过 Git 指令即可完成复杂的 Git 操作方式。这个工具我已经使用了好多年，在这里推荐给大家

作用

1. 版本控制管理：Sourcetree 为 Git 和 Mercurial 提供了用户友好的界面，允许用户轻松地执行常见的版本控制任务，如提交、推送、拉取、合并和分支管理。
2. 可视化操作：提供了直观的可视化界面，帮助用户查看和理解分支结构、提交历史、变更对比等信息。
3. 远程仓库管理：支持与多种远程代码托管服务（如 GitHub、Bitbucket、GitLab）集成，用户可以直接从 Sourcetree 中管理和同步远程仓库。
4. 代码对比和合并：集成了文件对比和合并工具，帮助用户更容易地处理代码冲突和查看代码差异。

特点

1. 用户友好的图形界面：相比命令行，Sourcetree 的 GUI 更加直观，尤其适合不熟悉 Git 命令的用户。
2. 支持多仓库管理：Sourcetree 允许用户同时管理多个 Git 或 Mercurial 仓库，可以方便地切换和操作不同项目。
3. 强大的分支管理：提供了详细的分支管理功能，用户可以轻松地创建、切换、合并和删除分支，同时还可以查看分支的拓扑结构。
4. 内置终端：虽然主要是 GUI 工具，但 Sourcetree 也提供了内置的终端窗口，方便高级用户直接输入 Git 命令。
5. 丰富的日志和历史查看：用户可以通过 Sourcetree 方便地查看提交历史、日志、文件变更记录等，支持按时间、分支、标签等多维度进行筛选。

03：Storybook 轻松构建你的组件库

官方地址：https://storybook.js.org/

Storybook 是一个用于开发和测试 UI 组件的开源工具。它提供了一个独立的开发环境，让我们可以在不依赖应用程序的情况下构建、查看和测试组件。

作用

1. 独立开发 UI 组件：Storybook 提供了一个隔离的环境，允许开发者单独开发和测试 UI 组件，而不必依赖于整个应用程序的上下文。
2. 组件文档化：Storybook 可以自动生成组件的文档，使团队成员能够轻松了解每个组件的用途、属性、状态和行为。
3. 测试与展示：开发者可以在 Storybook 中实时预览和测试组件的不同状态，确保它们在各种场景下表现良好。
4. 设计系统管理：Storybook 支持组织和管理组件库，使其成为设计系统的一部分，方便跨团队共享和复用。

特点

1. 支持多种前端框架：Storybook 支持 React、Vue、Angular、Svelte、Web Components 等多种前端技术。
2. 实时预览：Storybook 提供即时的实时预览功能，开发者可以查看组件的实时变更，而无需重新加载整个应用。
3. 扩展性强：通过插件，Storybook 可以扩展以支持不同的功能，如 Accessibility（可访问性）检查、性能测试、样式指南等。
4. 自动化文档生成：Storybook 可以从组件的代码中自动生成文档，支持 TypeScript 类型、PropTypes 等注释。
5. 交互式展示：开发者可以为组件添加各种不同的“故事”（场景），以展示组件在不同状态下的表现。

使用示例

1. 首先创建一个具体的 Vue3 或者 React 项目
2. 在项目根目录执行如下指令：

pnpm dlx storybook@latest init

1. 创建 Button 组件，我们以 Vue 为例

<!-- src/components/Button.vue -->
<template>
 <button @click="onClick">
  {{ label }}
 </button>
</template>

<script>
export default {
 name: 'Button',
 props: {
  label: {
   type: String,
   required: true
  },
  onClick: {
   type: Function,
   default: () => {}
  }
 }
}
</script>

<style scoped>
button {
 padding: 10px 20px;
 border: none;
 background-color: #42b983;
 color: white;
 font-size: 16px;
 cursor: pointer;
}

button:hover {
 background-color: #369f7a;
}
</style>

1. 创建对应的 Story（文档文件）- Button.stories.js

// src/components/Button.stories.js

import Button from './Button.vue'

export default {
 title: 'Button',
 component: Button
}

const Template = (args) => ({
 components: { Button },
 setup() {
  return { args }
 },
 template: '<Button v-bind="args" />'
})

export const Primary = Template.bind({})
Primary.args = {
 label: 'Primary 按钮'
}

export const Secondary = Template.bind({})
Secondary.args = {
 label: 'Secondary 按钮'
}

1. 最后执行如下指令，启动 Storybook：

npm run storybook

04：WhatFont 字体查看器

插件地址：https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

WhatFont 是一个用于识别网页上字体的工具，帮助用户快速了解网页中使用的字体类型。它是一个浏览器扩展插件，支持多种主流浏览器，如 Chrome 和 Safari。

作用

1. 字体识别：WhatFont 可以识别网页中使用的字体，包括字体的名称、字体家族、字体大小、行高等属性。
2. 快速查看：用户可以直接在网页上点击字体，快速查看该字体的详细信息，而无需查看页面的源代码或样式表。
3. 设计辅助：对于网页设计师和开发者，WhatFont 是一个便利的工具，可以帮助他们确定网页上使用的字体，并可能在自己的项目中使用相同或类似的字体。

特点

1. 易于使用：WhatFont 的操作非常简单，用户只需安装扩展并激活它，然后点击网页上的文本即可查看字体信息。
2. 实时预览：插件允许用户在网页上实时预览所选文本的字体信息，使得字体识别变得更加直观。
3. 支持多种浏览器：WhatFont 提供了针对主流浏览器的扩展版本，如 Chrome 和 Safari，方便不同用户群体的需求。
4. 详细字体信息：除了字体名称，WhatFont 还显示字体的其他属性，如字体大小、字体粗细、行高等，提供了丰富的字体信息。
5. 适配性强：WhatFont 能够识别常见的字体文件类型，包括 Google Fonts 和 Adobe Fonts 中的字体。

1v1私教、找工作、全程陪跑、终身服务

也可以直接加我微信沟通，回复【资料】可直接领取 Sunday独家整理 大厂面试题、大厂真实面经：