前端新人入职必备清单，保姆级教程！（下）

前端新人入职必备清单，保姆级教程！（上）https://developer.aliyun.com/article/1411615

浏览器

前端开发，浏览器当然必不可少啦，笔者最常用的浏览器就是 Chrome，如果需要兼容各个浏览器，可以下载多个。

Chrome 可以在其官网（**www.google.cn/chrome/inde…

下载完成后，按照提示安装即可。安装完成之后，浏览器的默认搜索引擎是谷歌，如果需要更改，可以在设置中进行配置：

iTerm2

终端是前端开发中必不可少的工具，个人觉得 iTerm2 是比 Mac 默认终端好用很多的，可定制程度很高。iTerm2 是一款功能强大的终端模拟器，其有如下特点：

• 多标签和分割窗口：iTerm2 支持多标签和分割窗口，你可以在同一个窗口中打开多个终端会话，并方便地在它们之间切换。
• 自定义外观：iTerm2 允许根据自己的喜好自定义终端的外观，包括主题、背景图像、字体等。你可以选择预设的主题，或者创建自己的主题。
• 支持多窗口管理：iTerm2 支持窗口分组和窗口管理，你可以将多个窗口组织在一个窗口组中，并进行集体操作。
• 强大的搜索和历史记录：iTerm2 提供了高级搜索功能，在终端输出中快速查找和过滤内容。此外，它还保存了完整的命令历史记录，可以随时回溯和搜索之前的命令。
• 集成的 Autocomplete（自动完成）：iTerm2 内置了命令和路径的自动完成功能，能够节省输入命令的时间和精力。
• 内置的触发器（Triggers）：iTerm2 具有触发器功能，可以根据输出文本或命令执行特定的操作，例如自动运行脚本、更改颜色等。
• 支持分屏和粘贴历史：iTerm2 允许你轻松分割窗口，并提供了一个方便的粘贴历史功能，可以查看和复制过去粘贴的内容。
• 可定制的快捷键：iTerm2 具有丰富的可定制快捷键选项，可以根据个人喜好和使用习惯进行设置。

iTerm2 的安装也很简单，只需要在官网（**iterm2.com/downloads.h…

官网提供了两个版本，类似于 Node.js，一个是稳定版，一个是最新的测试版，这里建议下载稳定版（Stable Release），避免使用过程中出现一些不可预测的问题。

这里分享一篇 iTerm2 的保姆级配置教程，可以参考这篇教程并根据自己的需求进行配置：zhuanlan.zhihu.com/p/550022490

版本控制工具

Git

目前最常用的代码版本控制工具就是 Git 了。下面就来通过 Homebrew 安装 Git，在终端中输入以下命令即可：

复制代码

brew install git

安装完成之后，需要设置邮箱和用户：

git config --global user.name <名字>
git config --global user.email <邮箱>

除了上述下载 Git 的方法，Git 官网（**git-scm.com/download/ma…  Git 的方法：

SoucreTree

有了 Git 就可以通过 Git 内置的命令来进行代码操作了，除此之外，我们还可以通过 VS Code 和 SoucreTree 进行可视化 Git 操作。下面就来看看 SoucreTree 是如何安装使用的。

SourceTree 是一款免费的可视化 Git 和 Mercurial 版本控制工具，提供了直观的界面和强大的功能来帮助开发者更轻松地管理代码仓库，其特点如下：

• 直观易用：提供了一个直观的图形界面，使得初学者和有经验的开发者都能轻松上手，并能快速进行版本控制操作。
• 支持多种版本控制系统：支持 Git 和 Mercurial 两种常用的版本控制系统，可以方便地管理不同类型的代码仓库。
• 可视化操作：提供了可视化的文件状态、分支图和提交历史等功能，使得开发者能够清晰地查看和理解代码仓库的状态和变更历史。
• 强大的分支管理：提供了简单且强大的分支管理功能，可以轻松创建、切换和合并分支，以及解决分支冲突。

使用方法如下：

