XMit
macOS 前端开发环境配置指南
XMit Lv3
  2024 年 10 月 29 日 00:00   2024 年 11 月 19 日 08:42  

系统准备

首先确保你的 macOS 系统已安装了 Xcode Command Line Tools：

1
xcode-select --install

安装 Homebrew

  1. 安装 Homebrew：

    1
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

  2. 更新 Homebrew：

    1
    brew update

配置 Zsh

1. 检查当前 Shell

首先检查你当前使用的 Shell：

1
echo $SHELL

2. 安装 Zsh

macOS 从 Catalina (10.15) 开始默认使用 Zsh。如果你使用的是较早版本，可以通过 Homebrew 安装：

1
brew install zsh

3. 设置 Zsh 为默认 Shell

1
2
3
4
5
# 将 Zsh 添加到可用的 Shell 列表中
sudo sh -c 'echo $(which zsh) >> /etc/shells'

# 将 Zsh 设置为默认 Shell
chsh -s $(which zsh)

4. 重启终端

设置完成后，关闭并重新打开终端，或者运行：

1
exec zsh

5. 验证 Zsh

确认是否成功切换到 Zsh：

1
2
echo $SHELL
# 应该显示: /bin/zsh 或 /usr/local/bin/zsh

6. 安装 Oh My Zsh

1
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

7. 安装插件

1
2
3
4
5
6
7
8
# 安装 fast-syntax-highlighting
git clone https://github.com/zdharma-continuum/fast-syntax-highlighting ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/plugins/fast-syntax-highlighting

# 安装 zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

# 安装 zsh-completions
git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-completions

8. 创建并配置 .zshrc 文件：

1
2
3
4
5
# 备份现有配置
cp ~/.zshrc ~/.zshrc.backup

# 创建新的配置文件
vi ~/.zshrc

9. 将以下配置复制到 .zshrc：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
# Path configuration
export PATH=$HOME/bin:$HOME/.local/bin:/usr/local/bin:$PATH

# Oh My Zsh configuration
export ZSH="$HOME/.oh-my-zsh"
ZSH_THEME="robbyrussell"  # 你可以选择其他主题

# Performance options
DISABLE_AUTO_UPDATE="true"
DISABLE_MAGIC_FUNCTIONS="true"
COMPLETION_WAITING_DOTS="true"

# History configuration
HISTSIZE=50000
SAVEHIST=50000
HISTFILE=~/.zsh_history
setopt HIST_IGNORE_ALL_DUPS
setopt HIST_SAVE_NO_DUPS
setopt HIST_REDUCE_BLANKS
setopt HIST_VERIFY
setopt SHARE_HISTORY

# Plugin configuration
plugins=(
    git
    node
    npm
    vscode
    colored-man-pages
    brew
    macos
    fast-syntax-highlighting
    zsh-autosuggestions
    zsh-completions
    docker
    docker-compose
)

# Load Oh My Zsh
source $ZSH/oh-my-zsh.sh

# Load completions
autoload -Uz compinit && compinit -i
zstyle ':completion:*' menu select
zstyle ':completion:*' matcher-list 'm:{a-zA-Z}={A-Za-z}'

# Useful aliases
alias zshconfig="code ~/.zshrc"
alias update='brew update && brew upgrade && brew cleanup'
alias ls='ls -G'
alias ll='ls -lah'
alias c='clear'
alias ..='cd ..'
alias ...='cd ../..'
alias gst='git status'
alias gco='git checkout'
alias gcm='git commit -m'
alias gaa='git add .'
alias gl='git log --graph --oneline'

# Environment variables
export EDITOR='code'
export LANG=en_US.UTF-8
export LC_ALL=en_US.UTF-8

# NVM configuration (will be added later)

安装 Git

  1. 通过 Homebrew 安装 Git：

    1
    brew install git

  2. 配置 Git：

    1
    2
    3
    4
    5
    6
    7
    8
    git config --global user.name "你的名字"
    git config --global user.email "你的邮箱"

    # 配置默认分支名
    git config --global init.defaultBranch main

    # 配置 Git 使用 VS Code 作为默认编辑器
    git config --global core.editor "code --wait"

安装 Node 版本管理器

  1. 安装 nvm：

    1
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

  2. 在 .zshrc 中添加 NVM 配置（在文件末尾添加）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # NVM configuration
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

    # 为常用的 node 命令添加别名
    alias nr='npm run'
    alias nrd='npm run dev'
    alias nrs='npm run start'
    alias nrb='npm run build'
    alias nrt='npm run test'

  3. 安装最新的 LTS 版本的 Node.js：

    1
    2
    3
    nvm install --lts
    nvm use --lts
    nvm alias default 'lts/*'

