vscode中常用的36个前端插件，直接搜索下载！-VSCode-PHP中文网

首页

开发工具

VSCode

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

青灯夜游

Aug 19, 2021 am 10:47 AM

vscode前端插件

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个前端插件，直接搜索下载！的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：掘金--枫913。如有侵权，请联系admin@php.cn删除

Visual Studio：代码编译，测试和部署Apr 24, 2025 am 12:05 AM

在VisualStudio中，代码编译、测试和部署的步骤如下：1.编译：使用VisualStudio的编译器选项将源代码转化为可执行文件，支持多种语言如C#、C 和Python。2.测试：利用内置的MSTest和NUnit等框架进行单元测试，提高代码质量和可靠性。3.部署：通过Web部署、Azure部署等方式，将应用程序从开发环境转移到生产环境，确保安全性和性能。

Visual Studio：综合开发环境简介（IDE）Apr 23, 2025 am 12:02 AM

VisualStudioisMicrosoft'sflagshipIDE,supportingmultipleprogramminglanguagesandenhancingcodingefficiency.1)ItoffersfeatureslikeIntelliSenseforcodeprediction,multi-tabbedinterfaceforprojectmanagement,andtoolsfordebugging,refactoring,andversioncontrol.2

Visual Studio：探索免费和付费产品Apr 22, 2025 am 12:09 AM

VisualStudio的免费版和付费版的主要区别在于功能的丰富程度和支持的服务。免费版（Community）适用于个人开发者和小型团队，提供基本开发工具；付费版（Professional和Enterprise）则提供高级功能，如高级调试和团队协作工具，适合大型项目和企业级开发。

Visual Studio社区版：解释的免费选项Apr 21, 2025 am 12:09 AM

VisualStudioCommunityEdition是一款免费的IDE，适合个人开发者、小型团队和教育机构。1)它提供代码编辑、调试、测试和版本控制等功能。2)基于Roslyn编译器平台，支持多种编程语言并集成Git和TFVC。3)高级功能包括单元测试，优化建议包括关闭不必要的扩展和使用轻量级编辑器。

视觉工作室：轻松构建应用程序Apr 20, 2025 am 12:09 AM

VisualStudio是由微软开发的集成开发环境（IDE），支持多种编程语言，包括C#,C ,Python等。1.它提供了智能感知（IntelliSense）功能，帮助快速编写代码。2.调试器允许设置断点，逐步执行代码，找出问题。3.对于初学者，创建简单的控制台应用程序是入门的好方法。4.高级用法包括项目管理和依赖注入等设计模式的应用。5.常见错误可以通过调试工具逐步解决。6.性能优化和最佳实践包括代码优化、版本控制、代码质量检查和自动化测试。

Visual Studio和VS代码：了解其关键差异Apr 19, 2025 am 12:16 AM

VisualStudio适合大型项目和企业级应用开发，VSCode则适合快速开发和多语言支持。1.VisualStudio提供全面的IDE环境，支持微软技术栈。2.VSCode是轻量级编辑器，强调灵活性和扩展性，跨平台支持。

视觉工作室仍然免费吗？了解可用性Apr 18, 2025 am 12:05 AM

是的，VisualStudio某些版本是免费的。具体来说，VisualStudioCommunityEdition对个人开发者、开源项目、学术研究和小型组织免费。然而，也有付费版本如VisualStudioProfessional和Enterprise，适用于大型团队和企业，提供额外功能。

使用Visual Studio：跨平台开发软件Apr 17, 2025 am 12:13 AM

使用VisualStudio进行跨平台开发是可行的，通过支持.NETCore和Xamarin等框架，开发者可以编写一次代码并在多个操作系统上运行。1)创建.NETCore项目并使用其跨平台能力，2)使用Xamarin进行移动应用开发，3)利用异步编程和代码重用来优化性能，确保应用的高效运行和可维护性。

See all articles