1. 下载和安装：可以从 SourceTree 官网（**www.sourcetreeapp.com/**）下载适用于操作系…
2. 添加代码仓库：打开 SourceTree 后，点击 "New" 按钮，然后选择 "Clone" 或 "Create"，根据需要添加已有的代码仓库或创建新的代码仓库。
3. 查看和提交代码：在 "Repositories" 面板中，可以查看代码仓库的文件状态、分支信息和提交历史。在 "Log" 面板中，可以查看详细的提交记录，选择提交进行比较或还原。
4. 创建和切换分支：在 "Branches" 面板中，可以创建新分支、切换分支和合并分支。还可以使用可视化的分支图来查看和管理分支关系。
5. 解决冲突：如果出现分支冲突，SourceTree 会提供界面来帮助解决冲突，例如手动合并代码或选择合适的版本。
6. 使用其他工具：在 SourceTree 中，可以配置并使用喜欢的比较和合并工具，例如 Beyond Compare 或 Kaleidoscope。这些工具可以帮助更方便地进行代码比较和合并操作。

Charles

Charles 也是笔者日常使用比较多的一个软件，用于代码调试。笔者最常用的就是拿到线上数据，在本地开发环境进行代理调试。

Charles 是一款常用的网络抓包工具，它允许开发者查看分析网络流量，帮助诊断和调试网络应用程序，其特点如下：

• 抓取和查看网络流量：Charles 可以捕获电脑和移动设备上的网络流量，包括 HTTP、HTTPS、WebSocket 等协议的请求和响应，并以直观的方式展示给用户。
• SSL/TLS 解密：Charles 可以解密经过 SSL/TLS 加密的网络流量，使得开发者可以查看加密通信的内容，方便调试和分析。
• 重放请求：Charles 具备重放请求的功能，开发者可以将先前捕获到的请求重新发送给服务器，用于测试和调试。
• 模拟慢速网络：Charles 可以模拟不同类型的网络环境，如低速连接、丢包、延迟等，帮助开发者测试应用程序在不同网络条件下的性能。
• 可定制性：Charles 提供了丰富的配置选项和插件机制，可以根据个人需求对其功能进行扩展和定制。
• 跨平台支持：Charles 可以在 Windows、macOS 和 Linux 上运行，适用于不同操作系统上的开发和调试需求。

首先在官网（**www.charlesproxy.com/latest-rele… Charles，这里根据自己当前的操作系统选择就好了：

下载完成之后，按照提示一步步安装即可。需要注意的是，这个软件并不是完全免费的，如果未订阅，那每次只能使用 30 分钟就会自动重启。

可以参考这两个使用教程：

• juejin.cn/post/684490…
• juejin.cn/post/684490…

其他工具

最后再来分享几个笔者日常使用比较多的软件。

Draw.io

draw.io 是一款免费的在线图表编辑工具，可以绘制流程图、UML、类图、组织结构图、泳道图、E-R图、思维导图等，堪称画图神器！

draw.io 提供了丰富的模版，支持商务、图表、cloud、工程、流程图、布局、地图、网络、软件、表格、UML、Venn等。还可以自定义模板。

除此之外，draw.io 还有很多特点：

• 支持语言设置为中文；
• 支持使用图层；
• 支持设置手绘风格、自带多种图标，支持自定义图标；
• 支持将图片导出为PNG、JEPG、SVG、PDF、HTML、XML等，支持导出高级设置，如调整DPI、宽高、缩放、背景等。

draw.io 使用和下载：

• 在线地址：app.diagrams.net/
• 下载地址：github.com/jgraph/draw…

Xmind

XMind 是一个跨平台的思维导图软件，具有多种结构样式，除了普通的思维导图，还包括树形图、逻辑图、鱼骨图、时间轴、树状表格等等，不同的结构样式可以自由组合混用，同时支持一键更换结构样式。其提供了很多类型的思维导图，并支持设置多种主题风格：

除此之外，Xmind 还有很多特点：

• 可以灵活的定制节点外观、插入图标外，还有多种样式、主题色彩、贴图可以选择，主题颜色和样式同样支持自由组合；
• 除了 XMind 自身的格式，还支持导入 FreeMind、MindManager 等软件的文件格式，支持导出PNG、SVG、PDF、Markdown、Word、Excel 等；
• 支持进行动态演示。

下载地址：xmind.app/download/

超级右键

超级右键是一个用于 Mac 的右键增强工具，Mac 不像 Windows 那样可以右键直接创建文件之类的，这个软件就可以帮助我们在某些场景下提高工作效率。在 Appstore 中搜索超级右键，下载即可（专业版是收费的，其他是免费的，可以根据需要选择）：

可以在偏好设置中来根据需要进行设置：

这里我进行了简单的设置，就可以直接右键新建文件了，并且可以直接右键点击一个文件，使用 VS Code 打开，或者在某个目录中直接打开终端等：