VS Code 前端开发环境搭建笔记

一、已安装的推荐插件清单

插件名称 用途说明 开发者
中文(简体)语言包 VS Code 界面汉化 Microsoft
Dracula Theme Official 深色主题，护眼美观 Dracula Theme
HTML Preview 实时预览 HTML 页面 George Oliveira
Vetur Vue 2 工具集（语法高亮、格式化） Pine Wu
vscode-icons 文件图标美化 VS Code Icons Team
Vue (Official) Vue 3 官方语言支持 Vue
Microsoft Edge Tools Edge 浏览器调试工具 Microsoft
GitHub Copilot AI 辅助编程 GitHub

二、环境搭建步骤

安装插件方法

text
方式一：快捷键 Ctrl+Shift+X → 搜索插件名 → 安装
方式二：点击左侧扩展图标 → 搜索 → 安装
方式三：命令行安装 code --install-extension <插件标识>

推荐额外安装的插件（前端开发）

插件 用途
Prettier 代码格式化
ESLint JavaScript 语法检查
Live Server 本地热重载服务器
Auto Rename Tag 自动重命名配对标签
CSS Peek 快速查看 CSS 定义
Path Intellisense 路径自动补全

三、第一个 HTML 项目创建

bash

1. 创建项目文件夹

mkdir my-first-web
cd my-first-web

2. 用 VS Code 打开

code .

3. 新建 HTML 文件

快捷键 Ctrl+N → 保存为 index.html

HTML 基础模板
html

我的第一个网页

你好，VS Code！

#四、预览 HTML 的方法 方法 操作 HTML Preview 插件 右键 → Open Preview Live Server 右键 → Open with Live Server 内置预览 Ctrl+Shift+V 浏览器打开 右键 → Reveal in File Explorer → 双击 HTML #五、VS Code 常用快捷键 快捷键 功能 Ctrl+Shift+P 命令面板 Ctrl+P 快速打开文件 Ctrl+Shift+X 打开扩展面板 Ctrl+ ` | 打开终端 | Ctrl+S 保存 Ctrl+Shift+S 另存为 Alt+Shift+F 格式化代码 Ctrl+/ 注释/取消注释 #小结 ✅ 已安装的插件满足基础前端开发需求 ✅ 推荐补充 Live Server 提升开发效率 ✅ VS Code 是轻量级但功能强大的前端编辑器 #配色方案： 主背景：红橙渐变 #be5145 → #d1572b 卡片背景：白色 标题颜色：#150c63（深蓝紫色） 按钮背景：#761d3c → hover时 #621668 链接颜色：#803473 布局结构： text body (flex居中) └── .login-card (360px宽) ├── h2 (标题) ├── input[type=text] (用户名) ├── input[type=password] (密码) ├── button (登录按钮) └── .register-link ├── a (注册链接) └── a (忘记密码) #技术要点 特性 实现方式 布局 Flexbox居中 圆角 16px (卡片)、8px (输入框) 交互效果 transition过渡动画 焦点状态 outline移除，边框变色 响应式 固定宽度360px #待改进项 JavaScript缺失 - 登录按钮无实际功能 表单验证 - 未实现输入验证逻辑 密码显示 - 可考虑添加显示/隐藏功能 记住密码 - 缺少复选框选项 键盘支持 - 未监听Enter键提交 无障碍访问 - 缺少aria标签