WHAT - 前端开发人员日常提效工具和应用程序

Mac
- 代码编辑器和IDE
- - 1. Visual Studio Code (VS Code)
  - 2. WebStorm
  - 3. Vim
  - - Vim 的优势
    - 常用命令：普通模式（Normal Mode）
    - 常用命令：插入模式（Insert Mode）
    - 常用命令：命令行模式（Command Mode）
- 版本控制和协作
- - 1. Fork
  - 2. GitKraken
- 包管理器和构建工具
- - 1. Homebrew
  - 2. npm / Yarn
- 浏览器和调试工具
- - 1. Google Chrome
  - 2. Firefox Developer Edition
- 终端和命令行工具
- - 1. iTerm2
  - 2. Oh My Zsh
  - - 常用插件
    - 安装和启用插件
- API调试工具
- - 1. Postman
  - 2. Bruno
  - 3. 比较
- 抓包工具
- - 1. Charles
  - 2. Fiddler
- 设计和原型工具
- - 1. Sketch
  - 2. figma
- 其他实用工具
- - 1. Rectangle（推荐）
  - 2. Clipy（推荐）
  - 3. Alfred
  - 4. Docker
- 日常开发小贴士

作为前端开发人员，使用合适的工具和应用程序可以大大提高工作效率。

Mac

以下是一些在Mac平台上非常受欢迎的工具和应用，它们可以帮助前端开发人员更高效地完成工作。

代码编辑器和IDE

1. Visual Studio Code (VS Code)

VS Code 官网

优点：强大的扩展市场、良好的性能、丰富的插件生态系统、内置Git支持。
常用插件：常用插件推荐请详细阅读 HOW - vscode 使用指南。

请添加图片描述

2. WebStorm

优点：JetBrains家族的产品，强大的代码智能提示、代码导航、重构工具和内置调试器。
支持多种前端框架和工具，如React、Angular、Vue.js等。

3. Vim

官网

Vim 是一款强大的文本编辑器，可以说纯粹基于键盘，它具有许多优势，包括高度可定制性、强大的编辑功能、快速操作等。

对于后台同学可能会非常熟悉，因为经常要在终端里编写代码文件，并且编辑速度极快，对于前端开发来说，日常也会遇到类似场景。

以下是 Vim 的优势以及一些常用的命令：

Vim 的优势

高度可定制性：
- Vim 可以根据用户的需求进行高度定制，用户可以通过配置文件（.vimrc）来定义自己的编辑环境和行为。
模式编辑：
- Vim 有多种编辑模式，包括普通模式、插入模式和命令行模式。每种模式下，键盘输入的行为不同，使得编辑效率更高。
强大的编辑功能：
- Vim 提供了丰富的编辑功能，包括文本查找替换、复制粘贴、文本块操作、宏录制等，可以满足各种复杂编辑需求。
快速操作：
- 由于 Vim 是一个纯粹基于键盘的编辑器，用户可以通过键盘快捷键来执行各种操作，这使得编辑速度极大地提高。
跨平台：
- Vim 可以在各种操作系统上运行，包括 Unix/Linux、macOS 和 Windows。
强大的插件生态：
- Vim 生态系统非常丰富，有大量的插件可以扩展 Vim 的功能，满足各种需求。

常用命令：普通模式（Normal Mode）

移动光标：
- h：左移
- j：下移
- k：上移
- l：右移
文本编辑：
- i：进入插入模式（在当前光标位置之前插入文本）
- a：进入插入模式（在当前光标位置之后插入文本）
- x：删除光标所在位置的字符
- dd：删除当前行
- yy：复制当前行
- p：粘贴复制或剪切的内容
查找和替换：
- /pattern：向下搜索指定模式
- ?pattern：向上搜索指定模式
- :s/pattern/replacement/g：全局替换指定模式
退出和保存：
- :w：保存文件
- :q：退出编辑器
- :wq：保存并退出
- :q!：强制退出，不保存

