前端环境搭建 101 —— Windows 篇

xiaofuyesnew
1,002 阅读5分钟

现代前端开发主要围绕 Node.js 展开：它既可以作为前端构建环境，对前端项目进行构建、打包等处理；也可以作为后端运行时，提供 API 等后端操作。因此，学习前端的一个前置工作就是学会如何在操作系统中搭建前端开发环境。

本文包含以下部分：

  1. Git 安装详解
  2. Windows Terminal 安装及配置
  3. nvs 安装及配置
  4. VSCode 安装及配置
  5. 常用 VSCode 插件介绍

Git 安装详解

安装过程

下载 Git：选择对应的版本（32位 or 64位），无法下载或下载缓慢，请学会科学上网。

下载完成后双击运行安装程序：

信息页

点击 Next ，选择安装位置：

安装位置

安装配置：

安装配置

开始菜单快捷方式：

开始菜单快捷方式

选择默认编辑器，选择 Vim 就好：

选择默认编辑器

默认分支名，默认 master ,可以选择 main：

git registry 默认分支名

环境变量配置，默认即可：

环境变量配置

是否使用内置 OpenSSH，可选择使用内置的或外部的（Windows 的），这里尽量使用内置的：

是否使用内置 OpenSSH

https 支持，同理，使用内置的：

是否使用内置 OpenSSL

行尾格式，默认的就行，会自动在 CRLF 和 LF 之间切换：

配置换行符

配置 Git Bash 运行宿主，默认使用 MinTTY :

配置 Git Bash 运行宿主

git pull 命令的默认行为：

配置 git pull 的默认行为

配置证书管理，默认：

配置证书管理

开启文件缓存和软连接支持，文件缓存有必要开启，软链接没多大用，随意：

开启文件缓存和软连接支持

实验功能，运行时和内建监控，建议电脑性能不佳的话就慎开，会有比较大的开销：

实验功能：运行时和内建监控

点击 Install 进行安装，直至安装完成。

全局配置

从开始菜单中打开 Git Bash ,做初步的全局配置：

$ git config --global user.name "你的名字"
$ git config --global user.email "你的邮箱"

这个配置的作用是记录 commit 的用户信息。

通过以下命令检查 ~ 目录下是否有 .bash_profile 和 .bashrc，如果没有则新建，并在 .bash_profile 中添加一行：

source .bashrc

目的是通过 Git Bash 启动时，运行 .bash_profile 同时使配置 .bashrc 生效。这样，就可以统一在 .bashrc 中管理 Git Bash 配置了。

命令行科学上网配置

由于众所周知的原因，在国内开发中经常要使用的 GitHub、npm 等网站会遇到无法访问或访问慢的情况，这时候需要在命令行中进行代理设置，假定在本机的代理端口为 10809，那么可以在 .bashrc 中插入如下两行：

export http_proxy=http://127.0.0.1:10809
export https_proxy=http://127.0.0.1:10809

注意：这样可以保证大多数命令行的网络访问走代理通道，但有也一部分的工具的代理配置需要在对应的配置文件中进行定义

远程仓库的准备

使用以下命令在 Git Bash 中生成 SSH key 用于远程登录的身份验证：

$ ssh-keygen -t rsa -C "你的邮箱"

一路回车，生成完毕后，用以下命令查看生成的 SSH 公钥:

$ cat ~/.ssh/id_rsa.pub

复制公钥文本配置相应的远程仓库，即可实现免密登录和操作。

Windows Terminal 安装及配置

Windows Terminal 是 Windows 系统下兼具颜值、便利和兼容性于一体的命令行工具，它可以通过 Microsoft Store 直接安装（推荐在 Git 安装之前进行安装）。

点击 tab 页上 + 旁边的下箭头，打开 设置 页面：

设置

设置 默认配置文件 为 Git Bash ；默认终端应用程序设置为 Windows 终端。

