9 个实用的 VSCode 扩展插件,让你的开发工作更轻松

bbc586fc6e7060f6141a34630f120a1a.jpeg

这些扩展将帮助您提高工作效率、改进工作流程

d20fc550fae7fa6d258a6f4f8298ff53.jpeg

VSCode 是几乎所有编程语言中最受欢迎的 IDE 之一。它简单、强大,有很多很酷的特性,而且是微软的产品。所以对于任何开发人员来说,它都是一个很棒的工具。

通过安装其市场上可用的各种免费扩展,可以自定义 VS Code 并使其更适合您的工作流程。这些扩展将添加更多自定义功能,这肯定会帮助您进行编码,比如更快地开始编写代码!它会变得更漂亮,让人更加愉悦,因此您和您的同事会更好地理解代码!

1. Random Everything

f9b46d678852c44edba72c5a34c717dc.gif

"Random Everything" 是一款在 VSCode 编辑器中生成随机文本的插件。它可以生成随机数字、字符串、GUID、日期、电子邮件地址、Lorem Ipsum 文本等,帮助开发者快速生成测试数据或填充模板。

该插件支持以下随机生成功能:

  • 随机字符串

  • 随机数字

  • 随机 IP 地址

  • 随机 MAC 地址

  • 随机 GUID

  • 随机日期

  • 随机时间

  • 随机日期时间

  • 随机电子邮件地址

  • Lorem Ipsum 文本

插件的使用非常简单,只需右键单击编辑器中的文本,然后选择所需的随机生成功能即可。你还可以使用键盘快捷键来快速生成文本。

值得注意的是,插件默认生成的文本是英文,但是它也支持自定义语言,可以在插件的设置中选择所需的语言。此外,插件还支持自定义随机生成的字符集,以便满足特定的需求。

总的来说,"Random Everything" 是一款功能强大且易于使用的插件,可以帮助开发者快速生成测试数据或填充模板,提高开发效率。

https://marketplace.visualstudio.com/items?itemName=helixquar.randomeverything

2. Project Manager

f785372a66a9de1dfebcc048c5eb390a.gif

"Project Manager" is a plug-in for the Visual Studio Code editor, which allows users to easily manage multiple projects and quickly switch between projects.

Using the "Project Manager" plugin, you can add multiple projects in VSCode and organize them into groups for better management. Each project can contain multiple folders or files, which makes it possible to open multiple projects or multiple workspaces within the same workspace.

Following are the main functions of the "Project Manager" plugin:

  • Adding Projects - A project can be added via the command palette or the sidebar, and each project can contain multiple folders or files.

  • Organize Projects - Projects can be organized by creating groups to group related projects together.

  • Quickly Switch Projects - All projects can be listed in the plugin's sidebar and quickly switched to a project by clicking on the project name.

  • Workspace Support - Multiple projects can be opened in the same workspace, which makes it possible to quickly switch between different projects without switching workspaces.

  • Custom shortcut keys - You can quickly switch to a certain item by setting custom shortcut keys.

In addition to the above functions, the "Project Manager" plugin also supports custom settings, such as setting default projects, setting plugin themes and layouts, etc. The plugin also supports importing and exporting project lists to synchronize project configurations across multiple devices.

In short, "Project Manager" is a very useful plug-in, which can help users better organize and manage multiple projects and improve development efficiency.

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

3. GitLens

e53b751f6a4950de6998fa5f62fdfeb0.gif

"GitLens" is a popular Git plugin for the Visual Studio Code editor. It provides users with rich Git functions, which is convenient for users to perform code version control in the editor.

Here are the main features of the "GitLens" plugin:

  • Git 代码注解 - 在编辑器中显示 Git 代码注解,包括最后一次修改的时间、作者和提交信息。

  • 代码比较 - 可以比较当前文件和 Git 中的不同版本之间的差异,并且可以将更改内容显示在编辑器中。

  • 提交历史记录 - 可以查看 Git 提交历史记录,并且可以在历史记录中搜索特定的提交。

  • 分支和标签 - 可以查看 Git 仓库中的分支和标签,并且可以在分支和标签之间进行快速切换。

  • 代码行历史记录 - 可以查看当前文件中每一行的历史修改记录,以及对应的提交信息。

  • 代码贡献者 - 可以查看 Git 仓库中的代码贡献者列表,并且可以查看每个贡献者的提交历史记录。

  • 高级搜索 - 可以在 Git 仓库中进行高级搜索,以便更方便地查找特定的提交、文件和代码行。

