三. 前端开发工具
1. 背景
通过快速入门案例，发现由记事本文件开发 html 是非常不方便的，所以接下来需要学习一款前端专业的开发工具 VS Code
2. VS Code 简介
Visual Studio Code（简称 VS Code）是 Microsoft 于 2015 年 4 月发布的一款代码编辑器
- VS Code 对前端代码有非常强大的支持，同时也支持其他编程语言（例如：C++、Java、Python、PHP、Go 等）
- VS Code 提供了非常强大的插件库，大大提高了开发效率
3. 相关链接与说明
- 官网 ：Visual Studio Code
- 注意 ：
- 不应该将软件安装在包含中文名的路径中
- 由于安装了 IDEA 快捷键的插件，VSCode 快捷键与 IDEA 是一致的
- 版本
- Stable：稳定版
- Insiders：内测版
- 左下角的 "设置" -> "主题" -> "主题颜色"，然后可以根据自己的喜好，选择喜欢的主题颜色
4. 常用插件
4.1 Chinese (Simplified) Language Pack
适用于 VS Code 的中文（简体）语言包
安装完毕之后，点击右下角的 "Change Language and Restart" 按钮，重新启动服务
4.2 HTML CSS Support
在编写样式表的时候，自动补全功能大大缩减了编写时间
4.3 JavaScript (ES6) code snippets
支持ES6语法提示
4.4 Mithril Emmet
一个能大幅度提高前端开发效率的一个工具，用于补全代码
4.5 Path Intellisense
路径提示插件
4.6 Vue 3 Snippets
在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率
4.7 Auto Close Tag
自动闭合HTML/XML标签
4.8 Auto Rename Tag
自动完成另一侧标签的同步修改
4.9 open in browser
vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
4.10 Live Server
一个具有实时加载功能的小型服务器，也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果
4.11 Vue - Official
一个专门为 Vue 3 构建的语言支持插件
4.12 File Utils
File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录
4.13 IntelliJ IDEA Keybindings
安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键
4.14 AI 辅助插件
自行选择即可
代码补全：Trae AI、CodeGeeX等等
5. VsCode 配置
左下角齿轮，打开配置面板，根据自己的喜好，可以修改字体、背景样式等偏好设置。 点击 "设置" 按钮
然后点击右上角 "打开设置" 的图标
然后在打开的 settings.json 中增加如下配置信息（仅推荐，可按需修改）：
JSON
{
"workbench.colorTheme": "Light 2026",//主题
"workbench.statusBar.visible": false,
"editor.fontFamily": "Consolas, Consolas, Consolas",//字体（根据自己喜好选择）
"editor.fontSize": 15,
"editor.lineHeight": 1.8,
"editor.tabSize": 2,
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
},
"editor.minimap.enabled": true,
"liveServer.settings.donotShowInfoMsg": true,
"git.confirmSync": false,
"terminal.integrated.defaultProfile.windows": "Command Prompt"
}具体配置项的含义，鼠标放在配置项上，会自动悬浮展示出来
右键，Open in Default Browser -> 在默认浏览器打开
标签上是黑点则说明未保存，Ctrl+S 保存即可