2024年前端最新VSCode插件大全｜VSCode高级玩家之第二篇，2024年最新前端面试攻略

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• • 自动关闭标签
    • 自动同步标签名
    • CSS颜色高亮
    • 高亮匹对标签
    • HTML CSS 支持
    • 小程序支持
    • Vue支持
    • React支持
    • NPM支持
    • NPM智能提示
    • 强大的代码格式化
    • 编辑器中的实时预览
    • 实时预览
    • 浏览器打开
• 「六」PHP开发插件
• • PHP强化插件
    • PHP规范检测
• 「七」Java开发插件
• • 其他语言支持
• 「待续」总结
• • 好文推荐

「一」国人必备集合

这些插件都是我们作为中国人必备的，妈妈再也不怕我们看不懂英文了。

VSCode中文简体包

插件名：Chinese (Simplified) Language Pack for Visual Studio Code

这个插件一键把整个VSCode的文字转换成中文。一个全中文化的IDE是我们特别需要的。而且这个是官方汉化包，理解无障碍。

代码翻译

插件名：翻译(英汉词典)

英语不是很好的童鞋，在写代码的时候经常会使用“某道翻译”，但是其实对于代码来说，很多时候我们会用驼峰、小驼峰、下划线等等写法来写变量名、属性名、类名和方法名的。这种写法想使用“某道翻译”在编辑器中悬浮翻译就是不可能了。

找了很久我为大家找到一个非常好用的一个插件可以解决这个问题！

本地77万词条英汉词典，不依赖任何在线翻译API，无查询次数限制。可翻译驼峰和下划线命名，及对整个文件中的标识符批量翻译。

检测代码英文单词错误

插件名：Code Spell Checker

一个基本的拼写检查器，可以检测驼峰写法。这个拼写检查程序的目标是帮助捕获常见的拼写错误。在编写代码的时候，我们都是用英文单词，很多时候我们都会写错单词的可能性。用错了单词其实对于维护性是有一定的影响的。

使用有意义的单词做为方法名、类名和变量名会给自己代码更多的意义和含义。当自己或者别人去查看代码时更容易懂其中的用意。但是如果我们拼错了单词，有些时候就无法理解这个单词是什么意思了。

所以这个插件对我们来说非常实用，就算是老外都非常多人在使用它。（目前有100多万下载量）

「二」主题集合

一个程序员一天8-12个小时都是看着编辑器和代码。如果我们的编辑器不好看，没有一定的美观和吸引力，怎么可能耐看不厌呢？加上长期看代码，一个舒服的主题自然是必备之一。

这里介绍几款我最喜欢的主题给大家使用。有更多大家喜欢的主题欢迎在评论中提出，我会补充到这里哦！

Dracula Theme

主题名：Dracula Official

这款主题主调色是偏深紫色，我用了这个主题至少也有2-3年，一直都很喜欢。里面代码的高亮和颜色都很细致，很适合长期看。这个主题的颜色有根据不同的语言做了适配，无论我们是在开发什么语言都非常好看。

Material Theme

主题名：Material Theme

这款也是非常出名的主题，在非常多的IDE/编辑器都有。用习惯这个主题的可以在VSCode中安装使用。使用量也是有200多万+。这款主题在我使用SublimeText的时候非常热爱。（也用了好几年）

Nebula Theme

主题名：Nebula Theme

这一款是我现在在用的小众主题。配色与Dracula非常相似，但是有更多的亮色，颜色的变化幅度也没有那么大，相比Dracula更为顺眼。当然这个也要看个人喜好哈。

Atom One Dark Theme

主题名：Atom One Dark Theme

我认识的一些小伙伴用过Atom，也有这么一部分小伙伴特别喜欢这个主题。

One Monokai Theme

主题名：One Monokai Theme

对长期使用SublimeText的Monokai的童鞋们，对这款主题应该感兴趣。毕竟Monokai主题陪伴了我们挺长一段时间的。（不好了要暴露年龄了😂）

GitHub Plus Theme