除了以上功能外, "GitLens" 插件还支持自定义设置,例如自定义注解的样式和显示选项、自定义提交信息的格式等。

总之, "GitLens" 是一款功能丰富且易于使用的 Git 插件,可以帮助开发者更好地在 VSCode 编辑器中进行代码版本控制和协作,提高开发效率。

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

4. Live Server

e7c4081e5b41e869f1f9fb344849a014.gif

"Live Server" 是一款 Visual Studio Code 编辑器中非常受欢迎的插件,它提供了一个简单而强大的开发工具,可以方便地在本地环境中预览和调试 Web 应用程序和网站。

以下是 "Live Server" 插件的主要功能:

  • 快速启动服务器 - 可以通过单击编辑器中的“Go Live”按钮或使用快捷键来快速启动服务器,该服务器可以在本地环境中提供静态文件服务。

  • 自动刷新 - 可以在编辑器中保存文件后自动刷新浏览器窗口,方便开发者实时预览和调试页面。

  • Support for dynamic web pages - web pages can be dynamically rendered on the server side, and multiple back-end languages ​​such as JavaScript, PHP, Python, and Ruby are supported.

  • Support HTTPS - HTTPS can be enabled in the local environment, which is convenient for developers to simulate the HTTPS environment.

  • Support for cross-domain requests - Response header information can be set on the server side to support cross-domain requests.

  • Custom settings - You can customize the port number, default page, server root directory and other settings in the plugin's settings panel.

In short, "Live Server" is a powerful plug-in, which can help developers develop and debug Web applications and websites more quickly and conveniently, and improve development efficiency. It is very suitable for developers who need to frequently debug front-end code, build static pages and interactive websites.

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

5. All Tree

fd007a2540a5d0147351a8b81591105b.jpeg

"Todo Tree" is a very popular plugin in the Visual Studio Code editor, which can help developers better manage comments and todos in the code.

Here are the main features of the "Todo Tree" plugin:

  • Search by tag - You can scan the code for comment tags, TODO, FIXME, NOTE, BUG wait-to-do items, and organize them in a tree structure, which is convenient for developers to find and manage.

  • Support for multiple languages ​​- Multiple languages ​​can be supported, such as JavaScript, TypeScript, C++, Python, Go, Java, etc.

  • Custom Settings - You can customize settings for comment flags, ignore files, themes, etc. in the plugin's settings panel.

  • Click to jump - You can click on the to-do item in the tree structure to jump directly to the corresponding code location.

  • Shortcut keys - You can use shortcut keys to open the "Todo Tree" window and quickly navigate to the to-do items in the code.

  • Multiple Views - You can switch between different views, such as file view, project view, user view, etc., to better organize and view to-do items.

总之, "Todo Tree" 是一款功能强大的插件,它可以帮助开发者更好地管理代码中的注释和待办事项,提高开发效率。它非常适合那些需要频繁地查找和管理待办事项的开发者,尤其是在大型项目中进行开发时,更容易快速找到需要处理的任务。

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

6. Tabnine AI Autocomplete

2a3d805ce3a694bd2ce6562c550f3a6c.gif

"TabNine" 是一款基于机器学习的代码自动补全工具,它可以帮助开发者更快速地编写代码。"TabNine" 的 Visual Studio Code 插件为用户提供了高效的智能自动补全功能,能够大大提高开发效率。

以下是 "TabNine" 插件的主要功能:

  • 智能补全 - "TabNine" 使用机器学习算法来分析代码上下文,从而提供准确的代码补全建议。

  • 语言支持 - "TabNine" 支持多种编程语言,包括 JavaScript、Java、Python、C++、TypeScript 等,涵盖了大部分开发者常用的语言。

  • 快速建议 - "TabNine" 可以根据开发者正在输入的代码内容,提供快速、准确的代码建议,大大减少了输入时间。

  • 代码预测 - "TabNine" 可以分析代码上下文,为开发者预测下一步的代码,并提供智能建议。

  • 上下文感知 - "TabNine" 可以根据当前的代码上下文环境,提供更准确的代码建议。

  • 个性化设置 - "TabNine" 可以根据个人的代码风格和习惯进行个性化设置,提高代码自动补全的准确性。

总之, "TabNine" 是一款功能强大的代码自动补全插件,它可以帮助开发者更快速地编写代码,提高开发效率。它非常适合那些需要频繁编写代码的开发者,尤其是在大型项目中进行开发时,更容易快速完成任务。

