2026.6.8

VS Code前端环境搭建

一、前端必备插件清单

基础美化&框架插件

1. 中文简体语言包：编辑器汉化

2. Dracula Theme：深色代码主题

3. vscode-icons：文件图标美化

4. HTML Preview：HTML实时预览

5. Vetur / Vue(Official)：Vue2/Vue3开发工具集

6. Microsoft Edge Tools：浏览器调试联动

7. GitHub Copilot：AI代码辅助

开发效率增强插件

Prettier：一键格式化代码

ESLint：JS语法错误校验

Live Server：本地热更新服务器

Auto Rename Tag：同步修改成对HTML标签

CSS Peek：快速跳转查看CSS样式定义

二、插件三种安装方式

1. 快捷键：Ctrl+Shift+X 打开扩展面板搜索安装

2. 侧边栏：点击左侧扩展图标，搜索插件安装

3. 命令行：code --install-extension 插件标识

三、HTML项目创建流程

1. 新建空白文件夹作为项目根目录

2. VS Code通过「打开文件夹」载入项目

3. 快捷键Ctrl+N新建空白文件，保存为index.html

4. 写入基础网页文本，可通过记事本+浏览器快速打开预览页面

四、实战练习：微头条登录页面开发

页面样式要求

1. 登录卡片宽度固定400px

2. 页面背景设置渐变色彩

3. 登录按钮配色改为橙色

4. 在注册入口旁增加「忘记密码？」跳转链接

运行效果

居中渐变背景登录弹窗，包含账号输入框、密码输入框、橙色登录按钮，底部放置注册与找回密码文字链接。

五、基础知识点小结

1. HTML文件本质是文本，记事本、VS Code均可编辑，浏览器负责渲染页面

2. Live Server插件实现保存页面自动刷新，省去重复手动刷新浏览器

3. 插件分工明确：语法校验、格式化、框架支持、实时预览，大幅提升前端开发效率