Vscode好用扩展推荐

01 前端相关插件

• Auto Close Tag
  作用：自动添加HTML / XML关闭标记
  

• open in browser

• 作用：右键在浏览器打开html文件
  

• View in browser

• 作用：在默认浏览器中打开html文件
  

• Auto Rename Tag

• 作用：与Visual Studio IDE一样，自动重命名配对的HTML / XML标记。
  

• HTML Class Suggestions

• 作用：根据工作空间中的 CSS 文件为 HTML 类属性添加代码补全建议
  

• HTML Snippets

• 作用：只需输入 div 然后按下回车，一对标签就出现了。更厉害的是，对于需要嵌套的标签，你可以直接用 ul>li>a 的格式表示，按下回车后就能看到你需要的嵌套。
  

• vscode-browser-plus

• 作用：通过开启端口(10086)监听当前打开项目的根目录，在编辑器内预览网站，省去了频繁切换浏览器、编辑器看页面效果，修改代码后自动刷新页面
  

• Debugger for Chrome

• 作用：通过Vscode调试在Google Chrome中运行的JavaScript代码，效果和 Chrome的控制台中差不多，让你不用打开浏览器就直接打断点
  

• CSS Peek

• 作用：它能帮助开发者快速找到和查看选定类或 id 所用的样式。对于那些不喜欢来回切换文件或者分屏的开发者来说这个扩展很有用
  

• JavaScript (ES6) code snippets

• 作用：它能够有效减少拼写错误和提高编码效率。几乎每个前端程序员都是 JavaScript 的使用者，为了提高编写 JS 代码的效率，这个扩展很有用，并且它还支持 .ts, .tsx 和 .jsx 文件。
  

---

02 美化编辑器

• Material Theme
• 作用：最史诗般的主题符合Visual Studio Code，拥有多种颜色，你可以选择自己喜欢的主题颜色
  
• 食用方法如图：
  
  
• color highlight
• 作用：通过用颜色包装每个十六进制代码为我们提供了更大的预览
  
  
• Bracket Pair Colorizer
• 作用：括号着色器能让我们一眼看出当前代码块的反括号在哪里。有时候在稍微复杂的函数中，找到正确的那对代码并不是那么容易，但 Bracket Pair Colorizer 在你键入一个括号时就为这一对括号分配了自己的颜色，便于阅读。
  
• Indenticator
• 作用：可以高亮显示出当前缩进的深度，深度由线和点表示，同样使代码更整洁，提高代码易读性。
  
• Guides
• 作用：指导线，当前所在的级别缩进线会变红，当前在哪一级一目了然。
  
  
• Better Comments
• 作用：使注释有人性化的高亮显示
  
  食用方法如下：
  

插件详细用法请看:https://www.cnblogs.com/suwanbin/p/13263732.html

• vscode-icons
• 作用：它为每种文件类型添加的独特图标使文件搜索变得直观而简单
  
  
• background
• 作用：为你的vscode中添加漂亮的背景图片
  
  

具体食用方法，请看https://blog.csdn.net/yukinoai/article/details/84564949
推荐使用透明背景图片，或者颜色不太艳的，不然会看不清楚代码

---

markdown相关插件

• Markdown All in One
• 作用：让vscode支持markdown .md文件
  
• Markdown Preview Enhanced
• 作用：实时预览markdown，markdown使用者必备
  
• markdownlint
• 作用：markdown语法纠错
  

---

其他

• Code Runner
• 作用：代码运行器，实现代码一键运行，有多种方式来快捷地运行你的代码
  

安装成功后，右上方有个小三角形图标，点击即可运行程序

• GBKtoUTF8
• 作用：打开程序文件后对应的中文乱码,造成这种现象的原因是文件的编码方式不同，这个插件可以实现gbk转换为utf8
  

使用Vscode的过程中出现乱码，请看:http://feotech.com/?p=76

• Auto import
• 作用：Auto import 是一个自动导入包扩展。如果目前手头的项目是基于不同组件的，那么你需要做的就是给每个组件命名，剩下的事交给 Auto import 就好
  
• Path Intellisense
• 作用：自动补全路径
  
• Code Spell Checker
• 作用：检查你的英文单词拼写是否有误，如果有库里不存在的单词则会下下波浪线
  
• Open In Default Browser
• 作用：VSCode扩展，可在浏览器中快速打开html文件
  

---

以上就是我使用过且觉得好用的Vscode扩展，推荐给小伙伴们，希望能给你们一些帮助！关注我的博客https://www.cyz4531.top