前端-开发工具安装及配置篇（Windows And Mac）

前言

本教程将手把手带领你进入前端开发工具的世界，在Windows和Mac两个平台上，我们将一起探索如何正确安装和配置常用的开发工具，让你轻松迈出前端开发的第一步，无论是初学者还是经验丰富的开发者，这篇教程都将为你解决开发工具安装过程中的种种疑惑，让你更加专注于代码的创作。让我们一起开始吧！

Windows 系统

一、VScode（免费、好用的代码编辑器）

点击下载：https://code.visualstudio.com/Download

1. 来到下载页面，我们发现两个版本供我们选择，x64是x86_64（Intel设计）和AMD64（AMD设计）的简称。那么我们该如何确定电脑与之对应版本呢，我们使用快捷指令win+R，弹出界面后，出入cmd来到终端。输入指令：systeminfo即可。

• User Installer ：用户安装版，会安装在当前计算机账户目录，意味着如果使用另一个账号登录计算机将无法使用别人安装的VScode。
• System Installer：系统安装版，安装在非用户目录下，例如C盘根目录，任何账户都可以使用。（建议使用此版本，不过一般情况下不在C盘装任何软件）
• .zip：压缩包版，解压安装
• CLI：控制台安装版

2. 下载完成之后，我们点击安装，选中我同意此协议并进入下一步。
3. 自定义安装路径，我直接选择了D盘，选好路径之后进入下一步。
4. 这一步主要选择附加任务，我的建议是都勾选，选好之后进入下一步。
5. 进入准备安装环节，我们直接点击安装即可。
6. 走到这步之后，恭喜你，已经完成安装！
7. 好用插件分享，我放到了结尾。

二、node.js（JavaScript语言的服务器运行环境）

1. 先来简单介绍下nvm 是什么，nvm是一个node的版本管理工具，可以简单操作node版本的切换、安装，查看等。那么我为什么推荐大家使用nvm的原因，主要是因为，在实际开发过程中，如果同时进行多个项目，而这些项目所依赖的node版本又是不同的，用到哪个版本，需要先把原来安装的版本卸载掉，再安装需要版本，会非常不方便。nvm管理工具就可以帮助我们解决这个痛点。

   点击下载：github.com/coreybutler...

2. 我们来到下载界面，点击下方链接即可开始下载。

3. 下载好之后，我们先不急着安装，还需要做一些准备工作。如果你已经安装了node，那么你需要先卸载node（win+R --> 输入控制面板--> 卸载--> 找到安装的node 点击即可万完成卸载操作），如果你没有安装那直接跳过这一步到下一步。为了确保彻底删除node在看看你的node安装目录中还有没有node文件夹，有的话一起删除。再看看C:\Users\用户名 文件夹下有没有.npmrc以及.yarnrc等等统统删除。再去看看你的环境变量有没有node相关的，有的话也一起删除了。验证是否卸载成功，win+R --> 输入cmd--> node -v。提示node不是可用的命令，代表卸载成功。

4. 接下来，我们开始安装，点击刚才下载好的安装包，选择你要安装的文件位置。我这里是在D盘新建了一个文件夹，当然你也可以直接安装在D盘里。

5. 接下来，是让你选择nodejs的安装路径，与上一步相同。

6. 我们直接点击下一步即可。

7. 那么到这一步，恭喜你，已经完成安装。

8. 现在来验证一下是否安装成功，在cmd中输入nvm -v，出现版本号的话说明你已经安装成功。

9. 现在让我们来安装node版本，同样，在cmd中输入nvm list available，查看当前可用版本。

10. 在cmd 中输入 nvm install latest，即可安装最新版本，安装完成之后，输入命令nvm use 21.2.0（刚才安装的版本）即可使用。

11. 如果需要其他版本的node，直接nvm install 你需要的版本号即可。

12. 查看现在已有版本，可以使用nvm list，会列出已有版本供你选择。

三、Git （代码版本控制工具）

1. 点击下载：git-scm.com/download

2. 根据自己电脑的型号选择对应版本，一般来说都是 64 位，如果说你不清楚的话，来到桌面，我的电脑 --> 右击 -->属性就可以看到了。

3. 下载好之后，我们双击打开，选择安装路径。 4. 选择安装组件。 5. 在开始菜单栏创建Git文件夹，可以修改"Git"来重新命名文件夹，也可以点击"Browser"添加到别的已有文件夹，也可以勾选"Don't create a Start Menu folder"来选择不创建文件夹。 6. 选择Git默认编辑器，Git 安装程序里面内置了10种编辑器供你挑选，默认的是 Vim ，选择 Vim 后可以直接进行到下一步，如果选其他编辑器，需要点击蓝色链接，本教程选用的是 Vim。 7. 决定初始化新项目（仓库）的主干名字 第一种是让 Git 自己选择，名字是master；第二种是我们自行决定，默认是main，当然，你也可以改为其他的名字。一般默认使用第一种。

