VS Code前端开发工具之必备插件，Visual Studio Code是由微软开发免费、开源、跨平台的一款IDE，支持多种编程语言开发，具有强大的插件扩展能力，这篇文章我们就来看看VS Code在前端开发中有哪些必备的扩展插件介绍

先看看软件的下载安装

VS Code官网地址：https://code.visualstudio.com/

https://code.visualstudio.com/

VS Code官网下载地址：https://code.visualstudio.com/Download

https://code.visualstudio.com/Download

下载安装好适合自己的版本后，开始安装插件

1、汉化Chinese

来自Chinese

来自Chinese

2、Open-In-Browser 设置默认浏览器查看文件选项 （安装流程如上就不再重复了）

使用Alt + B快捷方式在默认浏览器中打开当前html文件，或Shift + Alt + B选择浏览器。你也可以像图片一样右键点击

来自Open-In-Browser

当您在其他浏览器中选择oepn时，将显示一个浏览器列表，您可以选择其中一个打开当前文件。

来自Open-In-Browser

3、Quokka

实时反馈正在的编辑代码结果，预览计算值结果等，是一个很好的调试工具插件

（B站专栏投稿 居然放不了gif格式图片）

来自Quokka

4、CSS Peek

这个扩展支持所有正常的符号定义跟踪功能，但它针对的是css选择器(类、id和HTML标记)。这包括:

Peek:以内联方式加载css文件并在那里进行快速编辑。(Ctrl + Shift + F12)

转到:直接跳转到css文件或在一个新的编辑器(F12)中打开它

鼠标悬停:用鼠标悬停在符号上显示定义(Ctrl+ Hover)

5、Beautify 代码格式化

美化javascript, JSON, CSS, Sass，和HTML在Visual Studio中的代码。

来自Beautify

6、color info 提供快速的css颜色信息。

来自color info

7、vscode-icons    显示Visual Studio代码的图标

来自vscode-icons

8、HTML Snippets    html标签提示及含义提示

来自HTML Snippets

9、HTML CSS Support     html中css类名及id提示

来自HTML CSS Support

10、Auto Close Tag      自动添加HTML/XML关闭标签

来自Auto Close Tag

11、Auto Rename Tag     当重命名一个HTML/XML标记时，将自动重命名成对的HTML/XML标记

来自Auto Rename Tag

12、Bracket Pair Colorizer 2 设置代码成对大括号的颜色

哈哈只是个人认为比较常用的插件，介绍如有错误欢迎指正，有更好的插件欢迎补充指导，谢谢！