前端纳新培训文档〇 — 环境配置
写在最前：
不知不觉地就写了太多内容，本文所写的都是学习计算机专业所需的一些基础设施，以后肯定是用得到的！
环境配置一向是繁琐且令人头大的。但是呢，也是一劳永逸的~~（大概）~~。新手没有必要做完本教程的所有内容（大部分内容在纳新培训大作业中不会用到）。如果没有时间的话，安装好vscode就行。
其他内容供想了解的同学参考。
遇到问题可以向ai求助（甚至整个学习过程都可以依赖ai教学）。
当然也欢迎在群内向学长学姐提问，我们会耐心解答。
学会正确的提问也是大学的第一课。
非常感谢所有报名前端技术部的同学，我们从你提交的表单上看到了热爱。所以，相信自己。
介绍一下自己
| 总监 | 头像 | |
|---|---|---|
| 张以恒 | 倚衡（muyufly） |  |
| 姜松昆 | 空空空 |  |
VScode(必做)
VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。
VScode 安装
- VScode 官网地址：https://code.visualstudio.com/↗
- VScode 详细操作文档：https://www.runoob.com/vscode/vscode-tutorial.html↗
我们可以在 VScode 官网首页下载对应系统（支持Windows、Linux、macOS）的软件：
你也可以打开下载页面 https://code.visualstudio.com/download，下载想要的格式包：↗
VSCode 安装很简单，macOS 下载 zip 解压后就能使用。
本章节我们以 Windows 为例下载安装包，然后双击打开安装包，点击 Next：
选中接受协议选项，然后点击 Next：
选择安装路径，也可以直接使用默认的：
点击 Next：
注意安装路径设置、环境变量默认自动添加到系统中，勾选以下所有选项：
最后我们点击 Install 就可以完成安装了：
安装汉化包
VScode 安装汉化包很简单，打开 VScode，点击安装扩展，在搜索框输入 Chinese，然后点 Install 就可以：
界面说明
以下是 VScode 启动后的界面，简单说明如图：
一些前端开发需要用到的插件
- Live Server(强烈建议) —> 可创建一个本地开发服务器来实时重新加载网页，便于及时预览前端代码的修改效果
- GBK to UTF8 —> 部分文件字符采用GBK编码，导致不能正确渲染在前端网页，该插件能解决问题
- 一些snippet(代码片段)插件，可自行搜索对应语言（HTML,JavaScript）安装，能够快捷写出代码片段模板
虽然不是很快
Git(强烈建议)
Git是一个强大且通用的版本管理工具，在今后的
Git 各平台安装包下载地址为：http://git-scm.com/downloads↗
选择64-bit Git for Windows Setup
- 进入官网下载安装包，等下载完成，找到下载文件的位置，双击打开安装向导
- 许可声明，点击“Next”
- 选择安装位置，点击“Next”
- 选择开始菜单文件夹，点击“Next”
- 选择Git默认编辑器，不熟悉Vim操作的建议将默认使用Vim改成Visual Studio Code，注意没有安装VSCode时这里是不能选的。点击“Next”
- 调整新存储库中初始分支的名称，建议选择下方的选项，使用“main”为默认的主分支名。点击“Next”
- 之后保持默认配置，无脑点击“Next”
- 配置额外选项，点击“Install”
- 安装完成
完成安装之后，就可以使用命令行的 git 工具（已经自带了 ssh 客户端）了，另外还有一个图形界面的 Git 项目管理工具。
在开始菜单里找到 “Git”->“Git Bash”，会弹出 Git 命令窗口，你可以在该窗口进行 Git 操作。
右键任务栏win图标，选择终端管理员
进入Powershell(当然也可以win+R cmd 进入cmd界面，但是powershell是更强大兼容性更好的工具，power!!!)
输入
git --version 如果成功输出版本号则代表git安装成功
Git 配置
Git 提供了一个叫做 git config 的命令，用来配置或读取相应的工作环境变量。
用户信息
配置个人的用户名称和电子邮件地址，这是为了在每次提交代码时记录提交者的信息：
git config --global user.name "senbai"git config --global user.email 114514@aki.com注意你不是senbai,邮箱也不是114514@aki.com，所以这两处需要替换为你自己的
如果用了 —global 选项，那么更改的配置文件就是位于你用户主目录下的那个，以后你所有的项目都会默认使用这里配置的用户信息。
在Powershell中输入
git config --list可查看配置信息
git的配置先到这里。。。
Github注册(如果你没有)
打开https://github.com/选择sign up,填写表单
2FA验证小技巧
如果手机网络允许，可以在Google Play/ F-Droid上下载Aegis(一个2FA验证器)
或者下载浏览器插件，2FA authenticator之类的
不过现在注册账号好像不强行要求添加2FA认证（）
使用VSCode的图形化界面进行分支管理和提交远程仓库（VScode + Git + Github Repo）
warning: 确保你先前的几个配置都正确完成
创建Github仓库
点击Repositories
点击new
填写仓库名称等信息后就创建好了，页面如下
本地及远程仓库提交和版本管理
随便创建一个文件夹如：
用VSCode打开这个文件夹目录
点击侧边栏源代码管理图标
点击初始化仓库，新建一个Git储存库
点击添加远程存储库
回到Github
复制仓库HTTPS地址
点击从URL添加远程存储库
当然，更推荐的方法是点击从Github添加远程存储库并登录github账号(反正如果不关联后续推送到远程仓库也需要验证)
将VSCode与你的Github账号关联，这样可以直接选择你Github中的仓库
新建一个文本文档114514.txt
ctrl +s 保存 回到源代码管理
点+暂存所有的更改
输入提交消息（会在后续的提交记录显示，这里没有输入会自动生成），点击提交
此时会弹出一份提交文档
删除需要提交的文件名称前的#并保存，就提交到了本地仓库
现在我们更改文本内容为1919810
重复上述提交步骤并输入提交消息“1919810”，比先前多加一步发布Branch
等待上传完成，再次打开github就能看到提交的文件，和提交信息
那么如果我们不喜欢1919810而是喜欢114514怎么办呢
右键左下角的最开始114514的提交记录，选择复制提交哈希
点击左上角打开终端
输入git reset --hard 先前复制的提交哈希 回车
你就发现我们回到先前那个版本了
此时重复先前的提交本地仓库和同步更改到远程仓库
仓库中的文件也会变为114514
Branch之类前面的区域以后再来探索（自己了解）
写不动了喵。。。
良好的网络环境
一些网站和资源需要拥有良好的互联网环境。怎么获得，需要你的探索。
AI
单纯通过对话使用AI明显是跟不上时代的，并非先进生产力。（但是通过对话学习是极好的。）
一段段地粘贴代码不如AI直接调用工具写入，一次次地指引和强调也不如AI自己感知任务和做出选择。
所以推荐一些Agent Harness& AI IDE
- Codex(ChatGPT)
- Claude Code
- Deepseek Harness
- Open Code
- Trae
- Antigravity
- Cursor
其中Trae和Deepeek Harness的使用门槛较低，但Trae存在免费模型能力弱，付费性价比低的问题
，DSH则存在Token计价模式使用成本过高的问题。
至于怎么用、怎么用好，我就不再说了，希望大家善于使用AI和搜索引擎。
谢谢！
感谢你能看到这