手把手教你安装VS Code并附上超实用插件指南

工欲善其事，必先利其器，记录一下学习Web前端开发的强悍工具—Visual Studio Code

一、Visual Studio Code的下载与安装

首先我们来到 Visual Studio Code官网，下载 VS Code安装包。

VS Code的安装比较简单，一直点击下一步即可，安装完成后打开，界面如下：

二、VS Code 插件的安装

• 点击扩展，通过插件名称进行搜索，点击 ==Install== 即可。
• 安装后，重启VS Code后插件就能生效。

三、超实用插件推荐

1、汉化插件

Chinese (Simplified) Language Pack for Visual Studio Code

汉化界面，方便使用

2、vscode-icon 插件

不同的文件展示不同的图标，方便快速识别文件类型。

效果：

3、open in browser 右键运行插件

open in browser的作用是可以把编辑的HTML文件等用浏览器打开，查看效果。

效果：

4、Auto Rename Tag

自动完成另一侧标签的同步修改。

效果：

5、Color Highlight 颜色插件

用于颜色标记

效果：

6、Image preview 图片预览

当光标悬浮在图片路径上时，可以显示图片预览，方便判断是否引用了正确的图片或图标。

7、Debugger for Chrome

映射vscode上的断点到chrome上，方便进行调试

8、HTML Snippets

智能提示HTML标签，以及标签含义。

当然，VS Code好用的插件还有很多，欢迎大家在评论区相互分享。

最后为大家附上VS Code的快捷键。