安装开发工具

  1. 安装常用开发工具：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # 安装 VS Code
    brew install --cask visual-studio-code

    # 安装 Chrome
    brew install --cask google-chrome

    # 安装 Docker
    brew install --cask docker

    # 安装其他实用工具
    brew install tree  # 目录树查看
    brew install wget  # 下载工具
    brew install tldr  # 命令帮助
    brew install jq    # JSON 处理工具

  2. 安装常用的全局 npm 包：

    1
    2
    3
    4
    5
    6
    npm install -g pnpm
    npm install -g yarn
    npm install -g typescript
    npm install -g @vue/cli
    npm install -g serve
    npm install -g http-server

可选配置

  1. 安装和配置 SSH key：

    1
    2
    3
    ssh-keygen -t ed25519 -C "你的邮箱"
    eval "$(ssh-agent -s)"
    ssh-add ~/.ssh/id_ed25519

  2. 安装字体：

    1
    2
    3
    # 安装 Fira Code
    brew tap homebrew/cask-fonts
    brew install --cask font-fira-code

  3. 安装其他实用工具：

    1
    2
    3
    4
    5
    6
    7
    # iTerm2 终端
    brew install --cask iterm2

    # 实用工具
    brew install --cask rectangle  # 窗口管理
    brew install --cask alfred    # 效率工具
    brew install --cask postman  # API 测试工具

验证安装

完成安装后，运行以下命令检查是否安装成功：

1
2
3
4
5
6
7
8
9
10
11
# 检查 Git 版本
git --version

# 检查 Node 版本
node --version

# 检查 npm 版本
npm --version

# 检查 Homebrew 版本
brew --version

日常维护

定期运行以下命令保持系统更新：

1
2
3
4
5
6
7
8
# 更新 Homebrew
brew update && brew upgrade && brew cleanup

# 更新 npm 包
npm update -g

# 更新 Oh My Zsh
omz update

注意事项

  1. 如果安装过程中遇到权限问题，可能需要使用 sudo
  2. 某些系统可能需要重启电脑才能完全生效
  3. 如果想要恢复到 bash，可以使用：
    1
    chsh -s /bin/bash

故障排除

如果遇到以下问题：

  1. 提示 zsh 不在 /etc/shells 中

    1
    sudo sh -c 'echo $(which zsh) >> /etc/shells'

  2. 权限问题

    1
    2
    # 确保 Zsh 目录权限正确
    sudo chown -R $(whoami) ~/.oh-my-zsh

  3. 插件安装失败

    1
    2
    # 确保 custom/plugins 目录存在
    mkdir -p ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins
macOS 前端开发环境配置指南
2024/10/29/macos-dev-env-config/
作者
XMit
发布于
2024-10-29 00:00
许可
  1. 系统准备
  2. 安装 Homebrew
  3. 配置 Zsh
    1. 1. 检查当前 Shell
    2. 2. 安装 Zsh
    3. 3. 设置 Zsh 为默认 Shell
    4. 4. 重启终端
    5. 5. 验证 Zsh
    6. 6. 安装 Oh My Zsh
    7. 7. 安装插件
    8. 8. 创建并配置 .zshrc 文件：
    9. 9. 将以下配置复制到 .zshrc：
  4. 安装 Git
  5. 安装 Node 版本管理器
  6. 安装开发工具
  7. 可选配置
  8. 验证安装
  9. 日常维护
  10. 注意事项
  11. 故障排除
© 2015 - 2024    XMit
由 Hexo 驱动 & 主题 Keep
本站由 提供部署服务
  1. 系统准备
  2. 安装 Homebrew
  3. 配置 Zsh
    1. 1. 检查当前 Shell
    2. 2. 安装 Zsh
    3. 3. 设置 Zsh 为默认 Shell
    4. 4. 重启终端
    5. 5. 验证 Zsh
    6. 6. 安装 Oh My Zsh
    7. 7. 安装插件
    8. 8. 创建并配置 .zshrc 文件：
    9. 9. 将以下配置复制到 .zshrc：
  4. 安装 Git
  5. 安装 Node 版本管理器
  6. 安装开发工具
  7. 可选配置
  8. 验证安装
  9. 日常维护
  10. 注意事项
  11. 故障排除