GitHub/NPM 提升幸福感的小工具

date
Aug 1, 2022
slug
github-npm-tools
status
Published
tags
GitHub
NPM
summary
GitHub 和 NPM 是发掘新鲜开源项目/仓库的好地方，这里介绍几个提升 GitHub/NPM 使用体验的工具/网站
type
Post
GitHub 和 NPM 是发掘新鲜开源项目/仓库的好地方，这里介绍几个提升 GitHub/NPM 使用体验的工具/网站

GitHub

octotree

一个 GitHub 网页扩展，可以在 GitHub 网页的一侧显示树形文件目录结构，方便跳转
  • 展示效果非常好
      • notion image
  • But…
      • notion image
除了基础的树形文件目录结构免费支持，高级的多 Tab 查看，文件图标都是需要收费的（ 还是订阅制 🥲 ）
octotree
GitHub on steroids
octotree
https://www.octotree.io/

Gitako

Gitako 支持 octotree 免费版的所有功能，同时可以支持显示 icon，更为关键的是它完全免费 & 开源 🥳
notion image
EnixCoda/Gitako

GitHub + 1s

  • 使用
只需要打开 GitHub 对应的仓库，在 GitHub 域名后加上 1s 就可通过 web vscode 访问改仓库，获得接近的原生体验
支持查看多 Tab 查看，设置喜欢的主题，全工程代码搜索
  • 例子
访问以下链接查看效果 👇
GitHub1s
GitHub1s
https://github1s.com/shuding/nextra
notion image
  • 特性
虽然拥有 vscode 的界面，但是它是无法编辑的
notion image

VS Code Remote Repositories

无需 clone GitHub 仓库代码，使用自己的 VS Code 查看对应仓库代码，而不会在自己的机器上留下代码
可以编辑，提交代码，但是部分扩展不可用，同时不能本地运行代码
  • 使用
VS Code 需要安装一个扩展：GitHub Repositories
GitHub Repositories - Visual Studio Marketplace
This is the pre-release edition of GitHub Repositories for early feedback and testing. It works best with VS Code Insiders. The GitHub Repositories extension lets you quickly browse, search, edit, and commit to any remote GitHub repository directly from within Visual Studio Code.
GitHub Repositories - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=github.remotehub
GitHub Repositories - Visual Studio Marketplace
notion image

github.dev

GitHub 官方出品，一个完全运行在浏览器端的 VS Code
  • 使用
访问对应的 GitHub 仓库，有两种方式进入 github.dev
  1. 在仓库页面按下按键 .（点）
  1. 将当前页面 URL 中的 com 替换为 dev
notion image
  • 特性
自动保存，支持编辑&提交代码至 Git 仓库，支持部分 vs code 扩展
直接在 vs code 中查看 PR / Create Issue
notion image
全平台支持
notion image

stackblitz

stackblitz 基于 webcontainer，在网页实现了 node 的环境，可以直接运行 npm scripts
针对 GitHub repo 构造这样的链接即可访问
https://stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}
  • 例子
antfu/handle
Antfu - Handle - StackBlitz
A Chinese Hanzi variation of Wordle - 汉字 Wordle
Antfu - Handle - StackBlitz
https://stackblitz.com/github/antfu/handle
Antfu - Handle - StackBlitz
notion image

Gitpod.io

一个有完整环境的 online VS Code，可以直接运行npm scripts
在对应 GitHub 仓库前加 gitpod.io/#/ 即可访问
  • 例子
clauderic/dnd-kit
Dashboard - Gitpod
Dashboard - Gitpod
https://gitpod.io/#/github.com/clauderic/dnd-kit
notion image
  • 需要收费
notion image

GitHub codespace

GitHub codespace 是托管在云中的开发环境，Codespaces 在 GitHub.com 托管的各种基于 VM 的计算选项上运行。
完整操作环境，包括开发需要的各种工具都已经安装好~
notion image
默认环境的信息：
vscode-dev-containers/containers/codespaces-linux at main · microsoft/vscode-dev-containers
Published image mcr.microsoft.com/vscode/devcontainers/universal:linuxmcr.microsoft.com/vscode/devcontainers/universal:focal See history for information on the contents of published images. While language specific development containers can be useful, in some cases you may want to use more than one in a project without having to set them all up.
vscode-dev-containers/containers/codespaces-linux at main · microsoft/vscode-dev-containers
https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux
vscode-dev-containers/containers/codespaces-linux at main · microsoft/vscode-dev-containers
  • 收费计划
一定免费额度 + 按时间收费
一定免费额度 + 按时间收费
  • 使用
在 GitHub 仓库点击 Code 即可看到启动对应仓库 codespace 的按钮
notion image
  • 例子
conwnet/github1s
notion image

NPM

bundlephobia

了解一个 npm 包的输出信息（文件包大小，文件内容组成）
Bundlephobia | Size of npm dependencies
Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle.
Bundlephobia | Size of npm dependencies
https://bundlephobia.com/
Bundlephobia | Size of npm dependencies
notion image
notion image
 

npm trends

直观的对比不同的 npm 库下载量
npm trends: Compare NPM package downloads
Which NPM package should you use? Compare NPM package download stats over time. Spot trends, pick the winner.
npm trends: Compare NPM package downloads
https://www.npmtrends.com/
npm trends: Compare NPM package downloads
  • 例子
@angular/core vs react vs svelte vs vue | npm trends
Compare npm package download statistics over time: @angular/core vs react vs svelte vs vue
@angular/core vs react vs svelte vs vue | npm trends
https://www.npmtrends.com/@angular/core-vs-react-vs-vue-vs-svelte
@angular/core vs react vs svelte vs vue | npm trends
notion image

npm.devtool.tech

直接在浏览器的 Console 控制台运行 npm 包
Find the best package for you and test it online, Analyze tech stack for your project. | DEVTOOL.TECH
在这里了解一个 npm 包的一切事情，发布体积，安装体积，打包体积，代码体积，你可在这里在线运行每一个库的代码，对比相似库的质量
Find the best package for you and test it online, Analyze tech stack for your project. | DEVTOOL.TECH
https://npm.devtool.tech/
notion image

npm unpkg

快速查看某个版本的 npm 包具体源文件信息
NPM UNPKG
NPM UNPKG
https://uiwjs.github.io/npm-unpkg
notion image
 
 

© Jeekdong 2021 - 2025