前端环境安装

装前端环境这件事，前端说难不难，环境说简单也不简单。安装我见过太多人卡在第一步——Node.js装完了，前端npm却跑不起来，环境或者版本管理器搞混了，安装终端里一堆红色报错。前端问题往往不在技术本身，环境而在于没人告诉你哪些环节容易踩坑。安装

先从Node.js说起。前端官网下载安装包，环境一路下一步，安装看起来没问题。前端但Mac用户要注意，环境如果你之前用Homebrew装过，安装或者系统里残留了旧版本，`which node`出来的路径可能指向一个你根本不知道的地方。Windows用户则要留意安装时那个“Add to PATH”的勾选项，默认是勾上的，但有时候权限问题会导致它没生效。装完之后打开终端，敲`node -v`，能出来版本号才算过关。

版本管理是第二个坎。前端项目对Node版本敏感得离谱，有的老项目锁死在14.x，新项目又要18以上。这时候nvm就派上用场了。Mac和Linux用nvm，Windows用nvm-windows，别搞混。装nvm之前，先把之前手动装的Node卸干净，否则路径冲突会让你怀疑人生。nvm装好后，`nvm install 18`，`nvm use 18`，切换版本就是一行命令的事。有个细节：nvm在Mac上需要配置shell的启动文件，zsh的话是`.zshrc`，bash是`.bash_profile`，漏了这一步，新开终端窗口nvm命令就找不到了。

包管理器这块，npm是自带的，但速度确实慢。可以换淘宝镜像，`npm config set registry https://registry.npmmirror.com`，装包速度能快不少。yarn和pnpm也值得试试，尤其是pnpm，硬链接的机制让node_modules不再臃肿，磁盘空间省得不是一星半点。不过团队协作时注意统一，别你pnpm他yarn，lock文件打架很麻烦。

编辑器选VSCode基本是共识。装完之后几个插件建议第一时间装上：ESLint管代码规范，Prettier管格式化，Volar或者Vetur看你是Vue2还是Vue3。有个坑是ESLint和Prettier的规则冲突，保存时一个要加分号一个要去分号，文件来回跳。解决办法是在VSCode设置里把格式化交给Prettier，ESLint只负责检查不负责修复，或者装个`eslint-config-prettier`把冲突规则关掉。

浏览器方面，Chrome是标配，调试工具没得说。但别忘了装React Developer Tools或者Vue Devtools，调试组件状态的时候能省很多console.log。Firefox偶尔也要备一个，有些CSS兼容性问题在Chrome上看不出来，换个引擎就现原形了。

Git不用多说，前端协作离不开。Windows上装Git Bash，Mac自带。配置好用户名和邮箱，`git config --global user.name`和`user.email`，别小看这个，提交记录里显示乱码或者默认主机名，看着就难受。SSH key也配一下，省得每次push都输密码。

最后说个容易被忽略的：终端本身。Mac自带的Terminal凑合用，但iTerm2加Oh My Zsh体验会好很多，主题、补全、git状态提示，用惯了回不去。Windows的话，Windows Terminal比cmd和PowerShell好用太多，支持多标签和自定义配色。

环境装好只是开始，后面还会遇到各种依赖冲突、缓存问题、权限报错。遇到报错先别慌，把错误信息完整读一遍，多半能看出线索。实在不行，删掉node_modules和lock文件重装，能解决百分之八十的玄学问题。剩下的百分之二十，搜索引擎和Stack Overflow等着你。