1, Vetur
VUE开发必备插件 1.语法高亮,包括 vue/html css/sass/scss/less/stylus js/ts 2.语义高亮,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件 3.语法错误检查,包括 CSS/SCSS/LESS/Javascript/TypeScript 4.emmet 支持 5.支持调试 6.代码片段自动补全 包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript

2,Chinese (Simplified) Language Pack for Visual Studio Code
适用于 VS Code 的中文(简体)语言包

3,Code Runner
非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等 安装完成后,右上角会出现:?

4,Path Intellisense
路径补全,自动提示文件名

5,Bracket Pair Colorizer
用不同颜色高亮显示匹配的括号 对配对的括号进行着色,方便区分,未安装该插件之前括号统一都是白色的。

6,Live Server
安装这个插件之后,我们在编辑器中修改代码,按Ctrl+S保存,修改效果就会实时同步,显示在浏览器中,再不用手动刷新。

7,Vue 3 Snippets
包含所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段

8,Prettier Formatter
代码格式化工具

9,ESLint
代码风格校验,代码统一、自动修复

10,Highlight Matching Tag
高亮显示匹配标签这个插件自动帮我们将选中的匹配标签高亮显示,再也不用费劲查找了。

11,Debugger for Chrome
直接在vscode里面进行调试js文件,跟谷歌的控制台是一样的功能,下载了它就不用打开浏览器的控制台就能进行打断点。

12,Image Preview
鼠标移到路径里显示图像预览

13,open in browser
作用:快速在浏览器中打开html文件 使用:在html文件中使用快捷键Alt+B会在默认浏览器中打开当前html,如果要用非默认浏览器打开请使用快捷键Shift + Alt + B,或者使用鼠标右键点击

14,GitLens — Git supercharged
防背锅神器!可显示代码在何时、以及由何人进行更改了更改。出现问题,精准到人~显示的信息那可真的详细的不能再详细了, 主要用在 Git 管理上。

15,Beautify
格式化代码工具,美化javascript,JSON,CSS,Sass,和HTML在Visual Studio代码。

16,px to rem & rpx (cssrem)
px转化为rem

注意:
排名不分先后,当然好用插件还有很多,希望小伙伴们推荐一些好用的插件😊
|