• 技术文章 >开发工具 >VSCode

    23个提高开发效率的前端VSCode插件（快来收藏）

    青灯夜游青灯夜游2022-09-27 20:37:30转载2042

    本篇文章给大家分享23个前端VSCode插件，助你提高开发效率，让你事半功倍，快来收藏吧！

    VSCode 是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。【推荐学习：《vscode入门教程》】

    Chinese（Simplified）

    1.png

    vscode 我们都知道是微软的开源软件，对于英文不好的同学呢，使用中文汉化是首先要做的，所以笔者推荐汉化插件。

    Chinese（Simplified）（简体中文）Language Pack for Visual Studio Code : 此中文（简体）语言包为 VS Code 提供本地化界面。

    2.png

    Polacode-2020

    3.png

    Polacode-2020 : 如果你想要一种简单的方法来为你的片段的任何选择提供那些漂亮的视觉效果。

    4.png

    CodeSnap

    5.png

    CodeSnap : 在 VS Code 中为您的代码截取漂亮的屏幕截图！

    6.png

    7.png

    8.png

    Image preview

    9.png

    Image preview : 在编辑器的间隙中和鼠标悬停在图片上可预览图像。

    10.png

    11.png

    Image Sprites

    12.png

    在开发某些页面时总会遇到拥有很多小图片的需求，这时使用雪碧图就可以减少服务器请求的数量并节省带宽，在没有UI帮助的情况下，选用该插件是个不错的选择。

    Image Sprites : 图像精灵是放入单个图像的图像集合。包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求。使用图像精灵将减少服务器请求的数量并节省带宽。

    13.png

    Svg Preview

    14.png

    当你找到一个合适的 svg 图像却因为颜色、形态等不合适时，可以使用此插件进行修改。

    Svg Preview : VSCode 的 Svg 预览。

    file-size

    15.png

    file-size : 一个简单的扩展。在状态栏中显示当前文本文件的大小。保存文件或更改活动选项卡时，状态将更新。

    16.png

    Live Server

    17.png

    Live Server : 为静态和动态页面启动具有实时重新加载功能的本地开发服务器。

    Profile Switcher

    18.png

    Profile Switcher : 此扩展允许您定义许多设置配置文件，您可以轻松地在它们之间切换。这个扩展的最初想法来自于我希望有一种简单的方法让我将我的 VS Code 切换到更好地优化呈现的设置（更改主题、增加字体大小等）。

    Project Manager

    19.png

    当你需要在 vscode 中打开很多不同性质的项目时，Project Manager 是不错的项目管理插件。

    Project Manager : 它可以帮助您轻松访问您的项目，无论它们位于何处。不要再错过那些重要的项目了。您可以定义自己的项目（也称为收藏夹），或选择自动检测Git、Mercurial或SVN存储库、VSCode文件夹或任何其他文件夹。

    20.png

    Settings Sync

    21.png

    Settings Sync 可以帮助我们在换电脑、或重装系统、或多个电脑中同步 VSCode 上的设置。

    Settings Sync : Visual Studio Code 的设置同步。

    npm

    22.png

    npm : 此扩展支持运行文件中定义的 npm 脚本。

    23.png

    24.png

    open in browser

    25.png

    open in browser : 此扩展可让你的html文件在浏览器中打开。

    26.png

    27.png

    28.png

    GitLens - Git supercharged

    29.png

    GitLens - Git supercharged : GitLens 增强了VS Code 中的 Git，并解锁了每个存储库中未开发的知识。 它可以帮助您通过 Git 对比注释和 CodeLens直观地可视化代码作者身份，无缝导航和探索Git 存储库，通过丰富的可视化和强大的比较命令获得有价值的见解等等。

    Git History

    30.png

    Git History : 查看 git 日志，文件历史，合并分支或提交。

    SVN

    31.png

    SVN : 此插件依赖系统的 SVN 安装，因此您需要先安装有 TortoiseSVN。

    Postcode

    32.png

    Postcode : Postcode 可用于创建和测试简单和复杂的 HTTP/s 请求，以及查看响应。

    REST Client

    33.png

    REST Client : REST Client 允许您发送 HTTP 请求并直接在 Visual Studio Code 中查看响应。

    发出请求

    发出 cURL 请求

    34.png

    Live Share

    35.png

    Live Share : Live Share 使您能够与其他人实时协作编辑和调试，无论您使用什么编程语言或您正在构建的应用程序类型。它允许您立即（并且安全地）共享您当前的项目，然后根据需要共享调试会话、终端实例、本地主机 Web 应用程序、语音通话等等！加入您的会话的开发人员会从您的环境中接收所有的编辑器上下文（例如语言服务、调试），这确保他们可以立即开始高效协作，而无需克隆任何存储库或安装任何 SDK。

    36.png

    Draw.io Integration

    37.png

    Draw.io Integration : 这个非官方的扩展将Draw.io（也称为diagrams.net）集成到 VS Code 中。

    Markdown All in One

    38.png

    Markdown All in One : Markdown 所需的一切（键盘快捷键、目录、自动预览等）。

    Markdown PDF

    39.png

    Markdown PDF : 此扩展将 Markdown 文件转换为 pdf、html、png 或 jpeg 文件。

    Markdown Preview Enhanced

    40.png

    Markdown Preview Enhanced : Markdown 预览增强。

    41.png

    更多关于VSCode的相关知识，请访问：vscode教程！

    以上就是23个提高开发效率的前端VSCode插件（快来收藏）的详细内容，更多请关注php中文网其它相关文章！

    声明：本文转载于：掘金社区，如有侵犯，请联系admin@php.cn删除
    专题推荐：前端插件 VSCode
    上一篇：VSCode中让你 high 到爆的几款摸鱼插件，快来愉快划水摸鱼吧！ 下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 值得收藏的几个VSCode代码技巧和窍门【动图演示】• 【吐血整理】vscode超实用快捷键分享，提高你的工作效率！• 分享一个好用的VSCode头部注释插件：Fileheader Pro• 详解VSCode中怎么配置SSH服务器来进行远程开发• VSCode Java的7月更新，看看Lombok支持的新改动！• VSCode中让你 high 到爆的几款摸鱼插件，快来愉快划水摸鱼吧！
    1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载