VSCode 是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。

Settings Sync

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

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

• 插件名：Settings Sync
• 官方地址：https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

npm

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

• 插件名：npm
• 官方地址：https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script
• 特征：

• npm为报告的警告提供运行快速修复。

• 用于运行脚本的命令在该npm类别中可用

open in browser

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

• 插件名：open in browser
• 官方地址：https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
• 用法

• 使用快捷方式在默认浏览器Alt + B中打开当前htmlShift + Alt + B文件，或选择浏览器。您也可以像图片一样右键单击：

• 当您选择 时oepn in Other Browsers，将显示一个浏览器列表，您可以选择一个打开当前文件。

• 当您选择 时open in Default Browser，默认为系统默认浏览器。如果你想配置默认浏览器，你可以像这样覆盖它：

GitLens - Git supercharged

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

• 插件名：GitLens - Git supercharged
• 官方地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Git History

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

• 插件名：Git History
• 官方地址：https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

SVN

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

• 插件名：SVN
• 官方地址：https://marketplace.visualstudio.com/items?itemName=johnstoncode.svn-scm
• 特征：查看：

• 源代码管理视图
• 排水沟中的快速差异
• 状态栏
• 创建变更列表
• 添加文件
• 还原编辑
• 删除文件
• 创建分支
• 切换分支
• 创建补丁
• 差异变化
• 提交更改/更改列表
• 查看提交消息

Postcode

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

• 插件名：Postcode
• 官方地址：https://marketplace.visualstudio.com/items?itemName=rohinivsenthil.postcode

REST Client

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

• 插件名：TEST Client
• 官方地址：https://marketplace.visualstudio.com/items?itemName=humao.rest-client

发出请求

发出 cURL 请求

Live Share

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

• 插件名：Live Share
• 官方地址：https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

Draw.io Integration

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

• 插件名：Draw.io Integration
• 官方地址：https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
• 特征：

• 在 Draw.io 编辑器中 编辑 、或.drawio文件。.dio.drawio.svg.drawio.png

• 要创建一个新图表，只需创建一个空的*.drawio,*.drawio.svg或*.drawio.png文件并打开它。
• .drawio.svg.svg是可以嵌入到 Github 自述文件中的有效文件！不需要导出。
• .drawio.png是有效.png文件！不需要导出。您应该.svg尽可能使用它们 - 它们看起来好多了！
• 要在不同格式之间进行转换，请使用Draw.io: Convert To...命令。

• 默认使用 Draw.io 的离线版本。
• 多个 Draw.io 主题可用。
• 使用 Liveshare 与他人协作编辑图表。
• 节点/边可以与代码跨度链接。

后续如有发现更多更好的插件将继续分享。安装太多的插件恐会影响 VSCode 的启动速度，同时增加内存的占用，可能影响开发效率，最终适得其反，所以建议只安装自己喜欢的、常用的即可。