WHAT - 前端开发人员日常提效工具和应用程序 目录Mac代码编辑器和IDE0. Cursor1. Visual Studio Code (VS Code)2. WebStorm3. VimVim 的优势常用命令普通模式Normal Mode常用命令插入模式Insert Mode常用命令命令行模式Command Mode版本控制和协作1. Fork2. GitKraken包管理器和构建工具1. Homebrew2. pnpm / Yarn3. mise / fnm / volta浏览器和调试工具1. Google Chrome常用扩展程序推荐2. Firefox Developer Edition终端和命令行工具1. iTerm22. Oh My Zsh常用插件安装和启用插件3. fish4. wrapAPI调试工具1. Postman2. Bruno3. 比较抓包工具1. Charles2. Fiddler设计和原型工具1. Sketch2. figma3. Adobe XD其他实用工具1. Rectangle推荐2. Clipy推荐3. Alfred老牌4. Docker5. Bob6. CleanShot7. Hammerspoon8. Ice9. Raycast推荐10. dropoverAI 辅助开发工具codegraphcodeburnsuperpowersmulticacaveman日常开发小贴士作为前端开发人员使用合适的工具和应用程序可以大大提高工作效率。Mac以下是一些在Mac平台上非常受欢迎的工具和应用它们可以帮助前端开发人员更高效地完成工作。代码编辑器和IDE0. CursorCursor 是一款由AI 驱动的代码编辑器能够理解你的代码库并通过自然语言助你更快编写代码。 只需描述你想要构建或修改的内容Cursor 就会为你生成相应的代码。Cursor 可以丝滑从 VS Code 或 JetBrains 迁移。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. ForkFork 官网Fork是一款优秀的Git GUI客户端专为简化和加速Git工作流而设计。以下是Fork的主要特点和优点特别适合前端开发人员的需求直观的用户界面强大的分支管理内置合并和冲突解决工具快速提交和变基操作支持子模块和子树代码审查和比较工具内置终端2. GitKraken官网优点用户友好的Git GUI客户端支持分支管理、提交历史查看和冲突解决。支持GitHub、GitLab、Bitbucket等平台的集成。更多关于 Git 相关内容可以阅读WHAT - Git 工作流含 Gitflow 和 AoneFlowHOW - Git 使用前- 原理和初步使用HOW - Git 使用中- 常用命令和技巧包管理器和构建工具1. Homebrew官网优点Mac上的包管理器方便安装和管理开发环境所需的软件包。常用命令brew install node安装Node.js2. pnpm / Yarn推荐使用pnpm或yarn来安装依赖速度更快。3. mise / fnm / volta推荐使用这三类现代工具来管理 Node 版本。浏览器和调试工具1. Google Chrome优点强大的开发者工具DevTools支持断点调试、网络分析和性能分析。常用扩展程序推荐ColorZilla、FeHelper(前端助手)、Grammarly、ModHeader、Proxy SwitchyOmega、划词翻译、篡改猴、React Developer Tools、Vue.js devtools、V2EX polish、LocatorJS(强烈推荐)、侧边栏垂直标签页…2. Firefox Developer Edition官网优点专为开发人员设计提供一些独有的调试工具和CSS网格布局调试工具。终端和命令行工具1. iTerm2官网优点替代macOS默认终端支持分屏、多标签、丰富的自定义选项。常用命令Commandshifto Searchforeverything commandd Divide horizontally commandshiftd Divide vertically Commandoptionarrow Navigate panes Commandshiftenter Maximize current pane Commandshifth Access history Commandoptionb Replay commandz Undo close2. Oh My Zsh如果使用 zsh强烈安装 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 installnpm 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-fsSLhttps://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)编辑.zshrc文件打开你的.zshrc文件如vim ~/.zshrc找到plugins部分添加你想启用的插件。例如vim 使用技巧输入法设置为英文模式输入/plugins回车即可定位到对应单词并高亮输入 n 可找下一个plugins(gitzsh-autosuggestions zsh-syntax-highlighting z extractdockernpmnodeautojumphistory)注意zsh-autosuggestions和zsh-syntax-highlighting需要手动安装。手动安装插件某些插件可能需要额外的安装步骤。例如对于zsh-autosuggestions和zsh-syntax-highlighting你可以使用以下命令克隆它们的仓库gitclone https://github.com/zsh-users/zsh-autosuggestions${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestionsgitclone https://github.com/zsh-users/zsh-syntax-highlighting.git${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting应用更改保存.zshrc文件并重新加载配置source~/.zshrc3. fish相比 zshfish 更适合日常命令行交互。因为更简单、更直观、更快。具体可以阅读 WHAT - Shell 工具 fish 介绍4. wrapWarp 是一个用 Rust 写的终端工具支持 macOS / Linux / Windows。它的核心定位不是“更好看的 Terminal”而是一个带 AI 的开发环境Agentic Terminal和传统 Terminal 最大区别可以“用人话操作终端”。比如你可以直接输入帮我查当前端口占用。一键获取完整项目代码Warp 会自动生成对应命令如 lsof 或 netstat。本质内置 AI 帮你写命令或debug。更具体可以阅读Shell 工具 wrap 介绍融合 AIAPI调试工具1. Postman优点强大的API开发工具便于测试和调试RESTful API。Postman 是一个广泛使用的 API 开发工具提供了丰富的功能来帮助开发人员进行 API 请求的构建、测试、调试和文档编写。2. Bruno官网优点Bruno 是一个新兴的开源 API 客户端专注于 JSON 对象管理和更灵活的 API 请求构建。它旨在提供比传统 API 客户端更丰富的功能和更好的用户体验。Postman 和 Bruno 是两个非常有用的工具特别适合前端开发人员进行 API 开发、测试和调试。以下是对这两个工具的详细介绍和比较3. 比较功能PostmanBruno请求构建与发送支持广泛的 HTTP 请求方法和高级配置支持基础的 HTTP 请求方法和 JSON 管理测试与调试强大的测试脚本和调试功能重点在于 JSON 对象的管理自动化测试支持集合运行和持续集成支持多请求管理但不专注自动化测试团队协作云端共享和协作功能目前主要为单机使用Mock 服务提供内置 Mock 服务无此功能API 文档自动生成并分享 API 文档无此功能性能与轻量相对较重功能丰富轻量高效专注于 JSON 管理开源与可扩展商业软件免费和付费版本开源项目自由定制和扩展总结Postman 是功能全面的 API 开发和测试工具适合需要全面 API 测试和团队协作的开发人员。Bruno 则是一个轻量级且高效的工具适合需要高效 JSON 管理和基本 API 测试的用户。如果你需要一个成熟且功能丰富的解决方案Postman 是一个不错的选择。如果你更倾向于开源、轻量和高效的工具Bruno 也是一个值得尝试的选择。抓包工具1. CharlesHOW - Charles 抓包工具2. FiddlerFiddler 是一个免费的跨平台网络调试代理工具最初是为 Windows 平台开发的后来也推出了 macOS 版本。对于 Mac 来说更推荐 Charles。设计和原型工具1. Sketch官网优点强大的UI/UX设计工具广泛用于设计高保真原型和用户界面。2. figma官网优点基于云的设计工具支持实时协作多人同时编辑同一个设计文件。3. Adobe XD官网优点集成了设计和原型制作功能便于快速创建和分享交互式原型。其他实用工具1. Rectangle推荐官网优点Rectangle 是 macOS 上的一款免费、开源的窗口管理工具。它可以帮助用户通过简单的键盘快捷键或鼠标拖拽来调整和排列应用窗口的位置和大小从而提高工作效率。主要功能窗口分屏、窗口四分屏、窗口全屏或居中、自定义快捷键、拖拽窗口分屏、多显示器支持2. Clipy推荐官网优点Clipy 是 macOS 上的一款开源剪贴板管理工具旨在提升用户在剪贴板操作方面的效率。它简单易用能够记录并管理用户的剪贴板历史方便用户快速查找和使用之前复制的内容。3. Alfred老牌官网优点提高生产力的应用启动器和工作流工具通过自定义热键和工作流快速访问常用工具和文件。它通过快捷键、关键字和自定义工作流帮助用户更快地完成任务。以下是对 Alfred 的详细介绍包括其主要功能、安装方法和常用使用技巧。主要功能快速启动应用程序使用 Alfred 可以通过快捷键快速启动应用程序只需输入应用名称的一部分。文件搜索与操作Alfred 提供强大的文件搜索功能用户可以快速查找文件并执行复制、移动、删除等操作。剪贴板历史记录并管理剪贴板历史用户可以方便地查找和粘贴之前复制的内容。片段Snippets存储并快速插入常用文本片段减少重复输入的时间。工作流Workflows用户可以创建自定义工作流来自动化复杂任务例如批量重命名文件、下载网页内容、调用 API 等。Web 搜索通过关键字快速进行网页搜索支持自定义搜索引擎。系统命令通过 Alfred 快速执行系统命令例如关机、重启、锁屏等。计算器与单位转换内置计算器和单位转换功能支持复杂表达式和多种单位。安装方法访问 Alfred 官网 下载最新版本的 Alfred。下载后打开 DMG 文件将 Alfred 拖拽到应用程序文件夹进行安装。使用技巧快速启动应用程序启动 Alfred默认快捷键是⌘ Command Space可以在设置中自定义。输入应用名称的一部分例如输入 “Saf” 来启动 Safari。文件搜索与操作启动 Alfred输入find加上文件名的一部分例如find report。选择文件后可以通过快捷键执行操作如⌘ Command C复制文件。剪贴板历史默认快捷键是⌘ Command ⌥ Option C可以在设置中自定义。从历史记录中选择并粘贴之前复制的内容。片段Snippets在 Alfred 的设置中进入 Snippets 标签创建新的文本片段。设置一个快捷关键字例如addr在任何地方输入关键字会自动替换为预设文本。工作流Workflows在 Alfred 的设置中进入 Workflows 标签。使用图形界面创建工作流结合各种触发器和动作例如打开特定网站、执行脚本等。Web 搜索在 Alfred 的设置中进入 Features 标签选择 Web Search。添加自定义搜索引擎例如g关键字对应 Google 搜索。系统命令启动 Alfred输入shutdown执行关机命令或者lock锁定屏幕。计算器与单位转换启动 Alfred直接输入计算表达式例如23 * 3 15按回车显示结果。启动 Alfred输入转换表达式例如10 km to miles。4. Docker官网优点容器化工具帮助创建一致的开发环境方便部署和管理应用。比如 mysql 等。5. Bob翻译。6. CleanShot截图。7. Hammerspoon代替 Moom 窗口管理、karabiner 自定义快捷按键唤起 app。8. Ice菜单管理器。9. Raycast推荐官网Raycast 是一款 macOS 上非常强大的 效率启动器 命令中心可以理解为Spotlight 的超级增强版 可编程快捷工具平台。很多开发者会用它来替代Spotlight系统搜索、Alfred老牌效率工具核心一句话用键盘完成一切操作。比如打开 App执行脚本管理窗口调用 API控制 Docker查 Git 分支10. dropover临时文件中转。AI 辅助开发工具codegraphcodeburnsuperpowersmulticacaveman日常开发小贴士自动化任务使用脚本如npm scripts和任务管理工具如Gulp、Grunt来自动化常见的开发任务。版本控制养成良好的版本控制习惯频繁提交代码编写有意义的提交信息。学习快捷键熟悉并使用常用开发工具的快捷键减少鼠标操作提高工作效率。这些工具和应用能够帮助前端开发人员更高效地完成各种任务提升开发体验和工作效率。