https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

7. Inline fold

66b83ac1cfe215fb76e9f67222a639b7.jpeg

"Inline Fold" 是一款 Visual Studio Code 插件,它为代码编辑器增加了折叠代码的功能。与默认的代码折叠不同,"Inline Fold" 可以将代码折叠成一行,以便快速浏览和编辑代码。

以下是 "Inline Fold" 插件的主要功能:

  • 折叠代码 - "Inline Fold" 可以折叠代码,以便快速浏览和编辑代码。

  • 多种折叠方式 - "Inline Fold" 支持多种折叠方式,包括折叠所有代码块、折叠所有函数、折叠所有注释等。

  • 快捷键支持 - "Inline Fold" 可以使用自定义的快捷键来折叠和展开代码。

  • 智能展开 - "Inline Fold" 可以根据代码上下文智能展开代码,以便快速编辑和调试代码。

  • 支持多种语言 - "Inline Fold" 支持多种编程语言,包括 JavaScript、Python、Java、C++、TypeScript 等。

总之, "Inline Fold" 是一款非常实用的 Visual Studio Code 插件,它可以帮助开发者更快速、更高效地浏览和编辑代码。它特别适合那些需要处理大量代码的开发者,可以大大提高他们的开发效率。

https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold

8. Material Icon Theme

b8d17261abdb8ed50c37ffb1704b7516.jpeg

"Material Icon Theme" is a Visual Studio Code plugin that adds colorful and meaningful icons to files and folders for better file organization and browsing. It uses Google's Material Design icon set, which supports hundreds of icons for different file types and folder types.

Here are the main features of the "Material Icon Theme" plugin:

  • File Type Icons - "Material Icon Theme" adds colorful and meaningful icons for many file types, such as JavaScript, CSS, HTML, Markdown, JSON, Python, etc.

  • Folder Type Icons - "Material Icon Theme" adds colorful and meaningful icons for different types of folders, such as source code folders, configuration folders, documentation folders, etc.

  • Custom Icons - "Material Icon Theme" allows users to customize icons for file types and folder types. Users can create custom icons according to their needs.

  • Multiple Themes Support - "Material Icon Theme" supports multiple themes, including Default Theme, Dark Theme, Light Theme, etc.

  • Lightweight - "Material Icon Theme" is a lightweight plugin that won't affect the performance of VS Code.

In short, "Material Icon Theme" is a very useful Visual Studio Code plugin, which can help developers better organize and browse files. By using colorful and meaningful icons, developers can find the files they need more quickly, increasing their development productivity.

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

9、Material Theme(One Dark Pro)

50488bb65f3560f13a0b0897172b06df.png

"Material Theme" 是一款流行的 Visual Studio Code 主题插件,提供了现代、清晰、色彩丰富的外观,为 VSCode 界面带来了一种新的设计风格。

以下是 "Material Theme" 插件的主要功能:

  • 现代设计 - "Material Theme" 采用了现代设计语言,包括扁平化设计、彩色主题等,使 VS Code 界面看起来更加时尚和美观。

  • 多种配色方案 - "Material Theme" 提供了多种配色方案,用户可以根据自己的喜好选择不同的颜色主题,包括默认主题、暗色主题、浅色主题等。

  • 自定义配置 - "Material Theme" 提供了丰富的自定义配置选项,例如颜色、字体大小、行高、文件图标等,用户可以根据自己的需求对 VS Code 界面进行调整。

  • 高对比度 - "Material Theme" 支持高对比度模式,以便那些需要更高对比度的用户使用。

  • 轻量级 - "Material Theme" 是一款轻量级的插件,不会影响 VS Code 的性能。

总之, "Material Theme" 是一款非常实用的 Visual Studio Code 主题插件,它可以帮助开发者打造一个更加现代化、清晰、色彩丰富的编辑器界面。通过使用不同的配色方案和自定义配置选项,开发者可以根据自己的喜好创建一个符合自己风格的界面,从而提高他们的开发效率和工作体验。

https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

Summarize

Let me share here today, I hope today's sharing will be helpful to you, in your development life, don't forget to try these VSCode extensions. Thank you for reading. If you like my sharing, don’t forget to like and repost it so that more people can see it. Finally, don’t forget to pay attention to "Front-End Experts". Your support will be the biggest motivation for me to share. Follow me More content will continue to be output, so stay tuned.

おすすめ

転載: blog.csdn.net/Ed7zgeE9X/article/details/129116725