vscode必备14个插件,vscode十大必装插件

本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件，用于大大提高软件开发的效率。VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效开发必装插件」。

VSCode（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，算是目前前端开发几乎完美的软件开发工具。

官网为：https://code.visualstudio.com/

在我们的知识星球社区中给大家分享过我原创的 10 集视频教程「VSCode 高效开发必装插件」。

此课程为 VSCode 编辑器系列课程。VSCode 强大的插件库使得其在提升开发效率方面更加的无敌，系列课程给大家分享了必装插件的安装、配置与使用技巧相关的知识。

视频教程课程大纲

• 001 - 课程简介
• 002 - 如何让你的文件类型一目了然
• 003 - 如何更加高效地管理项目
• 004 - 自动格式化你的代码
• 005 - 如何一键搭建各类语言的学习测试环境
• 006 - 如何和 Chrome 联动调试
• 007 - 如何实时自动检测你的代码规范与代码中的错误
• 008 - 如何提升 React 等前端开发的效率
• 009 - 如何集成并美化你的终端到 VSCode 中
• 010 - Visual Studio 重度使用者如何迁移到 VSCode

视频教程地址：https://devopen.club/course/vscode。

相当于视频教程的补充更新，这里再次给大家整理出 10 个必装的 VSCode 编辑器插件。编辑器的基本使用与插件的安装可以直接参考上面的视频教程。

2.1 文件图标 vscode-icons

• 插件名称：vscode-icons
• 插件地址：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

首先为了我们在编码时有一个高效、易用的界面，我们需要对一些不明了的组件做一些美化。

vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示，这样我们在查看长长的文件列表的时候，可以直接通过文件的图标就可以快速知道文件的类型，而不是去看文件的后缀。

2.2 暗色主题 One Dark Pro

• 插件名称：One Dark Pro
• 插件地址：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

长时间的编码，暗色调的编码环境更不容易让视力疲劳，而且也可以让自己更加专注。

安装了 One Dark Pro 插件后，可以一键将 VSCode 编辑器的颜色调整成暗色系，编码起来更加舒适。

2.3 代码美化 Beautify

• 插件名称：Beautify
• 插件地址：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Beautify 插件可以快速格式化你的代码格式，让你在编写代码时杂乱的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利。

插件支持的语言非常多，基本堵盖了目前所有的语言，而且你还可以自定义代码格式化的结构。