在日常的前端开发中，我们经常会使用 VS Code 编辑器和 GitHub。为了更高效地管理代码库和协作开发，GitHub 提供了通知功能，可以及时了解代码库中的变动和新消息。但是在使用 VS Code 编辑器时，我们通常需要手动打开网页或者进入 GitHub Desktop 来查看通知，这样比较繁琐。那么如何在 VS Code 中实时查看 GitHub 通知呢？本文介绍了一个 npm 包 —— vscode-github-notifications-bell，它可以为 VS Code 编辑器添加 GitHub 通知铃铛，方便快捷地查看未读通知。
1. 安装和配置
首先，在你的工程目录下打开终端，使用以下命令安装 npm 包：
npm install -g vscode-github-notifications-bell
安装完成后，在 VS Code 中按下 ctrl + shift + p 调出命令面板，输入“vscode-github-notifications-bell:配置”并按回车键，即可打开配置页面。在配置页面中，我们需要输入以下信息：
- token：你的 GitHub API TOKEN，可以在这里创建和查看。
- owner：你要查看的仓库所属的用户名，可以在仓库页面的 URL 中找到。
- repo：你要查看的仓库名称，可以在仓库页面的 URL 中找到。
- pollInterval：轮询时间，也就是铃铛每隔多长时间检查一次 GitHub 通知，默认是 30000 毫秒（即 30 秒）。
其中，token 是必填项，其余属于可选项。填写完成后保存即可。
2. 使用方法
安装配置完成后，我们就可以在 VS Code 编辑器中使用 vscode-github-notifications-bell 了。在 VS Code 底部状态栏中会出现一个铃铛图标，代表 GitHub 通知。当你有未读的 GitHub 通知时，铃铛图标就会变成红色，并且在鼠标悬停上去时会显示未读通知的数量。点击铃铛就可以打开 GitHub 通知页面，查看已读和未读的通知。
3. 示例代码
下面是一个简单的示例，展示了如何通过 vscode-github-notifications-bell 包实现铃铛通知功能：
-- -------------------- ---- -------
----- ------ - ------------------
----- ----------------- - --------------------------------------------
-- -----
----- ------------- - ----------------------------------------------------------------------
----- ----- - ---------------------------
----- ----- - ---------------------------
----- ---- - --------------------------
----- ------------ - ----------------------------------
-- ---------
----- ---- - --- ------------------------ ------ ----- --------------
-- ------
------------------- -- -
----- ----- - -------------
-- ------ - -- -
----------------------------------------- ---- -------- ------ ------------------- - - - --- - -------
-
---
-- ----
-------------以上代码中，我们读取了配置项，然后实例化了一个 NotificationsBell 对象，并订阅了其状态变化。当有未读通知时，就会弹出一个 VS Code 信息提示框，显示未读通知的数量。最后，启动轮询。
4. 总结
通过使用 npm 包 vscode-github-notifications-bell，我们可以为 VS Code 编辑器添加 GitHub 通知铃铛，方便快捷地查看未读通知。本文介绍了该包的安装和配置、使用方法以及示例代码，希望能够帮助读者更好地使用 VS Code 编辑器和 GitHub。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e7b81e8991b448dbd71