前端/iOS开发者必备工具软件合集

近期新购入了一款 Mac，趁此机会重装了一遍所有软件，记录一下必备软件合集，方便下次换机或新同事参考。

---

一、环境与包管理（安装顺序建议）

1. Homebrew

Mac 的包管理器，建议最先安装，后续很多软件可通过它一键安装。

# 安装（官方一键脚本）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# 安装后按提示把 brew 加入 PATH（Apple Silicon 常见路径）
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc && eval "$(/opt/homebrew/bin/brew shellenv)"

常用技巧：

• brew install <包名>：安装软件
• brew upgrade：升级所有已安装包
• brew search <关键词>：搜索可用包
• brew list：查看已安装列表
• brew cleanup：清理旧版本缓存
• brew cask install <应用>：安装图形界面应用（如 Chrome、Cursor）

可视化管理：
可以安装下 wailBrew, 强迫症必备
brew install --cask wailbrew

AI 时代新增两个好用工具
文件管理和git终端可视化
brew install yazi lazygit

---

2. NVM / FNM（Node 版本管理）二选一 建议FNM

FNM

安装
brew install fnm
配置
eval "$(fnm env --use-on-cd)"

在.nvmrc 中写入当前支持的node版本号node -v > .nvmrc FNM 也支持
其他命令可以参考nvm,基本一致

附: pnpm 安装 并根据node版本自动切换

fnm use 16 
npm install -g pnpm@8 # Node 16 适配 pnpm 8 
fnm use 20 
npm install -g pnpm@10 # Node 20 适配 pnpm 10
fnm default 20

• node 报错

#fnm 不像 nvm 那样直接把 node 放到一个固定路径，而是动态地在 shell 初始化时把当前版本的路径 prepend 到 `PATH`。如果某个软件不是从你的 shell 启动的，它就找不到 fnm 管理的 node。
# 需要找一下 node的地址然后执行软链接
# 查看真实路径
ls ~/.local/share/fnm/node-versions/ # 应该能看到类似 v20.x.x 的目录
# 软链接真实的 node 
sudo ln -sf ~/.local/share/fnm/node-versions/v20.19.0/installation/bin/node /usr/local/bin/node

---

nvm

多项目可能依赖不同 Node 版本，用 nvm 切换很方便。

# 使用 Homebrew 安装
brew install nvm
# 在 ~/.zshrc 中加入（如用 Oh My Zsh 则编辑该文件）
export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"
# 然后执行 source ~/.zshrc

常用技巧：

• nvm install 20：安装 Node 20 最新版

• nvm use 18：当前终端切换到 Node 18

• nvm alias default 20：默认使用 Node 20

• nvm ls：查看已安装版本

• 项目根目录放 .nvmrc 写版本号（如 20），在目录下执行 nvm use 即可自动切换

• 技巧2
  在.nvmrc 中写入当前支持的node版本号node -v > .nvmrc

