🖥️ 前端开发新手指南｜新电脑/入职环境配置指南（附工具推荐）
关键词：前端开发环境搭建｜新电脑配置｜VsCode配置｜Node版本管理｜Git使用指南｜Chrome插件推荐
📂 文章目录
一、必备开发工具安装二、Node.js环境配置三、扩展工具推荐
💼 一、必备开发工具安装
1.1 核心工具清单
工具名称官方下载地址使用场景VSCode中文官网代码编辑/调试HBuilderXDCloud官网小程序/混合开发Git客户端Git-SCM官网版本控制Chrome浏览器官方镜像调试/插件扩展
1.2 基础操作示例
克隆远程仓库项目（右键菜单选择 Git Bash Here）
git clone 远程仓库的项目地址
📘 Git详细教程参考：《Git安装与基础操作》
🚀 二、Node.js环境配置
这里建议大家直接去安装nvm，通过nvm再去安装node.js。原因很简单，在实际的前端开发中，我们很有可能会遇到需要不同版本的node.js，nvm就可以派上大用场了，它可以安装、切换多个不同版本的node。
2.1 NVM安装步骤
下载Windows版NVM：官网地址
验证安装：
nvm -v # 查看版本号
2.2 Node版本管理
nvm list available # 查看可用版本
nvm install 22.14.0 # 安装指定版本
nvm use 22.14.0 # 切换版本
nvm uninstall 22.14.0 # 卸载版本
版本类型说明Current版最新功能版（尝鲜使用）LTS版长期支持版（生产环境推荐）OLD STABLE版以前的稳定发行版OLD UNSTABLE版以前的不稳定版
2.3 包管理工具
npm -v # 查看npm版本
npm install -g yarn # 全局安装yarn
🧩 三、扩展工具推荐
3.1 Chrome必备插件
Vue.js Devtools - Vue项目调试React Developer Tools - React项目调试FeHelper - JSON格式化/二维码生成
🔧 插件安装方法：
访问极简插件市场
下载.crx文件后拖拽至浏览器扩展页面
重启浏览器生效
3.2 国内镜像加速方案
# 配置淘宝镜像
npm config set registry https://registry.npmmirror.com
# Yarn镜像加速
yarn config set registry https://registry.npmmirror.com
✅ 如果遇到其他问题，欢迎在评论区留言交流！