注： 第二个选项下面有个 NEW！ ，说很多团队已经重命名他们的默认主干名为 main . 这是因为2020 年非裔男子乔治·弗洛伊德因白人警察暴力执法惨死而掀起的 Black Lives Matter(黑人的命也是命)运动，很多人认为 master 不尊重黑人，呼吁改为 main.

8. 调整你的 PATH 环境变量

• 这是最谨慎的选择，因为您的 PATH 根本不会被修改。您将只能使用 Git Bash 中的 Git 命令行工具。
• 从命令行以及第三方软件进行 Git（推荐）此选项仅将一些最小的 Git 包装器添加到PATH中，以避免使用可选的 Unix 工具使环境混乱。您将能够使用 Git Bash 中的 Git，命令提示符和 Windov PowerShell 以及在 PATH 中寻找 Git 的任何第三方软件。
• 使用命令提示符中的 Git 和可选的 Unix 工具 Git 和可选的 Unix 工具都将添加到您的 PATH 中。 警告：这将覆盖 Windows 工具，例如 "find" and "sort". 仅在了解其含义后使用此选项。

9. 选择 SSH 执行文件

• 使用捆绑开放SH，它使用Git附带的ssh.exe。
• 使用外部操作系统SH，新的！这将使用外部的ssh.exe.Git不会安装它自己的OpenSSH(和相关的)二进制文件，而是像在路径上找到的那样使用它们。

10. 选择 HTTPS 后端传输 (作为普通用户，选择前者即可)

• 使用 OpenSSL 库, 服务器证书将使用 ca-bundle.crt 文件进行验证。
• 使用本机 Windows 安全通道库, 服务器证书将使用 Windows 证书存储进行验证。此选项还允许您使用公司内部分发的内部根 CA 证书，例如通过 Active Directory 域服务。

11. 配置行尾符号转换

• 签出 Windows 样式，提交 Unix 样式的行结尾。
• 按原样签出，提交Unix样式的行结尾。
• 按原样签出，按原样提交。

12. 配置终端模拟器以与 Git Bash 一起使用

• 使用MinTTY (MSYS2的默认终端)（推荐，MinTTY 具有可调整大小的窗口和其他有用的可配置选项，可以通过右键单击的工具栏来打开它们 git-bash）
• 使用Windows默认的控制台窗口

13. 选择默认的 "git pull" 行为

• merge（推荐） = git fetch + git merge
• rebase = git fetch + git rebase
• 直接获取

14. 选择一个凭证帮助程序

• Git 凭证管理 (git 有时需要用户的凭证才可以执行操作，可能需要输入用户名和密码才能通过 HTTP 访问远程存储库（GitHub，GItLab 等）)
• 不使用凭证助手

15. 配置额外的选项

• 启用文件系统缓存（将批量读取文件系统数据并将其缓存在内存中以进行某些操作，可以显著提升性能。这个选项默认开启）
• 启用符号链接（符号链接是一类特殊的文件，其包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用，类似于 Windows 的快捷方式，不完全等同类Unix（如 Linux的符号链接。因为该功能的支持需要一些条件，所以默认不开启。）

16. 配置实验性选项（实验性功能，建议不用勾选）

• 启用对伪控制台的实验支持
• 启用实验性内置文件系统监视器

17. 那么到这一步，恭喜你，已经完成安装。
18. 检验是否安装成功，cmd中输入 git -v，出现版本号表示成功。安装教程到此结束，后续我会出一期关于 git 使用教程，敬请期待吧。

Mac 系统

一、VScode（免费、好用的代码编辑器）

点击下载：https://code.visualstudio.com/Download

1. 官网给我们提供了三种安装方式，那么如何确定芯片类型，有两种方式，第一种，点击电脑左上方苹果图标 -> 关于本机 -> 查看芯片类型；第二种，使用命令。打开终端，输入uname -m，返回x86_64（基于 Inter），返回 arm64（基于 Apple silicon）

• Inter chip ：英特尔芯片。
• Apple silicon ：苹果硅 （通俗点就是 M系列芯片）
• Universal：通用版本

2. 下载完成之后，我们点击查看（这就安装好了😁）
3. 其实还没有结束，因为它目前所处的位置是在下载中，而不在我们的启动台里，所以我们在启动台中找不到它。一般来说 mac 安装的软件都是 dmg 格式，我们点击它之后让我们把压缩后的文件拖到应用程序中。这样才算真正的安装完成。但因为我们下载的是 zip 格式，下载好之后，直接是应用程序，那么我们如何将它放置到应用程序中呢，点击访达-->拖住刚才下载好的文件，移动至应用程序，这时候才算真正意义上的安装完成。
4. 我们运行程序，会弹框询问是否打开，点击打开，来到VSCode界面，就可以开始使用了。
5. 安装好之后，是英文的，如果你需要中文格式的，点击左侧图标，输入 chinese 找到插件，然后下载好，之后重启 vscode 即可。
6. 好用插件分享，我放到结尾了。