autoload -U add-zsh-hook
load-nvmrc() {
  local nvmrc_path
  nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version
    nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then
      nvm use
    fi
  elif [ "$(nvm version)" != "$(nvm version default)" ]; then
    # 离开有 .nvmrc 的目录，切回默认版本
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

即可实现切换到当前文件自动切换到对应的node版本

• 如果报错node

       # 先找到你的 Node.js 实际路径：
       which node
       # 输出示例：/Users/用户名/.nvm/versions/node/v20.20.0/bin/node
       # 创建软链接到 `/usr/local/bin`
        sudo ln -s /Users/用户名/.nvm/versions/node/v20.20.0/bin/node /usr/local/bin/node
  

---

3. pnpm

比 npm 更快、省磁盘，适合 Monorepo 和前端项目。

# 安装（建议在配置好 nvm 后执行，全局安装到当前 Node）
npm install -g pnpm

常用技巧：

• pnpm install：安装依赖（会严格按 workspace 和 lockfile）
• pnpm add <包名> / pnpm add -D <包名>：添加依赖 / 开发依赖
• pnpm run <script> 或 pnpm <script>：运行 package.json 里脚本
• pnpm store path：查看全局 store 目录；pnpm store prune：清理未引用包
• 在项目里用 pnpm 前可先 corepack enable 再 corepack prepare pnpm@latest --activate，便于团队统一 pnpm 版本

---

4. CocoaPods

iOS/macOS 开发常用 Ruby 环境管理 + 依赖管理。

# 安装 
brew install rbenv ruby-build

# ✅ 安装 Ruby 3.2.0（自动处理 OpenSSL、readline 等依赖）
rbenv install 3.2.0

rbenv global 3.2.0
rbenv rehash  # ← 必须！刷新 shims
ruby -v  # ✅ 应输出：ruby 3.2.0pXXX (2023-XX-XX revision XXXXX) [arm64-darwin25]
which ruby  # ✅ 应输出：/Users/xxx/.rbenv/shims/ruby

gem update --system  # 升级 gem（重要！避免权限/SSL 错误）
gem install cocoapods -v 1.15.2  # 推荐稳定版（适配 Xcode 15+）
pod --version  # ✅ 应输出：1.15.2

常用技巧：

• CocoaPods
  • pod init：在 Xcode 工程目录下初始化 Podfile
  • pod install：安装/更新依赖（之后用 .xcworkspace 打开工程）
  • pod update <库名>：更新指定库
  • pod repo update xxx：更新 CocoaPods 官方 spec 仓库（卡住时常用）

---

二、必备软件列表

类型	软件	说明
浏览器	Chrome	开发、调试、日常
终端	iTerm2 + Oh My Zsh	更好用的终端与 shell 配置
抓包/调试	Proxyman	macOS 抓包、证书、代理
开发	Xcode	iOS/macOS 开发必备
编辑器	Cursor	AI 辅助编码
系统监控	iStat Menus	菜单栏 CPU/内存/网速等
数据库	TablePlus	多数据库客户端
截图	iShot	截图、标注、录屏
远程	Termius	SSH 等远程连接
JSON	OK JSON	JSON 查看工具
MD 编辑器	Typora	MD 编辑器

Typora 配置

• 推荐一个 Typora 主题 个人感觉非常不错 Drake

• 图片自动上传

  • 安装 picgo

  # 用 pnpm 全局安装 PicGo-Core
  pnpm add -g picgo 
  # 验证安装（出现版本号即成功） 
  picgo -v
  # 查看安装路径（后续配置会用到） 
  which picgo 
  # 输出示例：/Users/你的用户名/Library/pnpm/picgo
  

  • 安装gitee 插件

  #安装uploader 插件
   picgo install gitee uploader
   # 设置 uploader
   picgo set uploader
   1.按上下键找到gitee，回车    
   2.repo：用户名/仓库名 （打开自己的仓库，浏览器里的网址username/reponame）    
   3.token：刚才生成的token    
   4.path:路径，写仓库的名字就是reponame    
   5.custompath:不用填，回车   
   6.customURL:不用填，回车    
  
   #使用配置好的文件（配置文件在~/.picgo/config.json）    
   picgo use uploader
  

  • 配置图片自动上传
    • 选择自定义命令
    • 输入 "/Users/用户名/Library/pnpm/picgo" upload

---

三、Cursor 已安装插件

当前 Cursor 中已安装的扩展（便于换机或重装时恢复）：

扩展 ID	说明
bradlc.vscode-tailwindcss	Tailwind CSS IntelliSense（类名补全、预览）
christian-kohler.npm-intellisense	npm 包名/版本补全
christian-kohler.path-intellisense	路径补全（import、src 等）
dbaeumer.vscode-eslint	ESLint 代码检查
dsznajder.es7-react-js-snippets	ES7+ React/Redux 代码片段
eamodio.gitlens	Git 增强（行历史、blame、对比等）
esbenp.prettier-vscode	Prettier 格式化
formulahendry.auto-rename-tag	自动重命名配对的 HTML/JSX 标签
ms-ceintl.vscode-language-pack-zh-hans	中文（简体）语言包
pkief.material-icon-theme	Material 风格文件/文件夹图标
ritwickdey.liveserver	本地 Live Server 前端预览
steoates.autoimport	自动补全并插入 import
stylelint.vscode-stylelint	CSS/SCSS/Less 的 Stylelint 检查
tomi.xasnippets	Xcode 风格代码片段（iOS 开发）
usernamehw.errorlens	行内显示错误/警告（Error Lens）
wallabyjs.console-ninja	Console Ninja（控制台日志增强）
yzhang.markdown-all-in-one	Markdown 编辑与预览增强

一键安装（在 Cursor 终端执行）：

cursor --install-extension bradlc.vscode-tailwindcss
cursor --install-extension christian-kohler.npm-intellisense
cursor --install-extension christian-kohler.path-intellisense
cursor --install-extension dbaeumer.vscode-eslint
cursor --install-extension dsznajder.es7-react-js-snippets
cursor --install-extension eamodio.gitlens
cursor --install-extension esbenp.prettier-vscode
cursor --install-extension formulahendry.auto-rename-tag
cursor --install-extension ms-ceintl.vscode-language-pack-zh-hans
cursor --install-extension pkief.material-icon-theme
cursor --install-extension ritwickdey.liveserver
cursor --install-extension steoates.autoimport
cursor --install-extension stylelint.vscode-stylelint
cursor --install-extension tomi.xasnippets
cursor --install-extension usernamehw.errorlens
cursor --install-extension wallabyjs.console-ninja
cursor --install-extension yzhang.markdown-all-in-one

---

四、后续可补充

• 各软件的偏好设置或快捷键
• 常用 Xcode 配置（证书、模拟器、Build Settings 等）
• 团队统一的 .nvmrc、.ruby-version、编辑器推荐插件配置（如放入仓库 .vscode/extensions.json）