2023年最新最全 VSCode 插件保举

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

 前端框架

ES7+ React/Redux/React-Native snippets

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

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

VSCode React Refactor

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

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

Typescript React Code Snippets

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

• 默认导出 React：
  

Vue Language Features (Volar)

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

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

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 对应的代码片段。

Vue VSCode Snippets

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

React Native Tools

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

JavaScript (ES6) code snippets

通过此插件可以使用预界说的 ES6 语法片段速记，从而进步开辟服从。这个 VS Code 插件可以自界说，因为它不特定于任何框架。

Git 集成

GitLens

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

Git History

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

Git Graph

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

数据分析

Import Cost

在项目中导入多个包时大概会出现性能题目，Import Cost 就用于查看将特定库导入项目标本钱。该插件会显示导入库的巨细，假如巨细为绿色，则表现库很小，而赤色表现库很大。

Time Master

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

VS Code Counter

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

功能强化

Duplicate Action

开辟时我们可以能会遇到需要复制文件（组件）的情况，默认情况下，必须右键单击该文件，然后单击复制。右键单击要将文件复制到的文件夹，然后单击粘贴。再次右键单击该文件并重命名。
使用该插件，当右键单击文件时，将看到一个新的“Duplicate file or directory”选项。单击它，输入文件的新名称，然后按回车键即可。

npm Intellisense

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

Path intellisense

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

Auto Rename Tag

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

Auto Close Tag

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

CSS Peek

使用该插件，可以直接从 HTML 和 JavaScript 文件快速导航和编辑外部样式表中界说的 CSS 样式。它提供了一个“Peek”功能，在 HTML 中选择某个 class 或者 id 名称按住Ctrl键+鼠标左键可以直接定位到该名称的CSS的位置。
该插件有利于处理处罚大型或复杂的 CSS 样式表，因为它可以快速查找和编辑应用于特定元素的样式，而无需欣赏多个文件或搜索大量代码。

Regex Previewer

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

Code Spell Checker

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

编程美化

Highlight Matching Tag

当有很多 HTML 标签时，有时很难将结束标签订位到对应的开始标签，反之亦然。使用该插件，单击开始标签时，会看到结束标签带有下划线。别的，它还会突出显示代码树中的开始和结束标签。假如需要，可以自界说样式以使下划线更加突出。
除此之外，该插件另有一些方便的下令，因此当单击标签时，可以使用​​ctrl + shift + P​​打开下令面板并搜索“Highlight Matching Tag”，会看到两个可以在项目中使用的下令。

TODO Highlight

假如想在将代码发布到生产情况之条件醒自己留意事项或代码中未完成的变乱，TODO Highlight VS Code 插件会非常有用。该插件会在代码注释中突出显示某些关键字，如 FIXME: 和 TODO: 以提示留意事项或尚未完成的变乱。
除此之外，使用快捷键 ctrl + shift + P 打开下令面板并搜索 Todo Highlight 选择 List the Highlighted annotations，然后选择 All 以列出在全部文件中留下的全部突出显示的注释。

Better comments

该插件对差别范例的注释会附加了差别的颜色，更加方便区分，资助我们在代码中创建更人性化的注释。

Colorize

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

Image preview

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

CodeSnap

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

Error Lens

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

One Dark Pro


Dracula Official


GitHub Theme


Winter Is Coming Theme



Night Owl





One Monokai


Shades of Purple


Ayu



vscode-icons

VSCode 官方出品的图标库。

Material Icon Theme

该插件根据最新的 Material Design 主题为文件和文件夹提供图标。它可以资助我们识别文件并为编辑器添加自界说的表面。


来源：https://blog.csdn.net/JACK_SUJAVA/article/details/129375919
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！