新手装备篇①：零基础搭建前端开发环境（2025最新版）
📋 教程概览
本教程是「新手装备」系列的第一篇，将手把手教你完成开发环境的搭建，包括代码编辑器、版本控制工具和浏览器调试工具的配置，让你拥有一个专业的编程工作环境。
🎯 学习目标
- ✅ 安装并配置VSCode代码编辑器
- ✅ 完成Git安装和基础配置
- ✅ 掌握Chrome开发者工具使用
- ✅ 创建第一个代码仓库和网页
💻 第一步：代码编辑器安装与配置
1.1 安装 Visual Studio Code
下载地址： https://code.visualstudio.com/
安装步骤：
- 选择对应操作系统的版本（Windows/macOS）
- 双击安装包，全部保持默认设置
- 安装完成后打开VSCode
验证安装：
# 打开终端或命令提示符
# 输入以下命令，应该能看到版本号
code --version1.2 VSCode 必备插件安装
打开VSCode，点击左侧扩展图标（或按Ctrl+Shift+X），搜索并安装以下插件：
基础必备插件：
- Chinese (Simplified)：中文语言包
- Live Server：实时预览网页
- Prettier：代码自动格式化
- Auto Rename Tag：自动重命名配对的HTML标签
前端开发插件：
- HTML CSS Support：HTML中CSS智能提示
- JavaScript (ES6)：JS代码智能提示
1.3 VSCode 基础设置
创建配置文件：文件 > 首选项 > 设置，点击右上角打开设置JSON文件，添加：
{
"editor.fontSize": 16,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"files.autoSave": "afterDelay",
"emmet.includeLanguages": {
"html": "html"
}
}🔧 第二步：Git版本控制工具
2.1 安装 Git
下载地址： https://git-scm.com/
安装步骤：
- 下载最新版 Git for Windows/macOS
- 安装时所有选项保持默认
- 安装完成后需要进行基础配置
2.2 Git 基础配置
# 打开终端或Git Bash，依次输入以下命令
git config --global user.name "你的姓名"
git config --global user.email "你的邮箱"
git config --global core.autocrlf true # 解决换行符问题验证安装：
git --version
# 应该显示：git version 2.xx.x🌐 第三步：浏览器开发者工具
3.1 Chrome 开发者工具使用
- 打开 Chrome 浏览器
- 按 F12 或右键选择"检查"
- 熟悉几个核心面板：
- Elements：查看和修改HTML/CSS
- Console：运行JavaScript和查看错误
- Sources：调试JavaScript代码
- Network：查看网络请求
3.2 练习任务
- 打开任意网页，按F12尝试修改文字内容
- 在Console中输入：
console.log("Hello, 新手村!")
🚀 第四步：创建第一个项目
4.1 创建项目文件夹
# 在桌面创建项目文件夹
mkdir my-first-website
cd my-first-website4.2 用VSCode打开项目
# 在终端中输入
code .4.3 创建第一个HTML文件
在VSCode中：
- 右键选择"新建文件"
- 命名为
index.html - 输入以下代码：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>🎉 恭喜！环境搭建成功！</h1>
<p>这是我的第一个网页</p>
<script>
console.log('Hello, Web开发!');
</script>
</body>
</html>4.4 用Live Server运行
- 右键选择"Open with Live Server"
- 浏览器会自动打开显示你的网页
- 按F12打开开发者工具查看Console输出
❓ 常见问题解答
问题1：安装时提示权限不足
解决方案： 以管理员身份运行安装程序
问题2：Git命令提示不是内部命令
解决方案： 重启终端或电脑，让环境变量生效
问题3：Live Server无法启动
解决方案： 检查防火墙设置，允许VSCode访问网络
问题4：中文显示乱码
解决方案： 在VSCode右下角选择编码为UTF-8
✅ 学习成果检查
| 工具 | 作用 | 安装状态 |
|---|---|---|
| VSCode | 代码编辑器 | ✅ 已安装 |
| Git | 版本控制 | ✅ 已配置 |
| Chrome | 浏览器和调试 | ✅ 已准备 |
| Live Server | 实时预览 | ✅ 已安装 |
📝 实践任务
基础任务
- ✅ 完成所有软件安装和配置
- ✅ 创建第一个HTML文件并用Live Server运行
- ✅ 在Chrome开发者工具的Console中输出成功信息
挑战任务
- ⭐ 尝试修改网页内容并实时查看变化
- ⭐ 探索VSCode更多插件和设置
🚀 下一步学习
下一篇： 《Git版本控制入门：提交你的第一行代码》
- Git的基本概念和工作原理
- 创建第一个Git仓库
- 学习add、commit、push操作
- 将代码托管到GitHub
💡 提示： 遇到问题可以在评论区留言，我会及时回复解答！
🕐 预计学习时间： 1-2小时（包括下载安装时间）
📅 更新时间： 2025年10月
版权申明
本文系作者 @sgyyds 原创发布在孙哥博客站点。未经许可，禁止转载。
暂无评论数据