前端新人入职的第一天通常就是配置环境，熟悉项目。本文就来分享前端新人入职第一天应该如何配置环境，保姆级教程，值得收藏！
本文以 Mac 系统为例，使用 Windows 的小伙伴也可以参考！
开发环境
Node.js
通常我们的项目都是依赖Node.js 环境的，所以第一步就来安装 Node.js。
打开 Node.js 官网（**nodejs.org/en**），其会自动识… Node.js：LTS（稳定版） 和 Current（最新版），这里建议下载稳定版，新版可能存在一些Bug。
下载完成后之后，按照提示一步步安装即可：
这个安装包含 Node.js 和 Npm。我这里安装的是 Node.js v18.16.1 和 Npm v9.5.1。可以在终端中通过 node -v 和 npm -v命令来分别查看 Node.js 和 Npm 版本：
nvm
不同的项目可能对 Node.js 的版本要求不同，这时我门就需要切换不同版本的 Node.js。我们可以通过 Nvm 来管理Node.js 版本。
nvm（Node Version Manager）是一个用于管理 Node.js 版本的工具，它被设计成每个用户独立安装，并在每个终端会话中调用。nvm 可以在任何符合 POSIX 标准的 shell（如 sh、dash、ksh、zsh、bash）上运行，特别适用于以下平台：Unix、macOS 和 Windows 的 WSL（Windows Subsystem for Linux）。
nvm 的主要功能是允许用户轻松切换不同版本的 Node.js，并在不同的项目中使用不同的 Node.js 版本。它为每个已安装的 Node.js 版本提供隔离的运行环境，使得用户可以在同一系统上同时使用多个 Node.js 版本而不会相互干扰。
首先在终端中通过以下命令来安装 nvm：
javascript
复制代码
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash当我输入该命令后，终端就报错了，报错信息：curl: (7) Failed to connect to raw.githubusercontent.com port 443 after 5 ms: Couldn't connect to server，这个报错是因为github 有些域名访问不到，可以通过配置hosts里面的ip域名对应关系解决。
- 在终端中输入以下命令来打开hosts文件以进行编辑：
javascript
复制代码
sudo vim /etc/hosts- 在文件中追加以下对应关系：
199.232.68.133 raw.githubusercontent.com 199.232.68.133 user-images.githubusercontent.com 199.232.68.133 avatars2.githubusercontent.com 199.232.68.133 avatars1.githubusercontent.com
然后按下ESC键，输入:w来保存即可。这个配置不仅可以解决 nvm 的安装问题，还能使加载不了图片的 GitHub页面恢复正常，homebrew 也能装了。然后再输入上面的命令就可以安装nvm了。
安装完成之后，重新打开终端，输入 nvm，如果出现以下内容就是安装成功了：
如果报错：zsh: command not found: nvm，那就是安装失败了。原因就是电脑缺少 bash_profile 文件。该文件位于/Users/MacUserName/.bash_profile路径，如果没有就创建一个，通过以下命令来创建：
touch .bash_profile然后通过以下命令来打开该文件：
open .bash_profile在文件中添加以下内容：
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
保存之后，在终端中输入以下命令来刷新配置：
source ~/.bash_profile重新打开终端，输入nvm 来查看：
安装成功就可以愉快的玩耍啦，nvm 提供了很多命令管理 Node.js 版本。当输入 nvm 时，也会列出来所有可用的命令，下面来看看常用的 nvm 命令。
- 安装 Node.js 版本：
- 安装最新稳定版的 Node.js：
nvm install stable - 安装指定版本的 Node.js：
nvm install（例如：nvm install 14.17.0）
- 切换 Node.js 版本：
- 切换到已安装的其中一个版本：
nvm use（例如：nvm use 14.17.0） - 可以通过简写版本号进行切换（例如
nvm use 14），nvm 将自动选择符合的已安装版本。 - 如果在项目目录中创建了
.nvmrc文件，nvm 在进入该目录时会自动切换到文件中指定的 Node.js 版本。
- 查看已安装的 Node.js 版本：
- 列出已安装的所有版本：
nvm ls - 列出远程可用的所有版本：
nvm ls-remote
- 卸载 Node.js 版本：
- 卸载指定的 Node.js 版本：
nvm uninstall（例如：nvm uninstall 14.17.0）
- 设置默认的 Node.js 版本：
- 设置默认版本：
nvm alias default（例如：nvm alias default 14.17.0） - 这样，在新打开的终端中将自动使用默认版本。
- 运行 Node.js 命令和 npm：
- 在已安装的 Node.js 版本下运行命令：
nvm exec（例如：nvm exec 14.17.0 node -v） - 在当前使用的 Node.js 版本下运行命令：
nvm run（例如：nvm run node -v）
nrm
在开发中，我们通常需要安装很多 npm 包，而默认的 npm 源有时候就可能下载很慢，所以就需要切换 npm 源，nrm 就可以帮助我们管理和切换 nrm 源。其特点如下：
- 管理多个源：nrm 允许管理多个 npm 源，例如官方源、淘宝源、cnpm 源等。你可以根据需要快速切换不同的源。
- 快速切换：nrm 提供了快捷的命令来切换 npm 源，无需手动修改配置文件。你可以通过简单的命令在不同的源之间进行切换。
- 测试速度：nrm 可以测试各个源的响应速度，并给出评分，帮助你选择最快的源来加快依赖包的下载速度。
使用方法：
- 安装：首先，需要在全局安装 nrm。在命令行中执行以下命令即可：
javascript
复制代码
npm install -g nrm- 查看可用源：你可以使用以下命令查看当前可用的源列表：
javascript
复制代码
nrm ls- 切换源：要切换到某个源，可以使用以下命令：
javascript
复制代码
nrm use <源名称>例如，要切换到 taobao 源，可以执行：
javascript
复制代码
nrm use taobao- 测试源的速度：你可以通过以下命令测试各个源的响应速度：
javascript
复制代码
nrm test- 添加自定义源：如果你有自定义的源，可以通过以下命令添加：
javascript
复制代码
nrm add <源名称> <源地址>例如，添加一个名为 myregistry 的自定义源：
javascript
复制代码
nrm add myregistry http://myregistry.com/- 删除源：如果要删除已添加的源，可以使用以下命令：
javascript
复制代码
nrm del <源名称>在安装 nrm 时，我遇到以下报错，这就是说没有安装权限：
可以使用管理员权限进行安装，只需要在命令前面增加以一个 sudo，执行 后输入电脑的密码即可。
Homebrew
Homebrew 是 macOS 上一款常用的包管理工具，用于安装、升级和管理软件包，可以通过它来安装 Git 等。
使用方法如下：
- 安装：在终端中执行以下命令来安装 Homebrew：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"- 安装软件包：要安装一个软件包，只需在终端中执行以下命令：
brew install <软件包名称>例如，要安装 wget 软件包，可以执行：
brew install wget- 升级软件包：可以使用以下命令来升级已安装的软件包：
brew upgrade <软件包名称>例如，要升级所有已安装的软件包，可以执行：
brew upgrade- 查找软件包：如果不确定某个软件包的名称，可以使用以下命令进行模糊搜索：
brew search <关键词>- 列出已安装的软件包：可以使用以下命令列出已经安装的软件包：
brew list- 删除软件包：要删除已安装的软件包，可以执行以下命令：
CopyCodebrew uninstall <软件包名称>- 更新 Homebrew：可以使用以下命令来更新 Homebrew 自身：
brew update开发工具
IDE
前端开发用的最多的 IDE 就是 Visual Studio Code 和 Webstorm。其中 VS Code 是开源的，完全免费，而Webstorm 是需要付费订阅的。笔者一直在用 VS Code，这里以 VS Code 为例，看看如何安装它。
Visual Studio Code（简称为 VS Code）是由微软开发的免费、开源且跨平台的代码编辑器，其特点如下：
- 高度可定制：VS Code 允许用户通过安装插件和主题来自定义编辑器的外观和功能，满足不同用户的需求。
- 丰富的扩展生态系统：VS Code 拥有一个庞大的扩展市场，用户可以选择从数千个插件中找到适合自己的工具和功能，例如代码片段、调试器、语法高亮等。
- 强大的编辑功能：VS Code 提供了智能代码补全、语法检查、代码导航、重构等强大的编辑功能，提高了开发效率。
- 内置终端：VS Code 内置了终端窗口，可以直接在编辑器中执行命令行操作，无需切换到外部终端。
- 调试支持：VS Code 内置了调试器，可以方便地进行代码调试和错误排查，支持多种编程语言和调试器插件。
- 版本控制集成：VS Code 与 Git 和其他版本控制系统集成紧密，提供了版本控制工具和界面，方便代码管理和协作开发。
- 可视化编辑：VS Code 支持以分割视图和并排编辑的方式工作，使得同时编辑多个文件变得更加容易。
- 跨平台：VS Code 可以在 Windows、macOS 和 Linux 系统上运行，用户可以在不同的操作系统中享受一致的开发体验。
- 快速启动和轻量级：VS Code 启动迅速，占用系统资源相对较少，适合在任何配置的计算机上进行开发。
首先，在 VS Code 官网（**code.visualstudio.com/**）下载最新的稳定版…
官网会识别我们当前是什么系统，自动选择适合该系统的版本，点击下载即可。当然也可以点击下拉箭头选择需要的版本。
下载的文件，直接解压就可以用了，长这样：
默认是英文版，如果需要中文版，可以在插件市场中下载官方提供的简体中文插件：
这样，VS Code 就安装完成啦，接下来就可以愉快的 Codeing 啦！
前端新人入职必备清单，保姆级教程！（下）https://developer.aliyun.com/article/1411616
