2023年最新最全 VSCode 插件推荐

素颜马尾好姑娘i 2024-03-26 18:29 54阅读 0赞

Visual Studio Code 是由微软开发的一款免费的、针对于编写现代Web和云应用的跨平台源代码编辑器。它包含了一个丰富的插件市场，提供了很多实用的插件。下面就来分享 2023 年前端必备的 VS Code 插件！

![00decfe3e55a4d3790fc05a43f66f835.png][]

## 前端框架 ##

#### ES7+ React/Redux/React-Native snippets ####

该插件提供了许多速记前缀来加速开发并帮助开发人员为 React、Redux、GraphQL 和 React Native 创建代码片段和语法。

![6702a02010508e9a756470dbae488c99.png][]

例如，创建一个新文件并输入 rfce 然后按回车键，这将生成一个 React 函数组件，导入 React 并导出组件。

![710a32eae029b89ca3471738f38f2c90.png][]

#### VSCode React Refactor ####

这是一个专门为 React 开发人员设计的 VS Code 扩展。在处理大型项目时，重构可能很有挑战性。可以使用 VSCode React Refactor 快速重构代码，它会将 JSX 代码片段提取到新的类、组件中。此外，它还支持 TypeScript、TSX、常规函数、类和箭头函数。

#### Simple React Snippets ####

该插件提供了一组精心挑选的 React 代码片段，可以通过输入几个字母轻松地将其添加到代码中。例如，输入 imr 会将 React 导入到组件中。

![f23fadbdd29a19de02ff1169b0788769.png][]

#### Typescript React Code Snippets ####

此插件包含了使用 Typescript 的 React 代码片段，它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等语言。以下是使用 TypeScript 创建 React 组件的两个片段。

*  默认导出 React：

![9c7d916cf73b68bbffd3662480a32dec.gif][]

Vue Language Features (Volar)

默认情况下，我们的 Vue 组件看起来像这样：

![f7c369b1f939ef57dd66ff6e393226be.png][]

使用该插件可以获得漂亮的语法高亮显示、错误检查和代码格式化。并且，它还添加了很多 Vue 指令和事件处理程序，在输入时提供很好的建议。

![57a235592f0e0e3c3ead8f04965a9f6c.png][]

volar 是专门为 Vue 3 构建的语言支持插件。它基于 @vue/reactivity 按需计算一切，实现原生 TypeScript 语言服务级别的性能。

随着 Vue 3 + TypeScript 越来越流行，Vetur（Vue 的官方 VS Code 扩展）开始出现问题，例如，将 Vue 与 TypeScript 一起使用时 CPU 使用率过高，或者不支持 Vue 3 的新 <script setup> 语法。而 Volar 就解决了 Vetur 的问题，并为 Vue 3 + TypeScript 用户提供了最佳的开发体验。它为 Vue 3 提供完整的语言支持，包括标准的单文件组件 (SFC) 语法及其最新添加的 <script setup>。

#### Vue 3 Snippets ####

这个插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段。

![3cc431085f03551d5a2d799afc3429e8.png][]

#### Vue VSCode Snippets ####

此插件将 Vue 2 Snippets 和 Vue 3 Snippets 添加到 Visual Studio Code 中。

![0c0d7c75e75bdc0db00c95ef130230e1.png][]

#### React Native Tools ####

React Native Tools 扩展由 Microsoft 团队构建，它为 React Native 项目提供了一个开发环境。该插件允许在不同的模拟器或仿真器上轻松运行和调试代码，从命令面板快速运行 react-native 命令，而无需在终端中手动运行命令，并使用 IntelliSense 浏览 React Native 的函数、对象和参数等。

![8578c06eef8bc0c06ff4a551ef6fc5e2.gif][]

#### JavaScript (ES6) code snippets ####

通过此插件可以使用预定义的 ES6 语法片段速记，从而提高开发效率。这个 VS Code 插件可以自定义，因为它不特定于任何框架。

![fb2da0d749c42c4890e9c5a9590a8802.png][]

### Git 集成 ###

#### GitLens ####

该插件增强了 VS Code 中的 Git，并从每个存储库中释放隐藏数据。可以快速查看代码的编写者、轻松导航和探索 Git 存储库、通过丰富的可视化效果和强大的比较命令获取有效信息，以及执行更多操作，帮助我们更好地理解代码。

![002707a1227e99348ebeaf92ed8274ae.png][]

#### Git History ####

该插件用于查看 Git 日志和文件历史记录并比较分支或提交。

