写第一行前端代码之前，得先把环境准备妥当。不少新手在这一步就卡住：装了Node.js却提示命令不存在，npm下载包慢得像蜗牛，Git提交时各种报错。其实前端环境搭建并不复杂，只是涉及的工具有好几样，顺序和细节没搞对就容易出问题。这篇文章按照实际操作的先后顺序，把每一项工具的安装和配置讲透，看完照做就能跑通。
一、为什么Node.js是前端环境的基础
很多人以为前端只需要浏览器，跟Node.js没关系。这个认知放在十年前或许成立，但现在的开发流程已经完全离不开它了。你平时用到的构建工具、脚手架、包管理器，绝大多数都运行在Node.js之上。比如初始化一个Vue或React项目用的命令行工具，本质上是Node.js脚本；安装依赖包用的npm，也是随Node.js一起发布的。
所以第一步就是去官网下载Node.js安装包。建议选择LTS长期支持版，而不是最新尝鲜版，LTS版本更稳定，兼容性问题少。Windows用户下载msi安装包后一路下一步即可，安装过程中会自动配置环境变量。macOS用户可以下载pkg安装包，或者用Homebrew执行brew install node命令安装。
安装完成后打开命令行，输入下面两条命令验证是否成功：
node -v npm -v
如果能分别输出版本号，比如v20.11.0和10.2.4，说明安装成功。这里有个常见坑：命令行窗口必须重新打开才能识别新安装的命令，很多人装完直接在旧窗口里敲命令，提示node不是内部或外部命令，就以为安装失败了，其实重开一个窗口就好。
如果确实提示命令不存在，那多半是环境变量没配置好。Windows系统需要在系统属性的Path变量中确认包含Node.js的安装目录，比如C:\Program Files\nodejs\。注意路径中的反斜杠是Windows的标准写法，不要误改成斜杠。
二、npm配置与镜像源加速
Node.js装好之后，npm就可以用了，但默认的官方源服务器在国外，下载速度经常不理想。配置国内镜像是提升体验最直接的办法。执行下面这条命令把源切换到淘宝镜像：
npm config set registry https://registry.npmmirror.com
配置完可以用npm config get registry查看当前源是否生效。除了换源，还有两个配置建议顺手做掉。第一是设置全局安装目录，避免某些系统下全局安装包需要管理员权限；第二是固定一个缓存目录，方便日后清理：
npm config set prefix "D:\nodejs\npm_global" npm config set cache "D:\nodejs\npm_cache"
改了全局目录之后，记得把这个目录也加到系统Path环境变量里，否则全局安装的命令行工具会找不到。比如后面用npm install -g装脚手架工具时，装完却发现命令不可用，十有八九就是这个问题。
另外提一句版本管理的问题。如果以后需要在多个项目间切换不同的Node.js版本，手动装卸会非常麻烦。Windows下可以安装nvm-windows工具，macOS和Linux下用nvm，切换版本只需一条命令，比如nvm use 18。虽然这不是必装项，但项目做多了一定会用到。
三、编辑器与必备插件
编辑器方面，目前主流选择是VS Code，免费、轻量、插件生态丰富。去微软官网下载对应系统的安装包即可。装好后有几个插件建议立刻装上，能明显提升开发效率。
首先是语言支持和代码格式化类插件。如果主写Vue就装Volar，主写React则装对应的语法提示插件。格式化工具推荐Prettier，配合ESLint可以在保存时自动格式化代码，保证团队代码风格统一。可以在VS Code的设置中开启保存自动格式化：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}其次是辅助类插件，比如Auto Rename Tag可以在修改HTML标签名时自动同步配对标签，Path Intellisense在引入文件路径时提供自动补全，这些小功能积累起来能省不少时间。浏览器调试方面，VS Code自带的Live Server类插件可以把静态页面跑在本地服务器上，避免直接双击打开HTML文件时出现的一些跨域和路径问题。
四、Git与项目初始化
版本管理是团队协作的基础，Git属于必装工具。Windows用户安装时注意勾选把Git加入PATH的选项，装完在命令行验证：
git --version
首次使用需要配置用户名和邮箱，这个信息会记录在每一次提交里：
git config --global user.name "你的名字" git config --global user.email "your@mail.com"
装好Git之后，前端环境就算基本齐了。接下来可以尝试初始化一个项目验证整套流程，比如用Vite创建一个项目：
npm create vite@latest my-app cd my-app npm install npm run dev
命令执行完，浏览器打开终端提示的本地地址，能看到页面正常渲染，说明Node.js、npm、编辑器整条链路都没问题。
五、常见问题与注意事项汇总
最后把高频踩坑点集中列一下，方便对照排查。这些问题基本都是环境配置阶段的典型状况。
- 命令安装成功但无法执行：优先检查环境变量Path，其次是修改全局目录后忘记把新目录加入Path。
- npm install报权限错误：Windows下用管理员身份运行命令行，或者按前文方式修改全局安装目录到非系统盘。
- 依赖安装到一半卡住：换镜像源，删除项目下的node_modules目录和package-lock.json文件后重新安装。
- node-sass等包编译失败：这类依赖对Node.js版本敏感，版本太新或太旧都可能编译不过，按包的官方说明切换匹配的Node版本。
- 端口被占用：开发服务器启动报端口冲突时，关闭占用进程或者修改项目配置中的端口。
还有一点值得强调：不同项目对Node.js版本的要求可能不一样，遇到莫名其妙的依赖报错时，先怀疑版本问题往往是最快的排查思路。环境搭建属于一次性的工作，前期多花半小时把各项配置理顺，后面的开发过程会顺畅很多。等这套环境用熟练了，再按需补充Yarn、pnpm等工具也不迟。