常用命令：插入模式（Insert Mode）

退出插入模式：
- Esc：退出插入模式，回到普通模式

常用命令：命令行模式（Command Mode）

打开文件：
- :e filename：打开指定文件
- :e!：放弃当前修改，重新加载文件
行号跳转：
- :n：跳转到第 n 行
- :n,m：跳转到第 n 行到第 m 行
查找和替换：
- :s/pattern/replacement/g：全局替换指定模式
保存和退出：
- :w：保存文件
- :q：退出编辑器
- :wq：保存并退出
- :q!：强制退出，不保存

以上只是 Vim 的一部分常用命令，Vim 拥有非常丰富的功能和命令，需要花费一定时间来熟悉和掌握。

版本控制和协作

1. Fork

Fork 官网

Fork是一款优秀的Git GUI客户端，专为简化和加速Git工作流而设计。以下是Fork的主要特点和优点，特别适合前端开发人员的需求：

直观的用户界面
强大的分支管理
内置合并和冲突解决工具
快速提交和变基操作
支持子模块和子树
代码审查和比较工具
内置终端

请添加图片描述

2. GitKraken

官网

优点：用户友好的Git GUI客户端，支持分支管理、提交历史查看和冲突解决。
支持GitHub、GitLab、Bitbucket等平台的集成。

请添加图片描述
更多关于 Git 相关内容可以阅读：

WHAT - Git 工作流（含 Gitflow 和 AoneFlow）
HOW - Git 使用（前）- 原理和初步使用
HOW - Git 使用（中）- 常用命令和技巧

包管理器和构建工具

1. Homebrew

官网

优点：Mac上的包管理器，方便安装和管理开发环境所需的软件包。
常用命令：brew install node（安装Node.js）

2. npm / Yarn

npm 官网、yarn 官网

优点：JavaScript的包管理工具，管理项目依赖和脚本任务。
Yarn相对于npm有更快的安装速度和离线模式。

浏览器和调试工具

1. Google Chrome

优点：强大的开发者工具（DevTools），支持断点调试、网络分析和性能分析。
常用扩展程序：ColorZilla、FeHelper(前端助手)、Grammarly、ModHeader、Proxy SwitchyOmega、沙拉查词-聚合词典划词翻译、篡改猴、Vue.js devtools…

2. Firefox Developer Edition

官网

优点：专为开发人员设计，提供一些独有的调试工具和CSS网格布局调试工具。

终端和命令行工具

1. iTerm2

官网

优点：替代macOS默认终端，支持分屏、多标签、丰富的自定义选项。

请添加图片描述
常用命令：

Command+shift+o
Search for everything

command+d
Divide horizontally

command+shift+d
Divide vertically

Command+option+arrow
Navigate panes

Command+shift+enter
Maximize current pane

Command+shift+h
Access history

Command+option+b
Replay

command+z
Undo close

2. Oh My Zsh

优点：Zsh的一个社区驱动的框架，提供了丰富的插件和主题，提升命令行使用体验。

常用插件

以下是一些常用的 Oh My Zsh 插件，它们可以帮助前端开发人员和其他开发者提高生产力：

