工具合集

接口请求

• curl
• HTTPie
• Apifox
• Postman
• hoppscotch
• Insomnia
• Apizza
• ShowDoc
• Fast Request
• apihug
• REST Client - VS Code Marketplace

白板

• Excalidraw
• tldraw
• draw.io
• ProcessOn
• miro
• boardmix
• FigJam Figma 团队出品

代码图片

• carbon
• ray.so
• codeimg
• Chalk.ist
• codetoimg
• snappify

代码质量检查工具

• sonar 主要工具有 SonarLint 和 SonarQube
• Codecov

代码在线运行

• Codepen
• JS Bin
• JS Fiddle
• CodeSandbox
• StackBlitz
• playcode
• replit
• vscode.dev
• runjs
• Codeanywhere
• Gitpod
• 码上掘金

测试工具

• jsbenchmark

文件存储 / 图床

• wetransfer
• MinIO
• imgur
• PicX
• TinyPNG
• 极速图片压缩器

版本控制

• standard-version
• release-it

埋点/监控

• FunDebug
• Sentry
• Google Analytics
• PageSpy
• page-spy-uniapp
• LogRocket

文档

• Typedoc

  基于项目内的 ts 文件自动生成 html 或 md 文件

• Storybook

  通过 *.stories 文件自动生成组件文档, 可在网页上查看和调试

• VitePress

• undocs

Awesome

• Awesome JavaScript - https://github.com/sorrycc/awesome-javascript
• Awesome CSS - https://github.com/awesome-css-group/awesome-css
• Awesome Vue.js - https://github.com/vuejs/awesome-vue
• Awesome React - https://github.com/enaqx/awesome-react
• Awesome node.js - https://github.com/sindresorhus/awesome-nodejs
• Awesome NestJS - https://github.com/nestjs/awesome-nestjs
• Awesome Nuxt - https://github.com/nuxt/awesome
• Awesome Tailwind CSS - https://github.com/aniftyco/awesome-tailwindcss
• Awesome Readme - https://github.com/matiassingers/awesome-readme

日志

ELK

ELK 是 Elasticsearch、Logstash 和 Kibana 三款开源软件的合称。

• nestjs-logging-elk - GitHub

npm

nvm

nvm 用于 node 多版本管理, 可视化工具 nvm-desktop

nrm

nrm 用于 node 镜像源管理

pnpm add nrm -g

查看当前可使用的镜像源:

nrm ls

其输出结果为:

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

切换镜像源:

nrm use tencent

await-to-js

• await-to-js

await-to-js 可摆脱 try catch 写法, 完全的同步写法:

interface ServerResponse {
  test: number;
}

const p = Promise.resolve({test: 123});

const [err, data] = await to<ServerResponse>(p);

console.log(err, data.test);

Lodash

// pnpm add lodash.merge
import merge from 'lodash.merge';

// 可用于合并 Echarts 配置项
merge({}, defaultOption, otherOption, dataOption);

Radash

Lodash 的替代品, 使用 TS 编写, 类型友好

pnpm add radash

fast-glob

• fast-glob

node-ignore

• node-ignore

环境变量

• dotenv
• cross-env 跨平台

JSON

• quicktype

  由 JSON 自动生成相应的 Model 或 TS 等类型文件

• JSON Crack

  在线可视化 JSON

• JSON Formatter & Validator

  JSON 格式化和校验工具

Animation 动画

• Whirl

• CSS Loaders

• loading.io

• GSAP 可实现视差滚动等动画特效

• LottieFiles

  Airbnb 开源的 Lottie 技术, 基于 JSON 文件实现动画, 多平台支持

Regex 正则

• regex101
• regexper

Auth

• Auth0
• JustAuth
• supabase
• firebase
• Sa-Token

图库

• Unsplash

• 500px

• Lorem Picsum

  获得指定大小的随机图片或指定图片

杂项、待分类

• Component party

• patterns.dev

• uiverse

• 草料二维码

• Code Beautify

• Mac 教程

• Soybean Admin

• OverlayScrollbars

  自定义浏览器滚动条样式, 支持前端各主流框架

• Pragmatic drag & drop

  由 Atlassian 团队出品的拖拽库

• strava

  骑行数据记录

• bentogrids

  便当布局示例

• umami

  收集、分析 web 网站用户访问数据

• CSS to UnoCSS

  输入 CSS 样式, 自动生成相应的 UnoCSS 原子类, 可用于在线调试和转换

• CSS to React Native

  将 CSS 样式转换为 React Native Stylesheet Objects

• Css To React

• 将 CSS 样式转为 React inline json style

• appetize

• AST Explorer： https://astexplorer.net/

  对应源码： https://github.com/fkling/astexplorer

• TypeScript AST Viewer： https://ts-ast-viewer.com/

  对应源码： https://github.com/dsherret/ts-ast-viewer

• shields.io

  各种徽章

• GitHub Vistor Count:

  ![Visitor Count](https://profile-counter.glitch.me/{YOUR USER}/count.svg)

  eg:

  

Contributors

why

Changelog

Last edited 2 minutes ago

View full history

da5df4d-feat: update