在前端开发的世界里，一个高效、稳定的开发环境是高效工作的基石。它不仅能够提升你的工作效率，还能帮助你更快地适应团队的工作节奏。本文将详细介绍前端开发需要具备的环境及工具。
开发环境
Node.js
通常我们的前端项目都是依赖Node.js环境的，但是不同的项目可能会对Node.js的版本有不同的要求。为了灵活地管理这些不同版本的Node.js，我们通常不推荐直接在系统上安装Node.js，而是采用Node.js版本管理工具，如NVM（Node Version Manager）。
Node.js版本管理工具NVM
NVM是一个简单而强大的工具，它允许我们在同一台机器上安装和切换不同版本的Node.js，从而确保每个项目都能运行在合适的环境中。这不仅提高了开发效率，还避免了版本冲突带来的问题。以下是Mac电脑安装NVM的步骤：
1.打开终端，然后运行以下命令来安装NVM。这个命令会从NVM的官方GitHub仓库下载安装脚本，并使用bash执行它。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
2.配置环境变量，以便在终端中使用NVM。在~下执行nano ~/.zshrc，在打开的编辑器中，添加以下行到文件的末尾：
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
3.保存并退出编辑器。在 nano 编辑器中，按 Ctrl + O 保存文件，按回车确认，然后按 Ctrl + X 退出编辑器。
4.重新加载配置文件。为了让更改立即生效，需要重新加载.zshrc文件。在终端中运行以下命令：source ~/.zshrc
5.验证NVM安装。最后通过运行以下命令来验证NVM是否安装成功：执行nvm或nvm -v查看是否安装成功。
Tips：Windows电脑的安装可以在这里选择对应安装包安装解压即可。
最后可以参考下方安装指定版本的Node.js。
NVM常用命令：
nvm install <version> ## 安装指定版本，可模糊安装，如：安装v4.4.0，既可nvm install v4.4.0，又可nvm install 4.4
nvm uninstall <version> ## 删除已安装的指定版本，语法与install类似
nvm alias default 18 ## 设置全局默认的 Nodejs 版本为 18
nvm use <version> ## 切换使用指定的版本node
nvm ls ## 列出所有安装的版本
nvm ls-remote ## 查看现在 Nodejs 都有哪些版本 nvm ls-remote | grep v14
npm源设置
在前端开发中，设置正确的npm源（registry）是非常重要的，因为它决定了npm包的下载速度和稳定性。有时，由于网络问题，直接使用npm的默认源可能会很慢或者不稳定。在这种情况下，我们可以设置一个更快的npm源，比如使用国内的npm镜像源。
全局设置npm源： 如果你想要为整个系统设置一个默认的npm源，可以使用以下命令：
npm config set registry https://registry.npmmirror.com/
私有npm： 如果你的项目需要访问特定的私有npm仓库，比如@xxx的私有包，你可以设置特定的scope源：
npm config set @xxx:registry https://rnpm.xxx.com
这样，当你安装@xxx作用域下的包时，npm将会使用这个特定的源。
项目级npm源： 如果你只想为特定的项目设置npm源，而不是全局设置，你可以在项目的根目录下创建或编辑.npmrc文件，并添加以下内容：
registry=https://registry.npmmirror.com/
@xxx:registry=https://rnpm.xxx.com
这样，只有在这个项目中运行npm命令时，才会使用这些设置的源。
npm源管理器NRM
在前端开发中，npm源的稳定性和速度对开发效率有着直接影响。由于不同的npm源可能在不同时间表现各异，有时某些源可能访问缓慢，甚至出现访问失败的情况，而有的源可能没有最新的包版本。因此，能够快速切换到一个稳定且更新的npm源是非常有用的。
nrm 是一个npm源管理器，它提供了一个简单而高效的方式来管理和切换不同的npm源。使用nrm，你可以轻松地在多个npm源之间切换，以确保始终使用最佳的源来安装和管理你的npm包。
安装nrm： npm install -g nrm
查看是否安装成功： nrm --version
查看nrm支持的所有npm源： nrm ls
前面带 * 号的表示正在使用的源。
切换源： nrm use <registry>
添加新的源： nrm add <registry> <url>
删除源： nrm del <registry>
设置默认源： nrm set default <registry>
开发工具
Homebrew
Homebrew 是 macOS 上一款常用的包管理工具，用于安装、升级和管理软件包，可以通过它来安装 Git 等。
安装 Homebrew 非常简单，只需在终端中运行以下命令：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
版本控制工具Git
通过 Homebrew 可以安装 Git，在终端中输入以下命令即可：
brew install git
设置git提交的用户名和邮箱：
git config --global user.name "yourname"
git config --global user.email yourname@xxx.com
常用git命令：
git clone xxx克隆项目代码
git status查看git信息
git pull从当前分支跟踪的远程分支拉取最新代码并合并，包含了两个操作：
git fetch: 从远程仓库下载最新的代码变更，但是不合并到本地分支。
git merge: 将远程分支的变更合并到当前本地分支。
git add .添加到暂存区
git commit -m ""提交代码
git push origin dev推送代码到远端对应分支dev
commit message可选项：
feat：新增了一个功能，和语义化版本中的次版本号对应
fix：修复了一个bug，和语义化版本中的修订号对应
refactor：重构
docs：文档
style：格式，不影响代码运行的变更
build：影响构建系统或外部依赖的变更
perf：改进性能的变更
chore：杂项
VSCode
下载地址：https://code.visualstudio.com/
VSCode插件推荐：
浏览器
浏览器推荐使用Chrome。
截图贴图工具Snipaste
Snipaste是一款功能强大的截图和贴图工具，Windows和Mac都可以使用。
下载地址：https://zh.snipaste.com/