![6456b00651bdc3438c9acb69a961f16e.gif][]

#### Git Graph ####

Git Graph 插件用于可视化查看存储库的 Git 操作，并从图形中轻松执行Git操作。

![9c8767f050139ae34b449b2d66d432e0.gif][]

### 数据分析 ###

#### Import Cost ####

在项目中导入多个包时可能会出现性能问题，Import Cost 就用于查看将特定库导入项目的成本。该插件会显示导入库的大小，如果大小为绿色，则表示库很小，而红色表示库很大。

#### Time Master ####

从编程活动中自动生成的指标、见解和时间跟踪。它是一个开源项目，独立于网络环境，安全轻量。

#### VS Code Counter ####

VS Code Counter 插件用于统计项目代码的行数，安装插件之后，右键点击需要统计代码的文件夹，选择“Count lines in directory”，这时就会在项目根目录出现一个名为 .VSCodeCounter 的文件夹，包含了不同格式的结果，编辑器会打开其中的的 .md 格式。结果中会显示代码总行数，不同格式文件行数，不同路径文件函数等。代码行数中有纯代码行数、空白行数、注释行数。

![277b98c3bbe979f9fc368b5e70551401.png][]

### 功能强化 ###

#### Duplicate Action ####

开发时我们可以能会遇到需要复制文件（组件）的情况，默认情况下，必须右键单击该文件，然后单击复制。右键单击要将文件复制到的文件夹，然后单击粘贴。再次右键单击该文件并重命名。

使用该插件，当右键单击文件时，将看到一个新的“Duplicate file or directory”选项。单击它，输入文件的新名称，然后按回车键即可。

![c70955c8d354c450339a8bc34f370f66.png][]

#### npm Intellisense ####

该插件为 import 语句中的 npm 模块提供了自动完成功能。npm 模块的所有导入都会使用此扩展自动处理。

![29029efdccefed70b7421fb36e960985.gif][]

#### Path intellisense ####

该插件用于自动补全文件名。当 import 其它文件时，能够对文件进行提示，快速补全要引入的文件名。

![01a40e9d924c75165b8a8724ba6c7f3e.gif][]

#### Auto Rename Tag ####

使用该插件，可以在重命名一个 HTML 标签时，自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签，而忘记修改结束标签。该扩展适用于 HTML、XML、PHP 和 JavaScript。

![9aac994859016702b7709982cfc3750c.gif][]

#### Auto Close Tag ####

通常想要使用一个特定的 HTML 元素时，需要输入开始标签和结束标签。使用该插件后，只需要输入开始标签，它就会自动添加结束标签。对于 Vue 开发人员来说，它还支持自定义类型名称。当输入自定义组件的开始标签时，它会自动添加结束标签。

![46c451b46c211d09af52b85e23c6c2e8.gif][]

#### CSS Peek ####

使用该插件，可以直接从 HTML 和 JavaScript 文件快速导航和编辑外部样式表中定义的 CSS 样式。它提供了一个“Peek”功能，在 HTML 中选择某个 class 或者 id 名称按住Ctrl键+鼠标左键可以直接定位到该名称的CSS的位置。

该插件有利于处理大型或复杂的 CSS 样式表，因为它可以快速查找和编辑应用于特定元素的样式，而无需浏览多个文件或搜索大量代码。

![2d8f9b210d1f0cde98f4fdbd1104fd83.gif][]

#### Regex Previewer ####

Regex Previewer 用于测试正则表达式。在编写正则表达式时，可以直接使用快捷键 Ctrl+Alt+M （windows）或者 ⌥+⌘+M（Mac）在编辑器右侧启动一个标签页，可以在这个标签页写一些正则表达式测试用例，写完之后，点击正则表达式上方的 Test Regex...，这时右侧标签页匹配到字符就会高亮显示：

![7c882467140573a3ba1ce9c41b9b6376.png][]

#### Code Spell Checker ####

Code Spell Checker 插件可以检查单词拼写是否出现错误，检查的规则遵循 camelCase （驼峰拼写法）。

![bba8987327605765dd23a2d5f0b60a7c.gif][]

### 编程美化 ###

#### Highlight Matching Tag ####

当有很多 HTML 标签时，有时很难将结束标签定位到对应的开始标签，反之亦然。使用该插件，单击开始标签时，会看到结束标签带有下划线。此外，它还会突出显示代码树中的开始和结束标签。如果需要，可以自定义样式以使下划线更加突出。

