VSCode 安装使用教程（视频版）

TIP

应初学前端的同学的学习需求，录制了完整的 VSCode 安装、配置、基础使用相关的内容，有图文版，也有视频版

希望对同学有所帮助，一起开启 Web 前端开发之旅吧 ^_^

1、关于 IDE 和 VSCode 下载

视频内容包含：

• 什么是 IDE ？
• 前端开发主流的 IDE 有哪些 ？
• VSCode 下载方式

2、Window 版 VSCode 安装步骤

视频内容包含：

• VSCode 安装步骤和注意事项
• 安装完成后，第一次打开 VSCode，基础面板介绍

3、VSCode 常见插件安装和 3 种项目导入方式

视频内容包含：

• 简体中文语言包
• 3 种项目导入及创建的使用方法

4、VSCode 主题选择、文件图标主题设置

视频内容包含：

• VSCode 主题风格选择（默认+第三方插件）
• 图标主题插件安装 + 配置

5、VSCode 浏览器网页预览

视频内容包含：

• 浏览器手动预览 Open in Default Browser
• Live Server 开启本地服务器预览

6、高效开发插件安装

视频内容包含：

• Auto Rename Tag 自动修改标签对名称
• carbon-now-sh 将代码生成一张图片

7、格式化代码插件

视频内容包含：

• prettier 格式化代码插件安装、配置 和 基础使用

8、VSCode 相关基础配置

视频内容包含：

• 字体设置（字体大小、字体系列<编程专用字体>）
• 字体下载、在电脑中安装字体
• 光标设置，平滑插入动画
• 关闭代码缩略图，不占用新资源
• Ctrl + 鼠标滚轮缩放字体大小设置

9、Emmet 语法 和 VSCode 常用快捷键

视频内容包含：

• 常用 Emmet 语法使用和解读
• VSCode 常用快捷键（Window 版和 Mac 版）