2024年前端最全VSCode插件大全｜VSCode高级玩家之第二篇(1)，2024年最新【面试必备】

最新推荐文章于 2024-05-24 16:55:16 发布

2401_84446882

最新推荐文章于 2024-05-24 16:55:16 发布

阅读量827

点赞数 18

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84446882/article/details/138759405

版权

程序员专栏收录该内容

155 篇文章 0 订阅

订阅专栏

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

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

所以这个插件对我们来说非常实用，就算是老外都非常多人在使用它。（目前有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和ES7中的React/Redux代码片段，以及VSCode的Babel插件特性。编写React的童鞋，这个插件是必备之一。
在这里插入图片描述

NPM支持

插件名：npm

这个扩展支持运行包中定义的npm脚本。并根据包中定义的依赖项验证已安装的模块。最喜欢这个插件的功能就是可以自动检测依赖是否安装，还可以提示依赖的版本和具体项目地址。使用npm的童鞋必备插件之一。

NPM智能提示

插件名：npm Intellisense

加入此插件可以让我们在编写JavaScript的时候有npm依赖包的提示。特别是引用的过程中会有丰富的提示。

强大的代码格式化

插件名：Prettier - Code formatter

Prettier是一个代码格式化程序。它通过解析代码并使用它自己的规则重新打印代码来强制实现一致的样式，这些规则考虑到最大行长度，在必要时包装代码。

在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高。

🌟小技巧
我们可以通过在settings.json中强制让一些特定语言用这个格式化工具。在settings.json中添加以下配置。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

🌟小技巧
个人还建议设置编辑器在保存时自动格式化。在settings.json中添加以下配置。

// 全局配置
"editor.formatOnSave": false,
// 按语言配置


# 学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/a106d706aecb63c90a6edcf6fab6aa1c.webp?x-oss-process=image/format,png)

tings.json`中强制让一些特定语言用这个格式化工具。在`settings.json`中添加以下配置。
> 
> 
>

{
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“[javascript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
}



> 
> 🌟小技巧  
>  个人还建议设置编辑器在保存时自动格式化。在`settings.json`中添加以下配置。
> 
> 
>

// 全局配置
“editor.formatOnSave”: false,
// 按语言配置

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-UKXRzOWL-1715503349172)]

2401_84446882

关注

18
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
2024年前端最全VSCode插件大全｜VSCode高级玩家之第二篇(1)，2024年最新【面试必备】

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
复制链接

扫一扫