前端开发必备vscode插件大全（2025最新）赶快收藏吧~

1、装上这个 Chinese (Simplified) 就变成中文版的啦~

2、GitLens — Git supercharged (上班族必备)
git 功能增强插件，鼠标放到代码行上，每一行代码的变动都一清二楚~

3、Git History ：可以查看提交历史，切换分支，查看提交记录等

4、Auto Import、Auto Close Tag、Auto Rename Tag

• Auto Import可以根据你引入的组件，自动导入提示；
• Auto Rename Tag当你修改标签的时候，自动完成另一侧标签的同步修改；
• Auto Close Tag 自动出现HTML/XML闭合标签

5、Color Highlight ：显示所添加的颜色； Color Picker：鼠标悬浮在颜色上可以出现颜色板，可以自行选择颜色

例如：

6、CSS Peek ：鼠标点击class名上会跳到下方对应的style样式

7、Path Intellisense：自动提示文件路径，支持各种快速引入文件

8、Image preview
图片是否正确引入的显示工具，在图片连接上按住ctrl，鼠标悬浮即可看见是否正确找到路径下的图片文件

9、ESLint：校验我们的代码规范

10、Live Server
开启本地服务器,安装后，可以直接浏览器访问html页面。

11、JavaScript(ES6) code snippets
ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

12、Prettier：代码格式化

13、Vetur
Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。Vue开发者必备。

14、Vue VSCode Snippets
非常推荐 可以构建代码片段的缩写，大大节约开发时间，把时间花在逻辑上而不是繁琐的模板语法上

15、Vue 3 Snippets
提供了针对Vue 3的代码片段，包括Composition API等新特性的代码片段，帮助开发者快速编写Vue 3代码。

16、open in browser
可让你的html文件在浏览器中打开

17、CodeSnap
选中需要截取的代码块，然后右键点击 CodeSnap 即可生成截图

18、element-plus-doc
element-plus 的一个工具插件,用于智能提示，悬停显示文档等

19、Error Lens

通过高亮整行代码并内联显示诊断信息，使得开发者能够更快速地发现和修复代码中的问题

20、Power Mode：一款敲代码有暴击炫酷效果

输入即可有效果，你就是全组最亮的仔~

21、Thief-Book ：摸鱼看书神器

输入下载到本地的小说路径即可，仅支持TXT格式

注意：鼠标要聚焦按下面快捷键

22、小霸王 ：支持几十款游戏，实乃上班娱乐摸鱼的必备插件！

附加

可提示出现提示代码，按Tab键即可输入

持续更新，如有建议请留言~🎈