作为前端开发人员,使用合适的工具和应用程序可以大大提高工作效率。
Mac
以下是一些在Mac平台上非常受欢迎的工具和应用,它们可以帮助前端开发人员更高效地完成工作。
代码编辑器和IDE
1. Visual Studio 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是一款优秀的Git GUI客户端,专为简化和加速Git工作流而设计。以下是Fork的主要特点和优点,特别适合前端开发人员的需求:
- 直观的用户界面
- 强大的分支管理
- 内置合并和冲突解决工具
- 快速提交和变基操作
- 支持子模块和子树
- 代码审查和比较工具
- 内置终端
2. GitKraken
- 优点:用户友好的Git GUI客户端,支持分支管理、提交历史查看和冲突解决。
- 支持GitHub、GitLab、Bitbucket等平台的集成。
更多关于 Git 相关内容可以阅读:
包管理器和构建工具
1. Homebrew
- 优点:Mac上的包管理器,方便安装和管理开发环境所需的软件包。
- 常用命令:
brew install node
(安装Node.js)
2. 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 也是一个值得尝试的选择。
抓包工具
1. Charles
2. Fiddler
Fiddler 是一个免费的跨平台网络调试代理工具,最初是为 Windows 平台开发的,后来也推出了 macOS 版本。对于 Mac 来说更推荐 Charles。
设计和原型工具
1. Sketch
- 优点:强大的UI/UX设计工具,广泛用于设计高保真原型和用户界面。
2. figma
- 优点:基于云的设计工具,支持实时协作,多人同时编辑同一个设计文件。
- 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
- 优点:容器化工具,帮助创建一致的开发环境,方便部署和管理应用。
日常开发小贴士
- 自动化任务:使用脚本(如npm scripts)和任务管理工具(如Gulp、Grunt)来自动化常见的开发任务。
- 版本控制:养成良好的版本控制习惯,频繁提交代码,编写有意义的提交信息。
- 学习快捷键:熟悉并使用常用开发工具的快捷键,减少鼠标操作,提高工作效率。
这些工具和应用能够帮助前端开发人员更高效地完成各种任务,提升开发体验和工作效率。