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

芝加哥兔兔养殖场
89 阅读4分钟

近期新购入了一款 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)"' >> ~/.zprofile && eval "$(/opt/homebrew/bin/brew shellenv)"

常用技巧：

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

2. nvm（Node 版本管理）

多项目可能依赖不同 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版本

3. pnpm

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

# 安装（建议在配置好 nvm 后执行，全局安装到当前 Node）
npm install -g pnpm
# 或使用 Homebrew
brew install 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：更新 CocoaPods 官方 spec 仓库（卡住时常用）
    • 国内镜像若慢，可在 Podfile 顶部指定 source，或使用 CDN 源

二、必备软件列表

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

Typora 配置

图片自动上传

  • 安装 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
    • 如果报错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

三、Cursor 已安装插件

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

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

一键安装（在 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）
avatar
文章
阅读
粉丝