除此之外，该插件还有一些方便的命令，因此当单击标签时，可以使用`ctrl + shift + P`打开命令面板并搜索**“**Highlight Matching Tag**”**，会看到两个可以在项目中使用的命令。

![e3fd0c7bf4eb9bd731fa05ae23760896.png][]

#### TODO Highlight ####

如果想在将代码发布到生产环境之前提醒自己注意事项或代码中未完成的事情，TODO Highlight VS Code 插件会非常有用。该插件会在代码注释中突出显示某些关键字，如 FIXME: 和 TODO: 以提醒注意事项或尚未完成的事情。

除此之外，使用快捷键 ctrl + shift + P 打开命令面板并搜索 Todo Highlight 选择 List the Highlighted annotations，然后选择 All 以列出在所有文件中留下的所有突出显示的注释。

![b7d8fa8f31afa312258ab8e6a941bf0d.png][]

#### Better comments ####

该插件对不同类型的注释会附加了不同的颜色，更加方便区分，帮助我们在代码中创建更人性化的注释。

![176b3d551b0b8d288c161f42e38bbc74.png][]

#### Colorize ####

Colorize 会给颜色代码增加一个当前匹配代码颜色的背景。它通过 CSS 变量、预处理器变量、hsl/hsla 颜色、跨浏览器颜色、exa、rgb、rgba和argb的彩色背景将 CSS 颜色可视化，帮助开发者快速区分颜色。

![dfba818b2377f07cc3f41357f53c93e3.png][]

#### Image preview ####

通过此插件，当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率。

![91ff6362cbf8aef70a1a1281493c142e.png][]

#### CodeSnap ####

CodeSnap 用于对代码的进行截图和共享。屏幕截图可以用文本或形状进行注释，并通过链接共享或包含在网站或文档中。只需使用 ctrl + shift + P 并输入 CodeSnap，然后按回车键，CodeSnap 窗口就会打开。

![c22e04187e0c885e1c0d7fbbdff494aa.png][]

#### Error Lens ####

Error Lens 是一款把代码检查(错误、警告、语法问题)进行突出显示的插件。Error Lens 通过使诊断更加突出，增强了语言的诊断功能，突出显示了由该语言生成的诊断所在的整行，并在代码行的位置以行方式在线打印了诊断消息。

![a07304b0dbb42b61c53bd90400ff3b91.png][]

#### One Dark Pro ####

![3eb168ff56b99059c5a38c5404802ade.png][]

#### Dracula Official ####

![293cc1c53300d1d2e82ec8e5442a0f15.png][]

#### GitHub Theme ####

![76931ad79a9c0bb6df8c8daa646c62a6.png][]

#### Winter Is Coming Theme ####

![c8979f566609f8754d698b62a8ce4aa9.png][]

![6b37006bb8cbe4cc4cba8a773cd1284b.png][]

#### Night Owl ####

![e07cf0f55a76d829e3c0f5d74a95c7cd.png][]

![db9f09faa8280a73e9da672030cb51db.png][]

#### One Monokai ####

![3265c7537b19efd498f5ee3697c9302f.png][]

#### Shades of Purple ####

![3e107cbc69d34dbc85040a4aed19cbc0.png][]

#### Ayu ####

![1f5231a988543b48369f7d6a8e84ef27.png][]

![3d0679a95477614caca8c86241c834d8.png][]

#### vscode-icons ####

VSCode 官方出品的图标库。

![6eb84eeda79534d4c52bcd30c907c50f.gif][]

#### Material Icon Theme ####

该插件根据最新的 Material Design 主题为文件和文件夹提供图标。它可以帮助我们识别文件并为编辑器添加自定义的外观。

![39041dd3da8700878bab0f6c05851198.png][]

