vscode中常用的36个前端插件，直接搜索下载！

趁着空了的时间，把常用的一些vscode插件整理一下，方便后面更换电脑又得重新去搜索下载 ，需要的同学可以先收藏一下，后续有get到一些新的插件会继续更新！【推荐学习：《vscode教程》】

1. Indent-Rainbow

让缩进带有颜色

2. Material Icon Theme

好看的文件图标

3. Beautify

代码格式化

4. Power Mode

一款酷炫的键盘敲击动效

5. Vetur

强大的vue开发支持工具

6. vscode-fileheader

文件头部注释信息

7. Vue CSS Peek

为单页面的 vue 文件提供 css 转定义的支持

8. Vue Peek

点击组件可以跳转至组件定义的文件

9. Vue VSCode Snippets

Vue中的一些data、method等函数自动补全提示，方便快速编写代码；

10. 小霸王

一款在vscode里可以玩的超级玛丽

11. A-super-translate

划词翻译。鼠标停留选中几秒就会查看翻译内容。

12. filesize

在状态栏中显示当前文件大小。

13. TabNine

Al辅助代码补全神器。可以根据你写过的代码习惯，来给你匹配合适的字段。

14. Auto Close Tag

自动闭合标签

15. Auto Import

自动导入模块

16. Auto Rename Tag

更改标签名时结束标签名自动重命名

17. Quokka

是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。

18. CSS Peek

使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

19. HTML Boilerplate

通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

20. Better Comments

通过添加彩色注释来改进您的代码并使其更具吸引力。

21. Error Lens

将编辑器诊断出的警告、错误、语法问题（提示的波浪线）等，以用颜色填充行背景的方式突出提示，并将诊断信息显示在尾部。

22. Prettier

是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个Prettier – Eslint 插件，你可不要错过咯！

23. color highlight

一款比较常用的代码高亮插件

24. Color Picker

颜色选择器

25. Git Blame

能够查出那段代码是谁写的

26. ESLint

eslint插件

27. TODO Highlight

TODO高亮显示

28. Trailing Spaces

突出显示尾随空格，让你的“空格”型强迫症 显示呈现

29. VS Code Counter

统计代码总行数、注释行数、空白行数，以及使用的语言。

30. Bracket Pair Colorizer

给匹配的括号着色

31. Code Spell Checker

拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中。

32. Path Intellisense

自动完成文件名

33. Rainbow Fart

官方概述：VSCode Rainbow Fart是一个在你编程时持续夸你写的牛逼的扩展，可以根据代码关键字播放贴近代码意义的真人语音。

34. any-rule

可以在vscode里快捷使用正则表达式，不需要借助度娘了！

35. ## Todo Tree

Todo Tree 是一个提示待办事件的插件，在代码注释最前面加上//TODO，整个注释就会高亮显示；

36. ## project-tree

这是一个自动生成项目结构的插件；

更多编程相关知识，请访问：编程入门！！

以上就是vscode中常用的36个前端插件，直接搜索下载！的详细内容，更多请关注www.sxiaw.com其它相关文章！