学习笔记 - 个人开发环境配置个人开发环境配置，包括格式化电脑，安装系统，配置开发环境，安装开发工具，安装开发工具的依赖

最近在海鲜市场入手了一台 second-hand MacBookPro，记录一下配置个人开发环境的过程。

初始化电脑

重启电脑，然后立即按住 Command (⌘) 和 R 这两个按键，直至看到 Apple 标志或其他图像，进入到下图的界面，点击“磁盘工具”。
进入“磁盘工具”后，点击选择左边第一个”宗卷组“（我的电脑上显示的是“未命名”），再点击右边的“抹平”，再点击继续按钮。
然后电脑重启，进入到选 Wi-Fi 的界面，连接成功后开始下载系统。
- 下载过程中出现了“apple.com/support - 2003F”，网上说是网络问题，只能重启电脑，同样的情况出现了2次。
- 下载过程中出现了“apple.com/support - 1008F“，没有找到具体的原因，只能重启电脑，同样的情况出现了数次之多。
下载完之后再次进入到安装界面，选择“重新安装”即可。

最终耗时5个小时左右，达到了一个台“新机”的状态。

配置开发环境

新建文件 ~/.zshrc 并修改文件归属为当前用户

chown 用户名 文件名

安装 Homebrew

打开官网 brew.sh/ ，在终端运行以下命令：

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

异常处理

执行安装命令过程中可能会出现

curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused error

网上有多种解决方法，尝试操作之后或多或少存在一些问题，因此记录了一个比较稳妥的方案：

通过 www.ipaddress.com/ 查询 raw.githubusercontent.com 的真实IP，并映射到本地配置文件/etc/hosts中，再次执行上述命令安装。
把 brew 的镜像源切换成中科大源

# 替换 brew 的仓库地址
git -C "$(brew --repo)" remote set-url origin https://mirrors.ustc.edu.cn/brew.git

# zsh 替换 brew bintray 镜像 
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.zshrc
source ~/.zshrc

# 刷新源
brew update

配置终端显示分支名

安装 vcprompt

brew install vcprompt

在~/.zshrc文件中配置显示的格式

setopt prompt_subst
export PS1='%n@%m:%~ $(vcprompt)$ '

source ~/.zshrc

打开一个终端窗口查看是否显示分支名

安装 nvm

打开Github github.com/nvm-sh/nvm)，在终端运行以下命令：

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

当提示写入~/.zshrc文件失败，或者执行 mvn 命令失败后，检查~/.zshrc是否包含以下内容

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

手动写入~/.zshrc文件后再执行以下命令

source ~/.zshrc

配置 node 环境

安装 node

nvm use 20

安装 nrm

npm i -g nrm
nrm use taobao

安装 pnpm

npm i -g pnpm

安装 git 提交模板

npm install -g commitizen cz-conventional-changelog
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

安装 vscode

从官网上下载 code.visualstudio.com/

安装插件

个人习惯插件

Auto Close Tag
Auto Complete Tag
Auto Rename Tag
Code Spell Checker
Error Lens
ESLint
GitLens
IntelliCode
JavaScript (ES6) code snippets
Manta's Stylus Supremacy
npm Intellisense
Path Autocomplete
Path Intellisense
Search node_modules
Simple React Snippets
TONGYI Lingma
Vue

编辑器设置

{
  "workbench.colorTheme": "Monokai",
  "editor.tabSize": 2,
  // 在jsx中使用emmet语法
  "emmet.triggerExpansionOnTab": true,
  // 在js中使用emmet语法
  "emmet.includeLanguages": {
    "javascript": "html"
  },
  // 以下为stylus配置
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": true, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": true, // 两个选择器中是否换行
  "[stylus]": {
    "editor.formatOnSave": true,
  },
  // 使用eslint格式化js
  "[javascript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "always",
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  // 使用eslint格式化jsx
  "[javascriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "always",
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  // 使用eslint格式化ts
  "[typescript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "always",
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  // 使用eslint格式化tsx
  "[typescriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "always",
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": "always"
    },
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[scss]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": "always"
    },
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

安装 code 命令

打开 vscode，按下 command + shift + p 键，然后搜索code，选择 Install 'code' command in PATH。