可以通过 打开 JSON 文件 对各个配置文件的排序进行调整。

同时，也可以在各个配置文件中设置该配置是否出现在 打开新标签页 的选项中，也可以对每个配置文件的界面进行调整和定制。这里可以根据个人习惯和喜好进行调整，不再赘述。

nvs 安装及配置

打开 Windows Terminal ，因为前述我们使用的默认环境是 Git Bash，它是一个类 Unix 的环境，所以对于 nvs 的安装，我们可以采取与 MacOS / Linux 类似的安装方式：

$ export NVS_HOME="$HOME/.nvs"
$ git clone https://github.com/jasongin/nvs --depth=1 "$NVS_HOME"
$ . "$NVS_HOME/nvs.sh" install

如果大家没有科学上网的环境，可以将 nvs 的下载路径指向国内的镜像：

$ nvs remote node https://npmmirror.com/mirrors/node/

以下是 nvs 常用命令：

$ nvs ls-remote   # 列出所有可安装版本
$ nvs add latest   # 安装最新版本 node.js
$ nvs add lts   # 安装长期支持版本 node.js
$ nvs add 14    # 安装 node.js 14的最后一个版本
$ nvs link latest  # 设置全局 node.js 版本为 latest
$ nvs use lts    # 切换当前 session 下的 node.js 版本为 lts，关闭本窗口后失效

npm 全局安装配置

使用 nvs 可以很方便地切换 node.js 的版本，但有一个问题，就是当切换 node.js 版本时， npm 全局安装的工具也会进行切换。因此，要对 npm 全局安装的工具进行统一管理，则需要进行一些配置：

# 在 ~ 下创建 .npm_global 文件夹
$ mkdir -p ~/.npm_global

# 设置 ~/.npm_global 为 npm 的全局文件目录
$ npm config set prefix ~/.npm_global

# 如无科学上网环境，可以顺便将 npm registry 的地址指向淘宝镜像
$ npm config set registry https://registry.npmmirror.com

设置好后，需要将 ~/.npm_global 配置到环境变量中，向 .bashrc 中插入如下配置：

$ export PATH=~/.npm_global:$PATH

保存后，使用 source ~/.bashrc 或重启终端，使配置生效。

然后，可以安装一系列全局工具：

# 安装全局的 npm，这样 npm 的调用不会随 node.js 的切换而切换
$ npm install npm -g

# 安装 yarn
$ npm install yarn -g
# 同样可以为 yarn 设置淘宝镜像
$ yarn config set registry https://registry.npmmirror.com

# 安装 pnpm
$ npm install pnpm -g

VSCode 安装及配置

下载 VSCode：有两个版本 User Installer 和 System Installer， 这里为了与系统环境保持一致，我们选择安装前者。

安装协议：

安装协议

安装路径：

安装路径

创建开始菜单快捷方式：

创建开始菜单快捷方式

安装配置：

安装配置

配置预览：

配置预览

安装完成即可使用。

打开设置同步

点击 VSCode 右下角的 设置 图标，在弹出框中点击 打开设置同步：

打开设置同步

这时，窗口顶部会弹出 设置同步 窗口，点击 登录并打开 按钮进行登录操作：

设置同步

目前可选 GitHub 或者 Macrosoft 微软账号，进行登录：

账号选择

打开期间，浏览器会跳转到对应网页进行登录授权，如有弹窗，全部选择是，登录成功后会显示：

设置同步已打开

这样，在本地进行的设置会同步到云端，这样当更换电脑或开发环境时，VSCode 的设置会进行自动同步。

将 Git Bash 设置为默认终端

在 VSCode 中使用快捷键 Ctrl + ` 打开终端，在上方打开菜单：

终端设置

在窗口顶部，会弹出 选择窗口,选择 Git Bash 作为 VSCode 的默认终端即可：

选择默认终端

常用 VSCode 插件介绍

avatar
文章
阅读
粉丝