[00decfe3e55a4d3790fc05a43f66f835.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8b84b32e414a4cf08793208b1b1fbb00.png
[6702a02010508e9a756470dbae488c99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/15700f747a074f63b10743c4b6983e07.png
[710a32eae029b89ca3471738f38f2c90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/53aeefd1f679469d8b64c0433672a01a.png
[f23fadbdd29a19de02ff1169b0788769.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/05c7e092612e469cab114a195bfc5a1b.png
[9c7d916cf73b68bbffd3662480a32dec.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5caaedd7d6324b14890798a46ffff480.png
[f7c369b1f939ef57dd66ff6e393226be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/50f2ba456f2a4fcd9406da62cc02826b.png
[57a235592f0e0e3c3ead8f04965a9f6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1eea09c89ca44aeab029f7ba18bfd1bb.png
[3cc431085f03551d5a2d799afc3429e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/453cee4f05cf4f7dba849a183c1f4847.png
[0c0d7c75e75bdc0db00c95ef130230e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/11bac99654d2482a8832b97f4fe7df1d.png
[8578c06eef8bc0c06ff4a551ef6fc5e2.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aa5e2e6f771e43598d130d1322791335.png
[fb2da0d749c42c4890e9c5a9590a8802.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b23050c7f5cb4e42a9948b3d43f1c517.png
[002707a1227e99348ebeaf92ed8274ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aaaeb96fffac404ea440d9964c951780.png
[6456b00651bdc3438c9acb69a961f16e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e191e7f6488349b38a1e81640358a165.png
[9c8767f050139ae34b449b2d66d432e0.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/874dca3b945b43dc85e76a7bcac34c51.png
[277b98c3bbe979f9fc368b5e70551401.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/09195c56a08d4736bcee17735e0a1235.png
[c70955c8d354c450339a8bc34f370f66.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/18da89ed90044ec5a4b3055204bb5823.png
[29029efdccefed70b7421fb36e960985.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/95ba29f51d984b57a17ebd2990f5fb82.png
[01a40e9d924c75165b8a8724ba6c7f3e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/002ac5e7b6204fba9bdc8bceca2e5a12.png
[9aac994859016702b7709982cfc3750c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6ff49a9486094e29804041cf30eaa3fe.png
[46c451b46c211d09af52b85e23c6c2e8.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3d55ec4eaa044521b40c5902ee14461c.png
[2d8f9b210d1f0cde98f4fdbd1104fd83.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ebca69113a544863be6a12c5be09ae07.png
[7c882467140573a3ba1ce9c41b9b6376.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3ef6b8d2bdae4b65b58101cbc7d0e9ce.png
[bba8987327605765dd23a2d5f0b60a7c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b5e11114bad349c589615cb04fef3979.png
[e3fd0c7bf4eb9bd731fa05ae23760896.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d66a4aed6e314d99bc9e201c8eca84a7.png
[b7d8fa8f31afa312258ab8e6a941bf0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ff2a7e6cbd2840f089fa8f55aabab587.png
[176b3d551b0b8d288c161f42e38bbc74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/491ab0ba6ec04e02bb8922db8f7a715c.png
[dfba818b2377f07cc3f41357f53c93e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3256c99cdb80463bba4e54e94562e14d.png
[91ff6362cbf8aef70a1a1281493c142e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/90e5b8a6a8cc4abaa0f592489cc1361e.png
[c22e04187e0c885e1c0d7fbbdff494aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/888cf58cfd124f91b5324f223d1a93d5.png
[a07304b0dbb42b61c53bd90400ff3b91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d586a355f6c3498da956fe5531ec9bbe.png
[3eb168ff56b99059c5a38c5404802ade.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/420fc56596ca4ea4ae9055d39cbb5b14.png
[293cc1c53300d1d2e82ec8e5442a0f15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1f4ee0aeca85459f8e2b3155cc8e0bb5.png
[76931ad79a9c0bb6df8c8daa646c62a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1f68b0cd4f5d45c5a8181ca539b3214c.png
[c8979f566609f8754d698b62a8ce4aa9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b1a9e3b886da4a38b1fe3fdec0c28f97.png
[6b37006bb8cbe4cc4cba8a773cd1284b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/518506653542497eb335aba5f3d19715.png
[e07cf0f55a76d829e3c0f5d74a95c7cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f297700d94624cebb87bcdab6fe991eb.png
[db9f09faa8280a73e9da672030cb51db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/784f4ad40b0842dc9705a2aa4c053c38.png
[3265c7537b19efd498f5ee3697c9302f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ec3332345b494a599e5b77ccac5264c3.png
[3e107cbc69d34dbc85040a4aed19cbc0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/29cb8aa655174fdfa95af06ba228b224.png
[1f5231a988543b48369f7d6a8e84ef27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0dcd3b2ea4c94c5498f404448be36b60.png
[3d0679a95477614caca8c86241c834d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/166d9829d24146cd927ef9574e312b12.png
[6eb84eeda79534d4c52bcd30c907c50f.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3bbe9e0f23894f70a49efb825cdb12ee.png
[39041dd3da8700878bab0f6c05851198.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/16d062d713f747eabe9f0ecbc5f19884.png