工欲善其事，必先利其器：配置前端开发环境指南

1. 编辑器：WebStorm 或者 vscode

WebStorm 是一款功能强大的前端开发 IDE，特别是它的git操作工具，用了的都说好，适合开发 JavaScript、TypeScript、React、Vue 等项目。

2. 网络工具

小猫咪是一款网络代理工具，支持全局代理和规则代理，适合开发者访问 GitHub 仓库。

安装与配置

1. 下载：从 GitHub 或其他可信来源下载。

2. 购买机场服务：获取订阅链接并导入 小猫咪。

3. 配置全局代理：

   • 在 Proxies 选项卡下，选择 Global 模式并选择一个节点。

   • 安装 Service Mode 以启用系统代理。

   • 开启 TUN Mode 和 System Proxy。

4. 验证代理效果：

   • 在终端运行 curl cip.cc 或访问 cip.cc，查看 IP 地址和地区信息。
   • 如果显示为海外 IP，则代理配置成功。

3. Node.js 管理工具：Volta

Volta 是一款轻量级的 Node.js 版本管理工具，支持为每个项目固定 Node.js 和 npm 版本。

安装与使用

1. 下载 Volta：从 GitHub Releases 下载最新版本。
2. 常用命令

   // 安装工具依赖, 并设置为默认版本
   volta install node@18.16.0
   // 将node的版本固定到项目中（会在package.json上生成对于的配置项目，运行项目命令时会自动切换到对于的node版本） 
   volta pin node@18.16.0 
   // 查看已经的工具版本列表
   volta list node
   

3. Monorepo 项目配置
   • 在子项目的 package.json 中添加以下配置：

     {
        "volta": {
            "extends": "../../package.json"
         }
     }
    
   

4. PNPM 支持：

• 设置系统环境变量 VOLTA_FEATURE_PNPM=1。
• 注意：Volta 不支持管理 PNPM 版本。

4. Git 版本控制工具

Git 是开发中必不可少的版本控制工具，以下介绍安装和基本配置。

安装 Git

• 手动下载地址：Git 官网
• 包管理器下载

   // mac 
  brew install git
  // win11 
  winget install Git.Git
  

• 配置用户信息：

  // 修改git的用户名
  git config --global user.name "张三"
  // 修改git的用户邮箱
  git config --global user.email “12345678910@qq.com”
  // 查看修改配置
  git config --list
  

克隆仓库

1. SSH 方式：

   • 生成 SSH 密钥：参考 GitHub SSH 文档。
   • 将公钥（.pub 文件）添加到 GitHub、GitLab 等代码托管平台。

2. HTTP 方式：

   • 直接拼接用户名和密码 git clone http://账号:密码@git.test.com.cn/root/xx.git

5. 修改host工具

SwitchHosts 是一款方便管理 Hosts 文件的工具，支持多环境切换。

1. 下载地址：SwitchHosts 官网
2. 修改 Hosts 文件权限：
   • 如果无法直接修改 Hosts 文件，需要调整 C:\Windows\System32\drivers\etc\hosts 文件的权限。
   • 右键文件 -> 属性 -> 安全 -> 编辑，赋予当前用户写入权限。