git
- 描述：提供了大量的 Git 命令别名和功能增强。
- 功能：如 gst（相当于 git status）、gco（相当于 git checkout）、gl（相当于 git pull）等快捷命令。
zsh-autosuggestions
- 描述：基于你输入的内容自动建议命令。
- 功能：在你输入时会在光标后显示建议命令，通过按右箭头键可以快速补全。
zsh-syntax-highlighting
- 描述：命令行语法高亮显示。
- 功能：输入命令时会对语法进行高亮，有助于避免输入错误。
z
- 描述：快速跳转到常用目录。
- 功能：通过记录你访问的目录历史，快速跳转到你常用的目录，例如 z project 直接跳转到你频繁访问的项目目录。
extract
- 描述：解压缩各种归档文件的统一命令。
- 功能：只需使用 extract 命令即可解压缩 .tar.gz、.zip、.rar 等多种格式的文件，例如 extract file.zip。
docker
- 描述：Docker 命令的别名和补全。
- 功能：提供了一系列 Docker 命令的别名和自动补全功能，使得使用 Docker 更加便捷。
npm
- 描述：提供了npm相关的快捷命令。
- 功能：简化常用的 npm 命令，如 npm i 相当于 npm install，npm r 相当于 npm run。
node
- 描述：Node.js 的命令补全。
- 功能：为 Node.js 和 npm 命令提供自动补全功能。
autojump
- 描述：快速跳转到常用目录。
- 功能：与 z 插件类似，通过记录你访问的目录历史，使用 j 命令快速跳转到常用目录。
history
- 描述：增强历史记录功能。
- 功能：直接在终端输入 history 即可获取历史记录。history 提供更强大的历史记录搜索和管理功能，另外 history-search-multi-word 插件可以通过多个关键词搜索历史命令。

安装和启用插件

以下是如何安装和启用这些插件的步骤：

安装 Oh My Zsh（如果尚未安装）：

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

请添加图片描述

编辑 .zshrc 文件：

打开你的 .zshrc 文件，如 vim ~/.zshrc，找到 plugins 部分，添加你想启用的插件。例如：

vim 使用技巧：

输入法设置为英文模式
输入 /plugins 回车，即可定位到对应单词并高亮
输入 n 可找下一个

plugins=(
  git
  zsh-autosuggestions
  zsh-syntax-highlighting
  z
  extract
  docker
  npm
  node
  autojump
  history
)

在这里插入图片描述
注意，zsh-autosuggestions 和 zsh-syntax-highlighting 需要手动安装。

手动安装插件：

某些插件可能需要额外的安装步骤。例如，对于 zsh-autosuggestions 和 zsh-syntax-highlighting，你可以使用以下命令克隆它们的仓库：

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

应用更改：

保存 .zshrc 文件并重新加载配置：

source ~/.zshrc

API调试工具

1. Postman

优点：强大的API开发工具，便于测试和调试RESTful API。Postman 是一个广泛使用的 API 开发工具，提供了丰富的功能来帮助开发人员进行 API 请求的构建、测试、调试和文档编写。

2. Bruno

官网

优点：Bruno 是一个新兴的开源 API 客户端，专注于 JSON 对象管理和更灵活的 API 请求构建。它旨在提供比传统 API 客户端更丰富的功能和更好的用户体验。

Postman 和 Bruno 是两个非常有用的工具，特别适合前端开发人员进行 API 开发、测试和调试。以下是对这两个工具的详细介绍和比较：

3. 比较

功能	Postman	Bruno
请求构建与发送	支持广泛的 HTTP 请求方法和高级配置	支持基础的 HTTP 请求方法和 JSON 管理
测试与调试	强大的测试脚本和调试功能	重点在于 JSON 对象的管理
自动化测试	支持集合运行和持续集成	支持多请求管理但不专注自动化测试
团队协作	云端共享和协作功能	目前主要为单机使用
Mock 服务	提供内置 Mock 服务	无此功能
API 文档	自动生成并分享 API 文档	无此功能
性能与轻量	相对较重，功能丰富	轻量，高效，专注于 JSON 管理
开源与可扩展	商业软件，免费和付费版本	开源项目，自由定制和扩展

总结

Postman 是功能全面的 API 开发和测试工具，适合需要全面 API 测试和团队协作的开发人员。Bruno 则是一个轻量级且高效的工具，适合需要高效 JSON 管理和基本 API 测试的用户。如果你需要一个成熟且功能丰富的解决方案，Postman 是一个不错的选择。如果你更倾向于开源、轻量和高效的工具，Bruno 也是一个值得尝试的选择。