主题名：GitHub Plus Theme

对终于有一个白色的主题了，但是个人对白色的主题不怎么感冒。最近连微信都加入了黑暗世界，所以我已经习惯所有UI都是黑暗模式了。但是毕竟还是有童鞋特别喜爱白色的。

这里推荐一款与GitHub一样色系的白色主题（我可以说是我唯一可以考虑使用白色的一款，有童鞋有自己喜欢的白色主题可以在评论中留言给我哦！）

🌟小总结
VSCode中还有非常多的主题可以选择，如果我推荐的主题中没有你们喜欢的，可以在插件搜索框中输入theme，就会出来很多的主题供大家自由选择哦！

「三」图标主题集合

安装了编辑器主题，不安装图标主题就等同于 💐鲜花插在了 💩牛粪上。这里推荐两款我自己使用过的图标主题。

Material Icon Theme

主题名：Material Icon Theme

占了大部分人都是用这个图标主题，内含非常齐全的图标，基本你能想到的文件都在内了。非常推荐使用！

VSCode Icons

主题名：vscode-icons

这一款是VSCode官方的图标主题包，有超过500万+下载量。可以说是和Material Icon一样占了另外一大部分人在使用的一款主题。看个人喜好选择使用。个人觉得两款最大的区别在于文件夹。但是觉得Material Icon做的图标相对更加协调一些。

「四」实用插件集合

这里给小伙伴们介绍一些在其他IDE都有可能用过的超级实用插件和功能。这些插件主要是强化编辑器的功能，让我们在开发过程中得到非常大的帮助。

代码书签

插件名：Bookmarks

它是代码中导航，在重要位置之间轻松快速地移动。不再需要搜索代码。它还支持一组选择命令，允许我们选择书签行和书签行之间的区域。它对于日志文件分析非常有用。

以下是书签提供的一些功能:

• 在代码中标记/取消标记位置
• 在代码中标记位置并给出名称
• 在书签之间来回跳转
• 查看一个文件中所有书签的列表
• 查看项目中所有书签的列表
• 专用侧杆
• 带有书签的行
• 选择书签之间的区域

这里附上我经常使用的几个这个插件的命令：

• Bookmarks: List 列出当前文件中的所有书签
• Bookmarks: List from All Files 列出当前项目下所有书签
• Bookmarks: Clear 删除当前文件中的所有书签
• Bookmarks: Clear from All Files 删除当前项目下的所有书签

我们还可以通过打开侧边栏中的书签tab查看所有标签：

括号对彩色化

插件名：Bracket Pair Colorizer 2

这个扩展使用颜色来标识匹配的括号。用户可以定义要如何匹配，以及要使用哪些颜色。在代码量比较多的情况下，括号也会变得非常的多，有了颜色的标识会给开发者带来更好的识别能力。

增强Git功能

插件名：GitLens

增强VSCode中内置的Git功能——通过Git blame注释和代码透镜，一眼就能看到代码作者的身份，无缝导航和探索Git存储库，通过强大的比较命令获得有价值的见解，等等。使用Git代码管理的开发者们，这个是一个必装插件之一！

Git历史记录

插件名：Git History

对于一些开发者习惯使用编辑器中的Git管理工具的，不太喜欢要打开另外一个Git UI工具的同学，这一款插件满足你查询所有Git记录的需求。

• 查看和搜索git日志中的图形和详细信息。
• 查看文件以前的副本。
• 查看和搜索历史
• 比较分支/提交记录/文件
• 更多～

实时协作编辑

插件名：Live Share

Visual Studio Live Share允许我们与他人实时协作编辑和调试，不管我们使用的是哪种编程语言或正在构建的应用程序类型。它允许我们立即(并且安全地)共享我们当前的项目，然后根据需要共享调试会话、终端实例、本地主机web应用程序、语音呼叫等等！加入我们的会话的开发人员从我们的环境中接收所有的编辑器上下文(例如，语言服务、调试)，这确保了他们可以立即开始有效地协作，而不需要克隆任何代码或安装任何sdk。

