前端/iOS开发者必备工具软件合集一、环境与包管理（安装顺序建议） 1. Homebrew Mac 的包管理器，建议最先

近期新购入了一款 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

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

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

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

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. rvm + CocoaPods

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

# 安装 rvm
curl -sSL https://get.rvm.io | bash -s stable
source ~/.rvm/scripts/rvm

# 安装 Ruby（建议 3.x，与 CocoaPods 兼容好）
rvm install 3.2.0
rvm use 3.2.0 --default

# 安装 CocoaPods
sudo gem install cocoapods -n /usr/local/bin

常用技巧：

rvm
- rvm list：已安装 Ruby 列表
- rvm use 3.2.0：切换版本
- 项目目录放 .ruby-version 可自动切换
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
picgo install gitee-uploader

配置gitee

{ "picBed": 
    { "current": "gitee", 
        "gitee": 
            { "repo": "你的用户名/仓库名",
            "branch": "master", 
            "token": "你的Gitee私人令牌", 
            "path": "img/", 
            "customUrl": "" 
            }
        },
        "picgoPlugins": { "gitee-uploader": true }
}

配置图片自动上传
- 选择自定义命令
- 输入 "/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）

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

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

1. Homebrew

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

nvm

FNM

3. pnpm

4. rvm + CocoaPods

二、必备软件列表

Typora 配置

三、Cursor 已安装插件

四、后续可补充

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