VS code前端开发常用插件总结
VS code不仅开源免费，而且具有强大的插件扩展功能。能够很好地利用这些插件便能大大的提高开发效率。以下为VS code前端开发常用插件总结，如有其他常用的插件，欢迎前端其他同事能够补充上传。
vscode官网下载地址：code.visualstudio.com/ 插件官网地址：marketplace.visualstudio.com/
1. Chinese (Simplified) Language Pack for Visual Studio Code
VS code默认语言是英语，为了提高开发效率，常常会把语言换为中文。在插件扩展窗口输入 "Chinese (Simplified) Language Pack for Visual Studio Code"，点击安装，然后再重启软件，就切换为中文了。通常为最先安装的插件。
2. Open-In-Browser
在浏览器中打开网页，可以选择默认浏览器和其他浏览器。这个插件并不是配置好的，有时候会莫名其妙的报一些错误，如打开浏览器失败: Open browser failed!! Please check if you have installed the browser chrome correctly! 解决方式为：
1.检查电脑的默认浏览器是否改成你想要的浏览器。
2.文件 -> 首选项 -> 设置，输入open in，在设置默认浏览器位置输入：Chrome。
3. 常用的提示命令
HTML Snippets：超级实用且初级的H5代码片段以及提示。
HTML CSS Support：让html标签写class智能提示当前项目所支持的样式。
jQuery Code Snippets：超过130个用于JavaScript的jQuery代码片段。
vscode-icons：显示Visual Studio代码的图标，目前该插件已被vscode内部支持：
文件 -> 首选项 -> 文件图标主题。
Path Intellisense：自动路径补全。（需要进行配置，www.jianshu.com/p/de4cc836b…
**Color Info：**颜色提示插件，只需要将鼠标放在颜色值上悬停，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息。
**Bootstrap 3 Sinnpet：**常用bootstrap的可以安装。
**Atuo Rename Tag：**修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改。
4. 配置类插件
beautify：格式化代码工具，美化javascript，JSON, CSS和HTML在Visual Studio代码。
Code Spell Checker：代码拼写检查器，一个与camelCase代码良好配合的基本拼写检查程序，此拼写检查程序的目标是帮助捕获常见的拼写错误，同时保持误报数量较低。
guides：显示代码对齐辅助线，很好用。
Rainbow Brackets：为圆括号，方括号和大括号提供彩虹色。在看代码的层级嵌套式非常好用。
Indent-Rainbow：用四种不同颜色交替着色文本前面的缩进，为了代码更整洁。
npm Intellisense：用于在import语句中自动填充npm模块。require时的包提示（最新版的vscode已经集成了此功能）。
REST Client：REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应。
5. Debugger for Chrome
Debugger for Chrome这款插件是专门为前端调试开发的，很方便调试，跟谷歌的控制台是一样的功能，下载了它就不用打开浏览器的控制台就能进行打断点。
1. 安装Debugger for Chrome插件
扩展搜索Debugger for Chrome，然后安装。
2. 配置launch.json文件
然后再点击左上角的 齿轮， 就自动跳出xxx.json文件了，具体配置如下： https://blog.csdn.net/weixin_45295262/article/details/110299445
6. Vetur - 解决代码高亮和格式化问题
用 vscode 打开vue项目时，会出现模板字体全是白色的现象，下载vetur插件并重新加载页面，就可解决代码高亮的问题。
vue文件html代码无法格式化，需要在settings.json中添加设置：
// 更改vue的html格式，根据需求设置
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 更改vue的js格式
"vetur.format.defaultFormatter.js": "vscode-typescript",
// 保存时自动格式化
"editor.formatOnSave": true,
// 取消html标签属性强制换行
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto",
}
},