此外，与传统的结对编程不同，Visual Studio Live Share允许开发人员一起工作，同时保留他们的个人编辑器首选项(例如主题、键绑定)，以及拥有自己的游标。这允许我们在跟随他人和自己探索想法/任务之间无缝过渡。在实践中，这种协作和独立工作的能力为许多常见用例提供了一种更自然的协作体验。

要使用这个协同软件，首先我们需要登陆（推荐使用GitHub登陆）。登陆后点击下方的Live Share:

然后编辑器就会弹出以下提示，具体意思就是说，我们的实时共享会话已经开启，邀请连接已经被复制，可以发给你的协助开发者。

这个时候我们可以把连接发给我们的协助者，这里对方必须安装了Live Share的插件并且必须是登陆状态。

这个时候对方只需要点击侧边栏的Live Share图标，然后在会话详细信息中找到并且点击加入协作会话...。

点击后编辑器上方会出现一个输入框，对方只需要输入我们提供的邀请连接然后按回车即可。

协助完毕后，我们可以点击下方的图中的图标

点击图标后，上方会出现一个选择弹窗，选择Stop Collaboration Session就可以停止协助会话了。

路径智能提示

插件名：Path Intellisense

加入此插件让我们在应用文件（例如图片）时，有智能的路径提示。

「五」前端开发插件集合

这里提供给各位童鞋世上最全的前端开发插件集合，没有“之一”。（当然要做到最强还需要大家给我多提意见，欢迎小伙伴们给我补充一些我也还没有使用过的实用前端插件哦！可以在评论区留言哈！）

程序员最好的朋友无非就是编辑器中的插件，有插件和没有使用插件在开发中简直就是天差地别。这里让我想到自己一开始学习编程的时候，使用notepad++，一行一行代码纯手敲的经历。现在有了各式各样的IDE，估计已经差不多没有人还在用文本编辑器手敲代码了。

自动关闭标签

插件名：Auto Close Tag

自动添加HTML/XML关闭标签，与Visual Studio IDE或SublimeText相同。当我们填写了开始标签，结束标签就会被自动加上。这个非常实用，减少很多我们写html和xml的时间。

如果是使用SublimeText过来的或者习惯SublimeText的童鞋，可以开启Sublime Text 3模式，在settings.json文件里面加入这个配置：

{
   "auto-close-tag.SublimeText3Mode": true
}

自动同步标签名

插件名：Auto Rename Tag

自动重命名成对的HTML/XML标记，与Visual Studio IDE相同。用这个插件可以告别每次改变标签的时候要重复修改头部和尾部标签。特别是标签内内容非常多的时候，要改确实很费劲的。

CSS颜色高亮

插件名：Color Highlight

这个插件会对页面上所有的CSS/web的颜色编码进行高亮，高亮的颜色就是编码对应的颜色。在写CSS的时候非常实用。

高亮匹对标签

插件名：VSCode Highlight Matching Tag

此插件高亮显示匹对的开始和/或结束标签。还可以在状态栏中显示标签的路径。这个插件将尝试在任何地方匹配标记: 从标记属性、字符串内部、任何文件，同时还提供广泛的样式选项来定制标记的高亮显示方式。

官方支持的标签: HTML和JSX。其他风格 (XML、Vue、Angular、PHP) 也可以。

HTML CSS 支持

插件名：HTML CSS Support

补充了VSCode中缺少的CSS支持。类属性补全、ID属性补全和全文件搜索CSS和SCSS提示等。

小程序支持

插件名：minapp-vscode

微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）

Vue支持

插件名：Vetur

开发Vue的童鞋必装插件之一。支持标签、属性的智能补全等等。

经常用Vue开发的童鞋，我这个里另外推荐一个插件给你们。就是Vue 2 Snippets，这个插件加入了Vue2的代码块，让我们开发的过程中可以快速生成Vue2的代模版。

React支持

插件名：ES7 React/Redux/GraphQL/React-Native snippets

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】