二、Homebrew（Mac OS 平台下的软件包管理工具）

1. 在安装 node.js 之前,我想先介绍一个工具 Homebrew，那么它是个什么东西，能用来做什么？

Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。它的用途就是安装程序以及软件。 官网地址：brew.sh

2. 如果使用官网的命令下载，由于受到网络限制可能会报异常（无法访问，操作超时）。
3. 推荐使用镜像安装，目前国内的 Homebrew 镜像有阿里云、清华、中科大和华为的镜像源，其中清华的镜像源最为稳定，是 Homebrew 官方官方推荐的镜像源。

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

4. 安装完成之后，需要关闭终端或者输入命令source /Users/zhangyujie/.zprofile才可以生效。然后我们输入brew -v 查看是否安装成功。

三、node.js （JavaScript语言的服务器运行环境）

1. 在安装 node.js之前呢，想先给大家介绍下nvm 是什么，nvm是一个node的版本管理工具，可以简单操作node版本的切换、安装，查看等。那么我为什么推荐大家使用nvm的原因，主要是因为，在实际开发过程中，如果同时进行多个项目，而这些项目所依赖的node版本又是不同的，用到哪个版本，需要先把原来安装的版本卸载掉，再安装需要版本，会非常不方便。nvm管理工具就可以帮助我们解决这个痛点。
2. 上一步骤我们已经安装好了 brew，我们可以使用它来安装nvm，使用命令brew install nvm，安装完成之后，还需要输入下面命令才可以，否则就会报错。如果你正确执行了下面命令，输入 nvm -v，出现版本号表示安装成功。

mkdir ~/.nvm
echo "export NVM_DIR=~/.nvm\nsource \$(brew --prefix nvm)/nvm.sh" >> .zshrc
source ~/.zshrc

3. 安装完成之后，我们需要使用在终端输入open .zshrc，打开配置文件，添加以下配置。

# 在.zshrc文件中添加如下配置
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"  # This loads nvm bash_completion
# 添加环境变量, 值为国内的淘宝镜像源
export NVM_NODEJS_ORG_MIRROR=http://npmmirror.com/mirrors/node
export NVM_IOJS_ORG_MIRROR=http://npmmirror.com/mirrors/iojs

4. 配置完成之后，需要输入source ~/.zshrc重新加载配置文件即可。
5. 下面是一些常用命令。

• 查看可安装版本 nvm ls-remote
• 查看已安装版本 nvm ls
• 安装指定版本 nvm install <Node.js的版本号>
• 卸载指定版本 nvm uninstall <Node.js的版本号>
• 查看当前版本 nvm current
• 设置默认版本 nvm alias default <Node.js的版本号>
• 对指定版本添加别名nvm alias <别名> <Node.js的版本号>
• 删除已定义别名 nvm unalias <别名>
• 切换至指定版本 nvm use <Node.js的版本号> 或者 nvm use <别名>

四、Git (代码版本控制工具)

1. Mac 其实是自带 git 的，在终端输入 git -v，如果有版本号出现，表示有 git，否则需要安装。
2. 安装方式推荐两种

• Homebrew 安装，我们刚才安装了它，现在可以使用 brew install git 安装即可。
• 从官方网站下载安装包安装。官网地址：git-scm.com

3. 验证是否安装成功，打开终端，输入命令 git -v，出现版本号表示成功。

VSCode 好用插件分享

1. Chinese（中文汉化包）
2. Auto Close Tag（自动闭合标签）Auto Rename Tag（标签重命名，在你更改开始标签的同时，结束标签也会一起更改）
3. 主题推荐 Ayu （有深色和浅色模式，我个人比较喜欢深色）
4. ESLint （帮助你发现并修复代码中的问题）
5. Prettier （格式化代码，统一编码风格，一般与 ESLint 配合使用）
6. GitLens（可以在代码中显示该条代码编写记录，当然功能不止这个）
7. Guides （如果代码中嵌套过多，它可以帮我们定位括号的起止位置）
8. Image perview（预览图片，很实用）
9. Material Icon Theme （好看的图标）
10. Path Intellisense（自动补全文件路径，很实用）
11. Todo Tree 下载好后会出现一个图标（代办事项，在代码添加注释 //TODO xxx，到图标内就可以快速定位了）
12. Volar （如果你是一名 Vue 开发人员，这个是必备的，提供代码高亮支持等功能）

本教程至此已经结束，在安装过程中如有遇到困难，可以随时与我联系，我看到后会第一时间回复大家。如果觉得对你有帮助的话，可以关注下，后续我更新一系列教程。如若文中有误，还望指正。最后想用一句谚语来与大家共勉。

The Journey Of A Thousand Miles Begins With A Single Step. 它的意思是千里之行，始于足下！安装软件只是开始。真正的成长来自于持续的学习和实践。随着你不断深入研究开发领域，你将遇到新的挑战和技术，需要不断地更新自己的知识和技能。