Skip to content

MichealWayne/fe-tools

Repository files navigation

fe-tools

前端开发工具集:常用文档网站、样式/js方法封装库(ts)、典型项目模板。English README>>


1. 常用网站

目录:

注:一些选型可以考虑先问 Deepseek / chatGPT / Claude / Kimi,然后根据回答信息进行综合判断

1.1 HTML/CSS/JavaScript/WASM/Dart

地址 标签 说明
MDN 文档手册 html/css/js Mozilla出品的一个很全很有用的前端查询/学习网站。
MDN AI助手 html/css/js MDN文档的AI问答机器人。
W3C官网 html/css/js W3C官方标准。
W3C学习网站 w3cschool W3C School,国际热门的web开发学习网站,适合入门。
W3C CSS w3c-css W3C CSS规范文档。
css属性参考手册 css 快速查询css属性及基本使用。
canvas api速查手册 canvas canvas API方法集合。
W3C官网-SVG svg W3C官网,SVG文档(左侧RECOMMENDATIONS)。
VML 参考手册 VML(IE) 历史参考:IE6/IE7 时代的图形绘制技术,适合理解旧项目兼容方案,不建议新项目使用。
TypeScript官方手册 typescript TypeScript官方手册。
TypeScript Challenges ts-challenges TypeScript Challenges,在线学习/检验自己的ts类型编程水平。
ECMA standards ecma ECMAScript 协议标准。
ECMA International(6) ES6 历史参考:ECMAScript 2015/ES6 官方版本页;现代标准建议以 ECMA-262 最新版和 MDN 为准。
ECMA International(6) 汉化 ES6 历史参考:ECMAScript 中文翻译资料,内容不完整且更新较慢,建议以 ECMA 官方和 MDN 为准。
ECMA6 features ES6 历史参考:ES6 特性演示站点,适合快速回顾 ES6 语法特性;现代新特性建议查 MDN/TC39。
ES6入门(阮一峰) ES6 经典中文入门资料,适合补 ES6 基础;现代 JS 新特性以 MDN/TC39/ECMA-262 最新版为准。
Web API Reference html5 HTML5 web API查询,如摄像头/地理位置。
Safari HTML Ref查询 html Safari webview的HTML标签查询,用于移动web开发,比如某些iOS特殊的属性或表现可以查这个。
WebKit 特性状态查询 webkit WebKit 官网文档,js/css特性状态支持情况查询。
Dart官网 dart dart语言英文官网。
Dart中文网 dart dart语言中文学习网。
RFC规范官网 rfc/http RFC协议官网,可查询HTTP协议等内容。
Media Types MIME 媒体类型列表,MIME。
Web Assembly官网 wasm Web Assembly(wasm)英文官网。
Wasmtime wasmtime WebAssembly/WASI 运行时,适合了解 WASM 在服务端/边缘侧的运行能力。
jco jco Bytecode Alliance 的 JavaScript 工具链,可用于 WebAssembly Component Model 与 JS 互操作。
Web Assembly中文网 wasm Web Assembly(wasm)中文网。
Krustlet 官网 krustlet 历史/专项参考:Kubernetes 中运行 WASM workload 的实验性方案,并非常规前端 WASM 框架。

1.2 兼容/查询

地址 标签 说明
can i use caniuse 使用频率最高的兼容支持查询网站。
ES兼容查询 js ECMAScript兼容查询。
微信小程序ES兼容查询 weapp 微信小程序ES api及对应小程序环境版本兼容查询。
iOS字体 ios font iOS系统自带字体支持情况查询。
Web安全色查询 web color 历史参考:216 Web 安全色属于早期显示设备/浏览器兼容概念,现代 UI 设计通常不再作为硬性约束。
StatCounter浏览器份额统计 statcounter *StatCounter的浏览器统计报表
浏览器份额统计 browser 第三方参考:百度统计相关浏览器/应用份额数据源,链接可用时可保留,建议与 StatCounter/内部埋点交叉验证。

1.3 CSS工具

1.3.1 预处理

地址 标签 说明
less文档 less 易上手的CSS预处理工具。
sass 文档 sass 热门的CSS预处理工具。
stylus 文档 stylus 功能丰富的CSS预处理工具。
stylus 文档(张旭鑫) stylus stylus中文文档。
Assembler CSS 文档 asmcss Assembler CSS 官方文档,Just-in-time。
Lightning CSS lightningcss Rust 写的超快 CSS parser/transformer/minifier,很多构建链路会用它替代部分 PostCSS/minifier
Tailwind Typography tailwind-typography 官方 Prose 排版插件(Markdown/富文本场景常用)
Panda CSS panda-css Build-time、Type-safe 的 CSS-in-JS/原子化方案(设计系统场景热)

1.3.2 后处理

地址 标签 说明
postcss 文档 postcss 被广泛运用的CSS后处理工具,常用于 CSS 转换、插件处理和工程化链路。
postcss 插件 postcss PostCSS 插件生态入口。
autoprefixer autoprefixer 自动补充浏CSS前缀的后处理工具。
cssnano官网 cssnano CSS优化和分解插件。
postcss-plugin-px2rem px2rem 将px单位转为rem单位的工具。
postcss-px-to-viewport px2vw 将px单位转为vw单位的工具。
PostCSS Preset Env postcss-preset-env cssnext 的现代替代方案,用于将较新的 CSS 语法按目标浏览器转换为可用 CSS。

1.3.3 样式库/模块

地址 标签 说明
30s-of-code(css) 30s-of-code(css) 常用CSS样式模块集合,30s of code系列。
animate.css animate.css CSS3动画库。
Hover.css Hover.css PC鼠标hover交互动画库。
bulma.css bulma.css 一款基于 Flexbox 的轻量级CSS UI库。
cardinal.css cardinal.css 历史参考:早期移动优先的 Less 样式库,新项目通常优先 Tailwind/UnoCSS/现代组件库。
bootflat.css bootflat.css 历史参考:Bootstrap 3 时代的扁平化风格 SCSS 库,适合旧项目维护。
corpus.css corpus.css 历史参考:小众 SCSS 集合库,新项目建议优先使用现代 CSS 架构或组件库。
weui weui 微信风格的样式库,腾讯。
materialize.css materializecss Material风格的响应式前端样式框架。
mui.css MUI Material风格的轻量级前端样式框架。
Metro UI Metro UI 一款流行的响应式前端样式框架,React版
NES.css NES.css 游戏机像素风格的前端样式框架。
paper.css paper.css 手绘风格的前端样式框架。
css3 icon css3 icon 纯CSS实现的图标。
Bootstrap 文档 bootstrap 经典响应式前端样式框架,仍适合部分后台、官网和原型场景。
layui 文档 layui 一款采用自身模块规范编写的前端 UI 框架。
fontawesome fontawesome 字体图标库。
iconfont iconfont 字体图标库,阿里。
normalize normalize 相对较优的CSS reset替代方案。
Tailwind官网 tailwind Utility-first CSS 框架,适合快速构建定制化 UI 和设计系统。
Unocss官网 unocss 原子、按需的css模块化引擎、有借鉴tailwind。
Vanilla Extract vanilla-extract TypeScript-first 的零运行时 CSS-in-JS 方案,适合设计系统和组件库。
Stylelint stylelint CSS/SCSS/Less 等样式代码检查工具,现代样式质量门禁常用。

1.3.4 其他

地址 标签 说明
css tricks css tricks 包括布局、图标、动画等CSS技巧。
BEM bem BEM写法规范。
ACSS acss Atomic CSS,一种模块化写法规范。
IT.css itcss IT CSS,一种组件化写法规范。
CSS modules css-modules 一种CSS样式模块化的解决方案。
css in js css-in-js 用写js的方式生成css样式。
Emotion emotion 流行的 CSS-in-JS 库,React 生态常见。
Stitches stitches 现代 CSS-in-JS 方案,适合组件变体和设计系统场景。
Moo-CSS moo-css 一种CSS写法方案。
CSS tricks for web developers You-need-to-know-css CSS技巧集合。
logotyp.us logotyp 国内外知名企业/商业的logo集合。
uiverse.io uiverse css样式组件集合,号称“最大的UI开源库”。

1.4 JS插件/库

1.4.1 库

地址 标签 说明
LoDash lodash 广为人知的函数式工具库。
ramda ramda 比较著名的函数式工具库。
fp-ts fp-ts 遵循函数式编程范式的ts封装库。
radash radash ts函数式工具库。
es-toolkit es-toolkit 面向现代 JS/TS 的高性能工具函数库,可作为 lodash/radash 类工具的现代选择。
UnderscoreJS underscorejs 红极一时的函数式工具库。
jQueryJs jQuery 存量维护:经典 DOM/Ajax/插件生态库,老项目常见;新项目通常不作为默认基础库。
ZeptoJs Zepto 历史参考:早期移动 Web 常用的轻量级 jQuery 替代库,适合旧项目维护。
city.js city 全国行政区划分数据文件。
phaser.js phaser 2D游戏前端库。
fabric.js fabricjs 有名的svg和canvas相互转换的封装库。
babylon.js babylonjs 有名的3D游戏/视频框架。
immutable-js immutable 生产环境js的List, Stack, Map, OrderedMap, Set, OrderedSet以及Record数据结构支持,通常用于ReactJs。
GCanvas gcanvas 轻量的跨平台图形引擎(web/weex/react-native),阿里。
core-decorators core-decorators 丰富的装饰器封装库,基于ES2016/2017的装饰器语法。
http-status-codes http-status-codes 枚举 HTTP 状态代码的常量。支持 RFC1945(HTTP/1.0、RFC2616 (HTTP/1.1) 和 RFC2518 (WebDAV))中定义的所有状态代码。常用于ajax请求处理,ts。
Zodjs zod 以 TypeScript 为首的模式声明和验证库,可用于数字格式校验及生成ts声明。
ts2dart ts2dart 历史参考:TypeScript 转 Dart 的早期工具,已多年未维护,适合了解历史方案,不建议新项目依赖。
InversifyJS inversify 一款 js/ts IoC的封装库。
BottleJs bottlejs 一轻量 js/ts 依赖注入容器库。特点是延迟加载。

1.4.2 数据工具

地址 标签 说明
stdlib stdlib js的数学增强库。
StreamJs streamjs 一款js数据的操作工具。
BaconJs baconjs 也是一款js数据的操作工具。
Date fns date-fns 一款模块化支持按需的日期格式化工具。
Luxon luxon Moment 团队出品的现代日期时间库,适合时区、国际化等场景。
Temporal temporal JavaScript 日期时间 API 的现代化提案/文档,适合了解未来原生时间处理能力。
DayJs dayjs 一款日期格式化的工具,轻量,MomentJS的替代品。
MomentJs momentjs 存量维护:老项目常见日期处理库;新项目建议优先 Day.js、date-fns、Luxon 或 Temporal。
numbro numbrojs 一款多国语言的数字转化工具。
NumeralJs numeraljs 用于格式化和操作数字的 js 库。
accounting.js accounting.js 数字,金钱的格式化工具。
money.js money.js 金钱的汇率转换工具。
decimal.js decimal.js Js精度处理库。
Tanstack Query tanstack-query 异步状态管理库,支持TS/JS、React、Solid、Vue、Svelte和Angular。
SWR swr React 数据请求与缓存 Hooks 库,适合轻量服务端状态场景。

1.4.3 请求、cookie和缓存

地址 标签 说明
axios axios 高频使用的ajax库。
fetch fetch Fetch API 的兼容 polyfill;现代浏览器已原生支持 Fetch,旧环境兼容时再使用。
jsonp jsonp 不用多说,实现jsonp。(axios没有封装jsonp)
URI.js uri URI解析操作的库。
StoreJs storage storage的封装库,兼容IE6。
js-cookie js-cookie cookie的封装库。
Dexie.js dexiejs IndexedDB的封装库。
Cache API cache-api 浏览器原生缓存 API,常与 Service Worker/PWA 配合使用。
Workbox workbox Google 提供的 Service Worker/PWA 缓存策略工具库。
localForage.js localForage 基于IndexedDB、WebSQL、localStorage的离线存储库,Mozilla。
basket.js basket.js 历史参考:早期利用 localStorage 缓存 script/css 的方案,现代项目优先 HTTP Cache、Service Worker、Cache API 或 Workbox。

1.4.4 插件

地址 标签 说明
swiper.js swiper 轮播插件。
nanobar.js nanobar 绚丽的进度条展示插件,IE7+。
sweetalert sweetalertjs 效果不错的PC alert展示插件。
bowserjs bowserjs 通过ua做的浏览器探测插件。
clipboard.js clipboardjs 剪贴板控制插件。
Qrcode-generator qrcode-generator 二维码生成工具。
html2canvas html2canvas html转为图片(canvas),即实现网页截图。
rrweb rrweb 基于样式截取的网页“录屏”工具,实现用户操作采集和回放。
Pen Editor Pen Editor 历史参考:早期轻量 Web 编辑器;现代富文本可参考 ProseMirror、Tiptap、Lexical。
cleave.js cleave.js 一款好用的input输入控制插件。
autosize.js autosize.js 一款好用的<textarea/>高度自适应工具。
FileSaver.js FileSaver.js 网页端字符/图片/文件另存为插件。
download.js download.js 网页端字符/图片/文件另存为插件,比FileSaver快一点。
FileAPI.js FileAPI 控制文件上传的插件。
shake.js shake.js 移动端摇晃震动监听插件。
Tippy.js tippy.js 好用的气泡组件,有React版。
fuse fusejs 轻量、好用的js模糊搜索库。
MiniSearch minisearch 浏览器/Node 端全文检索库,适合小型本地搜索场景。
Pagefind pagefind 静态站点全文搜索工具,适合文档站和博客。
algolia algolia 好用的搜索集成方案。
dejavu dejavu 一款弹性搜索方案,逮虾户。
driver.js driverjs 一款轻量的用户操作引导插件。
aos.js aosjs 一款强大的页面滚动动画插件。
favico.js favicojs 趣味/特殊交互插件:用于 favicon 动态角标或动画,适合特殊通知类场景。
fullPage.js fullpagejs 一款快速搭建全屏滚动页面的插件。
Lucky Canvas lucky-canvas 一款支持web、小程序跨平台的 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。
Typedjs typed.js 一款模拟打字机效果的js UI库。
视/音频
地址 标签 说明
MediaElement.js mediaelementjs 一款视频控制插件。
video.js videojs 一款视频控制插件。
hls.js hlsjs 浏览器端 HLS 播放库,直播/点播场景常用。
dash.js dashjs MPEG-DASH 播放器库,适合自适应码流播放场景。
flv.js flvjs 无需 Flash 的 FLV 播放插件,适合存量直播/视频场景。
howler.js howlerjs 视、音频控制插件。
jplayer jplayer jQuery的视、音频控制插件。
audio5.js audio5js 历史参考:早期音频控制插件,现代复杂音频场景建议优先 Web Audio API、Tone.js、howler.js、wavesurfer.js。
Tone.js tonejs Web Audio 框架,适合音乐创作、合成器、音序器等复杂音频场景。
Web Audio API web-audio-api 浏览器原生音频处理 API,适合音频分析、合成和可视化。
Media Session API media-session 浏览器媒体会话 API,可控制系统媒体通知、锁屏播放等能力。
Wavesurfer.js wavesurfer 一款音频波形播放器。
图片
地址 标签 说明
caman.js camanjs 历史参考:早期 Web 图片处理插件,现代项目可参考 Sharp、Squoosh、Compressor.js、Jimp、WebCodecs。
Jimp jimp JavaScript 图片处理库,适合 Node/脚本环境的简单图片处理。
WebCodecs API webcodecs 浏览器底层音视频/图像编解码 API,适合高性能媒体处理场景。
WASM ImageMagick wasm-imagemagick ImageMagick 的 WASM 版本,适合浏览器侧图片格式转换和处理实验。
Sharp sharp 一款强大的图片处理工具。
squoosh.js squoosh 一款优秀的图片压缩方案,有浏览器环境。
tesseract.js tesseract 一款强大的OCR识别库。
imagesloaded imagesloaded 判断元素图片加载状态的库。
cropper.js cropperjs 一款集成的图片裁剪插件库。
viewer.js viewerjs 一款集成的图片浏览/简单处理插件库。
compressor.js compressorjs 一款集成的图片压缩处理插件库。
字符串
地址 标签 说明
Voca.js vocajs 字符串的驼峰/修饰/填充/截断/转义/大小写更改等等。
anchorme.js anchormejs 自动将文本中的链接/URL/电子邮件转化为可点击的锚点链接。
String.js stringjs 历史参考:老字符串工具库,现代项目优先原生字符串 API、lodash/radash、Voca 或 es-toolkit。
qs.js qsjs URL参数处理库。
nanoid nanoid 小型、安全、URL 友好的唯一字符串 ID 生成器。
uuid uuid 生成符合 RFC 的 UUID 库。
md5.js md5 获取字符、Buffer的md5。
hash.js hash js的hash字符串处理。

1.4.5 工具

地址 标签 说明
RequireJs requirejs 历史参考:AMD 模块化工具,适合老项目维护;新项目优先 ESM/Vite/Rollup/Webpack/Rspack。
SeaJs seajs 历史参考:CMD 模块化工具,适合了解前端模块化演进和存量项目维护。
Browserify browserify 历史参考:浏览器端使用 Node-style require 的打包工具,现代项目优先 ESM/Vite/Rollup/Rspack。
validate.js validate.js form表单校验工具。
validator.js validator.js 有名的内容校验工具,比如邮箱验证、数值验证等。
RxJS官网 RxJS ReactiveX 编程理念的 JS 异步/响应式编程库。
Faker faker 用于在浏览器/Node.js 中生成假数据,当前推荐使用 @faker-js/faker。
Joi官网 joi 面向js的强大schema描述语言与数据验证器。
classnames classnames className条件组合的工具,多用于React。
clsx clsx 轻量(228B)className条件组合的工具,多用于React。
path-to-regexp path-to-regexp URL或路径校验工具,使用面极广。
Mousetrap Mousetrap 键盘事件注册捕获封装库,支持Windows/Mac键盘。
UaParserJs ua-parser-js 检测用户的浏览器,引擎,操作系统,CPU和设备。可运行在浏览器或node.js。
click-to-component click-to-component 浏览器运行时快速定位React组件源码(VSCode打开)的工具。

1.4.6 数据可视化(图表)

地址 标签 说明
highcharts highcharts 成熟商业可视化库,兼容性和图表能力较强,企业使用需关注授权。
Apache ECharts echarts Apache 开源的强大交互式图表与可视化库,国内业务图表场景高频使用。
d3 d3 底层数据驱动可视化工具库,适合高度定制的 SVG/Canvas/数据可视化场景。
Chartjs chartjs 简洁易用的 Canvas 图表库,适合常见业务图表。
AntV G2/G6/X6/L7 蚂蚁可视化体系,覆盖统计图表、图分析、流程图/图编辑和地理可视化。
FundCharts fundcharts 本人的跨端轻量可视化库。
ThreeJs文档 threejs/webGL 著名的webGL 3D建模库
PlayCanvas文档 playcanvas webGL游戏3D建模库
scene.js scenejs 历史参考:早期 WebGL 3D 基础库;现代 3D/WebGL 场景优先 Three.js、Babylon.js、PlayCanvas、OGL、React Three Fiber。
Snap.svg snap 一款svg操作库。
pixi.js pixijs 2D WebGL渲染引擎。
OGL ogl 轻量 WebGL 库,适合更底层但简洁的 3D/WebGL 开发。
React Three Fiber react-three-fiber React 生态的 Three.js 渲染器,适合 React 项目中的 3D 场景。
TresJS tresjs Vue 生态的 Three.js 声明式封装,适合 Vue 项目中的 3D 场景。
svg-3d-builder svg-3d-builder 历史/专项参考:3D SVG 渲染引擎,适合了解 SVG 3D 表达方案。
jsplumb jsplumb 一款好用的流程图可视化库。
cytoscapejs cytoscape 一款好用的关系图谱可视化库。
Mermaid mermaid 用文本生成流程图、时序图、架构图等图表的工具。
Zrender zrender 2D渲染渲染引擎库,支持Canvas/SVG/VML,也是ECharts的渲染器。
Mind Elixir mind-elixir 一款类似xmind效果的思维导图库。

1.4.7 数据可视化(地图)

地址 标签 说明
CesiumJS Cesium.js 3D 地球、GIS 和城市建模可视化库。
Kartograph Kartograph.js 历史参考:早期 2D SVG 地图展示库;现代地图/地理可视化可参考 Leaflet、MapLibre GL、deck.gl、CesiumJS、AntV L7、ECharts Map。
leafletjs Leaflet.js 一款移动优先的地图展示插件。
MapLibre GL maplibre 开源地图渲染库,适合矢量瓦片和交互地图场景。
deck.gl deckgl 大规模地理空间数据可视化框架。
AntV L7 antv-l7 AntV 旗下地理空间数据可视化库。

1.4.8 h5动画

地址 标签 说明
Bounce.js BounceJS 历史参考:早期 CSS3 动画创建工具;现代动画可参考 Anime.js、GSAP、Motion、Lottie、AutoAnimate、Theatre.js。
animateplus.js Animateplus 历史/小众参考:轻量动画工具;现代项目可优先考虑 Anime.js、GSAP、Motion、Lottie、AutoAnimate。
Anime.js animejs 轻量级js动画库。
GSAP gsap 专业级 Web 动画库,复杂时间线和高性能动画场景常用。
Motion motion 现代动画库,覆盖 React 和纯 JS 动画场景。
AutoAnimate auto-animate 自动为 DOM 插入、删除、排序变化添加过渡动画的轻量库。
Theatre.js theatrejs 面向复杂交互、3D 和时间线控制的动画编排工具。
svg.js svgjs 轻量的svg操作/动画库。
snapsvg Snap.svg 一款有名的svg操作/动画库。
lottie lottie web/原生/小程序/RN 的跨端动效方案。
EaselJS easeljs canvas动画操作库,CreateJS四剑客之一。
TweenJS tweenjs 动画曲线(ease/linear...)操作库,CreateJS四剑客之一。
SoundJS soundjs 音频控制库,CreateJS四剑客之一。
PreloadJS preload 资源预加载库,CreateJS四剑客之一。
P5js p5js canvas绘画功能库。
Rough.js roughjs 一个有意思的canvas绘图库(画出的图形具有手绘风格)。
BabylonJS BabylonJS 功能强大的 Web 3D 游戏和渲染引擎;与 1.4.1 的 babylon.js 为同一生态。
GranimJs granimjs 用于创建流体和交互式渐变的动画js库,仅17k。
canvas-confetti confetti 轻量的js canvas礼花特效库。

1.4.9 移动端手势

地址 标签 说明
AlloyFinger.js AlloyFinger 增加移动端的各种手势事件。
hammer.js hammerjs 手势封装库,取消了移动端click的300ms延迟。
interact.js interactjs 使用JavaScript实现拖放、缩放和多点触控手势。
Pointer Events pointer-events 浏览器原生指针事件体系,现代触摸/鼠标/笔交互优先参考。

1.4.10 加载

地址 标签 说明
aload.js aload.js 历史参考:早期异步图片/js/css 加载工具,现代项目优先原生 lazy loading、IntersectionObserver、lazysizes 或框架级资源加载能力。
layzr.js layzr.js 历史参考:早期图片懒加载库,现代项目优先原生 loading="lazy"、IntersectionObserver 或 lazysizes。
lazysizes.js lazysizes 高性能的图片/iframe懒加载工具。
Lazy loading native-lazy-loading 浏览器原生懒加载与性能优化资料,现代图片/iframe 懒加载优先参考。
infinite-scroll.js infinite-scroll “无限”滚动的加载插件。

1.4.11 TypeScript辅助

地址 标签 说明
ts-loader ts-loader webpack中的TypeScript构建插件。
awesome-typescript-loader awesome-typescript-loader 历史参考:Webpack 时代的 TypeScript loader,现代项目通常优先 ts-loader、SWC、esbuild、Rspack 或 Vite。
ts-transformer-keys ts-transformer-keys 用于提取interface的键值数组(需要用webpack)。
ts-dedent ts-dedent node端打印正常换行的log。
suppress-ts-error suppress-ts-error 自动为项目中所有的类型报错添加 @ts-expect-error 或 @ts-ignore 注释。
type-fest type-fest 经典的工具类型封装库。
TypeChat typechat 基于OpenAi GPT模型的ts类型生产工具,微软。
ts-extras ts-extras TypeScript/JavaScript 实用类型和运行时辅助工具。
ts-toolbelt ts-toolbelt TypeScript 高级工具类型集合,适合复杂类型编程参考。

1.4.12 其他

地址 标签 说明
js-framework-benchmark js-framework-benchmark 基于chrome的各前端框架性能对比,有个分析站点。
Angular angular 封装度高的经典前端框架。
Svelte svelte 无虚拟DOM的轻量Web应用编译器,template,近期火。
SolidJs solid 对webComponent友好的库,开发体验与react相似,国外这几年较火。
Stenciljs stenciljs webComponent的编译构建框架,jsx。
Infernojs infernojs 轻量的类React库,jsx。
Emberjs emberjs 脚手架强大的web开发框架,template。
Vuera vuera 用来混用Vue/React组件的库、即Vue中可以使用React组件、React中可以使用Vue组件。
Veaury veaury Vue3/React 组件混用工具;主条目也可参考 Vue 分类中的 Veaury。
Quark quark 基于 Web Components 的移动端跨框架 UI 组件库,哈啰。
Astro astro 现代静态站点生成器,支持多框架组件,零JS运行时。
Qwik qwik 可恢复的web框架,零水合,即时加载。
Fresh fresh 基于Deno的全栈web框架,零配置,边缘优先。
Remix remix 专注于web标准和现代UX的全栈web框架。
SvelteKit sveltekit Svelte的全栈应用框架,类似Next.js。
Alpine.js alpinejs 轻量级的声明式框架,类似Vue的语法。
Lit lit 构建Web Components的简单库,Google。
Partytown partytown 将第三方脚本迁移到web worker的库。
Web3js web3js 以太坊标准js封装库。
Vite vite 现代前端构建工具,适用于 Vue/React/Svelte/Solid 等生态。
Rspack rspack 基于 Rust 的高性能打包工具,兼容 webpack 生态。
Rsbuild rsbuild 基于 Rspack 的上层构建工具,适合应用和库工程化。

1.5 Vue

地址 标签 说明
Vue3 文档 vue Vue3 官方文档。
Vue2 文档 vue2 存量维护:Vue2 老项目维护参考;新项目优先 Vue3。
vue-cli 文档 vue-cli 存量维护:Vue CLI 老项目脚手架工具,新项目优先 create-vue + Vite。
pinia 文档 pinia 轻量Vue状态管理工具,vue3推荐。
create-vue create-vue Vue 官方项目脚手架入口,现代 Vue 新项目推荐。
vuex 文档 vuex 存量维护:Vue2/旧项目常见状态管理;Vue3 新项目优先 Pinia。
vue-router 文档 vue-router 基于vue的前端路由控制。
vue-content-loader 文档 create-vue-content-loader vue版SVG骨架屏插件。
better-scroll 文档 better-scroll 控制滚动场景的插件。
vant 文档 vant 移动UI库,有赞。
vue-weui 文档 vue-weui weui风格的移动UI组件库。
Element 文档 element 存量维护:Vue2 中后台 UI 组件库;Vue3 项目建议使用 Element Plus。
Element Plus element-plus Vue3 中后台 UI 组件库,Element UI 的现代替代。
Naive UI naive-ui Vue3 组件库,主题和 TypeScript 支持较好。
Arco Design Vue arco-vue 字节系企业级 Vue 组件库。
TDesign Vue Next tdesign-vue-next 腾讯系 Vue3 组件库。
vue-lazyload 文档 vue-lazyload vue版的图片/组件懒加载插件。
iView 文档 iview 存量维护:Vue2 老中后台项目常见 UI 组件库。
antd-vue 文档 antd-vue PC UI组件库,ant design的Vue版。
vue-i18n 文档 vue-i18n 多语言解决方案。
v-region 文档 v-region Vue行政区选择组件。
vue-echarts 文档 vue-echarts Echarts的Vue封装组件。
Nuxt.JS 文档 nuxtjs Vue 的全栈/服务端渲染应用框架,现代 Nuxt 项目官方入口。
ViteJS 文档 vitejs 现代前端构建工具,Vue/React/Svelte 等生态都广泛使用;主条目建议放在构建工具分类。
vue-class-component 仓库 vue-class-component 存量维护:Vue Class API/装饰器写法工具;Vue3 新项目优先 Composition API。
Formily 文档 formilyjs Element/Antd的表单DSL解决方案。
vue-2-3 vue-2-3 vue2和vue3共存的一种解决方案封装。
SWRV swrv 用于数据请求的 Vue 钩子库,处理了请求缓存、状态等等。
Vue Request vue-request 用于数据请求的 Vue 钩子库,比swrv能力要稍微丰富一些。
VueUse vueuse 基于 Vue Composition API 的高频实用工具集,覆盖浏览器、状态、动画、传感器等场景。
TanStack Query Vue tanstack-query-vue Vue 生态的服务端状态管理方案。
Nuxt UI nuxt-ui Nuxt/Vue 生态 UI 组件库。
Vue React Combined vuereact-combined Vue2和React快捷集合的工具包。
Veaury veaury Vue3 和 React 组件混用工具;与 1.4.12 的 Veaury 为同一工具。

1.6 React

地址 标签 说明
React 文档 react React 官方新文档入口,适合学习现代 React、Hooks 和 API。
React 中文文档 react React 中文翻译文档。
create-react-app 文档 create-react-app 历史参考:React 老脚手架,新项目不建议优先使用;可考虑 Vite、Next.js、Remix/React Router、Rsbuild。
react Chrome devtools react-devtools react的Chrome开发拓展插件。
react-router react-router React 路由控制库,官方文档入口。
Zustand 文档 zustand 火热的简单轻量数据流控制工具。
Recoil 文档 recoil 历史参考:React 状态管理方案之一,不建议新项目优先采用;可参考 Zustand、Jotai、Redux Toolkit。
Redux Toolkit 文档 redux-toolkit Redux 官方现代推荐写法,适合复杂 React 状态管理。
flux 文档 flux 历史参考:React 数据流思想早期资料,现代项目通常使用 Redux Toolkit/Zustand/Jotai 等。
mobx 文档 mobx 轻量数据流控制工具。
dvajs 文档 dvajs 存量维护:Ant/Umi 老项目常见的数据流方案,新项目可优先直接使用 Umi/Redux Toolkit/TanStack Query。
UmiJs 文档 umijs 可插拔的企业级 react 应用框架,蚂蚁。
Rekit 文档 rekit React/Redux/React-router开发工具/IDE。
NextJs 文档 nextjs 轻量级的 React 服务端渲染应用框架。
Gatsby.js 文档 gatsbyjs 轻量级的 React 静态网站搭建框架。
React-use 文档 react-use 好用的React自定义hooks封装库。
React Hook Form react-hook-form 高性能、轻量的 React 表单管理库。
Jotai jotai React 原子化状态管理库。
Valtio valtio 基于 Proxy 的 React 状态管理库。
ahooks 文档 ahooks React Hooks 工具库,适用于请求、防抖、拖拽、生命周期、DOM 等中后台场景。
TanStack Query tanstack-query 服务端状态/异步状态管理库,支持请求缓存、重试、失效、分页和乐观更新。
why-did-you-render why-did-you-render 用来检测React组件是否需要重新渲染的工具。
Motion 官网 motion 原 Framer Motion,强大的 React/JS 动画与交互手势库。
react-content-loader 文档 create-content-loader react版SVG骨架屏插件。
shadcn-ui 文档 shadcn shadcn,原子、灵活的UI组件库。
Radix UI radix-ui Headless UI 基础组件库,shadcn/ui 等生态常用底层能力。
React Aria react-aria Adobe 的无障碍 React 行为/组件基础能力。
antd 文档 antd ant design,PC UI组件库。
antd-mobile 文档 antd-mobile 移动版的antd,UI组件库。
styled-components 文档 styled-components react的css-in-js实现。
goober 文档 goober 只有1kb大小的css-in-js库。
chatUI chatui.io 服务于对话领域的解决方案(前端组件),阿里。
Ant Design X ant-design-x 服务于对话领域的解决方案(前端组件),蚂蚁。
react-lazyload 文档 react-lazyload react版的图片/组件加载插件。
react-loadable react-loadable 历史参考:React 组件代码分割方案,现代项目优先 React.lazy/Suspense 或框架级 dynamic import。
react-draggable react-draggable 一个用于拖拽操作的React封装组件。
React DND react-dnd 适用于React的复杂拖拽控制库,基于HTML5拖放API。
react-tappable react-tappable 历史参考:早期 React 点击/触摸事件封装,现代移动端交互可参考 Pointer Events 或手势库。
React-portal react-portal 一个通过portals定义附加的节点组件渲染工具。
React-contextmenu react-contextmenu pc端web实现右键菜单的工具组件。
react-markdown react-markdown 在react上使用的markdown工具。
30s-of-react 30s-of-react 常用React代码模块集合,30s of code系列。
React Bits react-bits 常用React技巧。
docsiteJS docsite 基于React的文档生成工具。
React Color react-color 基于React的拾色器插件,模拟Sketch, Photoshop, Chrome等取色工具,注意可以直接用于Preact。
React Desktop react-desktop 模拟Mac或windows桌面交互的React封装组件。
React Boilerplate react-boilerplate 性能优先的一个典型的React项目模板。
React RTE react-rte 历史参考:基于 DraftJS 的富文本编辑器,现代富文本可参考 Lexical、Tiptap、ProseMirror。
React i18Next react-i18next 多语言解决方案。
SWR swr 用于数据请求的 React Hooks 库,处理了请求缓存、状态等等。
Formik formik 高度封装、开箱即用的 React form 表单封装库。
TanStack Router tanstack-router 类型安全的 React 路由方案。
TanStack Form tanstack-form TanStack 生态的表单状态管理方案。
Lexical lexical Meta 开源富文本编辑器框架。
Tiptap tiptap 基于 ProseMirror 的现代富文本编辑器框架。

1.6.1 Nextjs

地址 标签 说明
Next i18next next-i18next 用于在Nextjs中处理国际化多语言的库。
Auth.js / NextAuth.js authjs/next-auth Web/Next.js 身份认证方案,NextAuth.js 已演进到 Auth.js 体系,支持 OAuth、JWT、数据库等。
NextSEO next-seo 专为 Next.js 设计的 SEO 工具,支持动态元标签管理和结构化数据生成。
next-intl i18n 更现代的国际化方案,支持 App Router 和 Pages Router,内置 SSR 多语言加载。
HeroUI heroui 原 NextUI,现代 React UI 组件库,支持主题和无障碍能力。
@next/mdx mdx 官方 MDX 支持库,可在页面中直接混合 Markdown 和 React 组件。
next-redux-wrapper state-management Redux 与 Next.js 的桥梁库,自动处理 SSR 场景的 store 同步。
@next/plugin-injection security 官方安全插件,自动注入 CSP 等安全头(需 Next.js 13.4+)。
Metadata API seo Next.js 13+ 原生 SEO 方案,替代部分 next-seo 的功能。
next-og seo 动态生成 Open Graph 图片,支持 Edge Runtime。
Next.js App Router next-app-router Next.js 当前主线应用路由文档。
Server Actions server-actions Next.js/React 服务端动作能力,适合表单提交和服务端变更。
next-safe-action next-safe-action Next.js Server Actions 的类型安全封装。

1.7 NodeJS和构建

地址 标签 说明
Node.js best practices list nodebestpractices NodeJS最佳实践集合。
npm npm node包统一平台。
yarn yarn Node 包管理器,适合多项目依赖管理。
pnpm pnpm 快速、节省磁盘空间的 Node 包管理器,monorepo 场景常用。
n n 极度简单的 NodeJS 版本管理工具。
StoryBook storybookjs 用于独立开发React、Vue和Angular的UI组件库导航站点。
unpkg unpkg 国外公共静态资源CDN,适用于 npm 上的所有内容。
NodeJS api node Node.js 官方 API 文档;中文站可作为辅助参考。
Deno docs deno Deno 官方文档,现代 JavaScript/TypeScript 运行时。
Bun bun JavaScript/TypeScript runtime、package manager、bundler 和 test runner。
TurboRepo turborepo 好用的、高性能的多包管理工具,monorepo。
Lerna lerna 好用的多包管理工具,monorepo。
patch-package patch-package 给node_modules打补丁的工具包。
V8 dev docs V8 js V8引擎文档。
V8 v8 V8 引擎文档入口;旧 Node 10.6 版本资料仅作历史参考。
QuickJs quickjs 一款轻量级js引擎。
jsvu jsvu js引擎调试必备,引擎切换及版本控制。
docker docker 应用容器引擎Docker。
Linux linux Linux命令查询手册。
GraphicsMagick gm 存量维护:Node 侧 GraphicsMagick 封装;现代图片处理通常优先 Sharp/ImageMagick。
SheetJS / js-xlsx sheetjs/xlsx xlsx 的编辑和处理库,处理表格文件导入导出。
ShellJs shelljs 用NodeJS实现shell常用命令。
chalk chalk 控制台命令行输出样式工具,主要控制颜色。
node-schedule node-schedule 适用于NodeJS的定时任务工具。
source-map-support source-map-support 在 NodeJS 环境下支持 SourceMap 的模块工具。
yalc yalc npm link 的有效替代品,使用真实的 npm package 代替各种 link。
Corepack corepack Node 内置包管理器版本分发控制工具,可管理 pnpm/yarn 版本。
Volta volta Node/Yarn/npm 工具链版本管理工具。
fnm fnm 快速 Node.js 版本管理工具。
Nx nx Monorepo 构建系统和任务编排工具。
Changesets changesets 多包仓库版本管理和 changelog 生成工具。

1.7.1 构建

地址 标签 说明
Prettier prettier 对代码无侵害的代码格式化工具。
ejs ejs 简单上手的html模板引擎。
Mustache mustache 适用于多语言的html模板库。
pug pug html模板库。
jade jade 历史参考:Pug 前身,老模板项目维护时可能遇到。
gulp 配置文档 gulp 存量维护:老项目常见自动化构建工具,现代项目优先 Vite/Rollup/Rspack/esbuild。
gulp plugins gulp gulp插件中心。
grunt 配置文档 grunt 历史参考:早期自动化构建工具,主要用于老项目维护。
rollupjs文档 Rollup ES 模块打包工具,库构建和工具链生态中常用。
webpack 配置文档 webpack 应用面不能再广的打包工具。
webpack-chain webpack-chain 链式配置webpack配置的工具。
Turbopack turbopack 基于 Rust 的高性能打包工具,主要服务 Next.js 生态。
parceljs 配置文档 parceljs 零配置/轻配置打包工具。
snowpack 官网 snowpack 历史参考:无 bundle 构建阶段性工具,现代项目通常优先 Vite。
swc swc 用Rust写的、号称比babel快20倍且支持其所有功能的ts/js编译器。
babel babel 应用面很广的 JavaScript 编译器。
htmlparser2 htmlparser2 一款html的转AST工具。
parse5 parse5 一款html的转AST工具。
recast recast 一款js转AST的工具。
ts-migrate ts-migrate 一款js转ts(TypeScript)的工具。
Concurrently concurrently 一款NodeJS的命名行控制工具,实现同时运行多条命令。
esbuild esbuild 一款极快的js打包和压缩工具。
critical critical 一款从HTML中提取相关CSS的工具。
ModernJS modernjs web前端工程化体系工具,字节跳动。
javascript-obfuscator obfuscator js代码混淆插件。
tsup tsup 基于 esbuild 的 TypeScript 库构建工具。
unbuild unbuild UnJS 生态的库构建工具。
tsdown tsdown 面向 TypeScript 库的新一代构建工具。
Biome biome 现代 Web formatter/linter 工具链,可用于替代部分 Prettier/ESLint 场景。

1.7.2 服务端

地址 标签 说明
express 配置文档 express 轻量web应用程序开发框架。
Koa 文档 koajs web应用程序开发框架。
Fastify 官网 fastify 标称当代最快的轻量web应用程序开发框架,重点是JSON schema加速。
Midway 官网 midway 支持了 Web / 全栈 / 微服务 / RPC / Socket / Serverless 的 web 应用程序开发框架,阿里淘系。
feathers.js feathersjs 轻量web应用程序开发框架,适用于数据流型。
Nest.js nestjs 强大的Web应用框架。
Hono hono Web 标准优先的轻量服务端框架,适合 BFF、边缘函数和 API 服务。
Nitro nitro Nuxt/UnJS 生态服务端引擎,适合全栈和边缘部署。
Elysia elysia Bun 生态高性能服务端框架。
Mockjs 配置文档 mockjs 接口数据模拟工具,可以在客户端和服务端使用。
SheetJs sheetjs 通过 Node/浏览器处理 xlsx/csv 等电子表格文件的工具。
Prisma prisma TypeScript ORM 和数据库工具链。
Drizzle ORM drizzle TypeScript-first ORM,类型安全和 SQL 友好。
tRPC trpc 端到端类型安全 API/RPC 框架。
ts-rest ts-rest 基于契约的类型安全 REST API 工具。
ParallelJs paralleljs 并行处理js的工具,可用于浏览器和node服务端。
js-pdf js-pdf 通过node操作生成pdf的工具。
pm2 pm2 node进程管理。
node-worker-farm node-worker-farm 很常用的 Node.js 多进程计算库。
colors.js colorsjs node log控制台输出颜色控制。
log4.js log4js log日志工具。
nw.js nwjs 基于NodeJS和chromium的应用程序运行环境,允许您直接从DOM调用所有Node.js模块。
node-archiver node-archiver 支持ZIP/TAR文档流传输和接收插件。
yazl yazl 压缩zip插件,对应解压为yauzl
SailsJs sailsjs 好用的MVC NodeJS框架。
Helmet中间件 helmet 通过设置响应头header保护express服务应用。
Cors中间件 cors NodeJS的Cors中间件。
Body-parser中间件 body-parser NodeJS的请求流解析中间件。
Restify restify NodeJS的Web服务框架。
Multer multer 用于处理上传文件的NodeJS中间件。
Node-cache node-cache 一个NodeJS的缓存控制模块。
Socket.IO socket.io WebSocket解决方案。
ioredis ioredis redis调用js封装库。
ws ws WebSocket的一个NodeJS包。
nginxconfig.io nginxconfig.io 在线生成nginx配置的工具。
fast-safe-stringify fast-safe-stringify 安全快速地序列化JSON,替代JSON.stringify。
NodeMailer node-mailer 用来发邮件的库、支持SMTP/SES/Sendmail/Stream方式。

1.7.3 GraphQL

地址 标签 说明
Graphql-js graphql GraphQL的js实现。
hasura graphql-engine hasura 一款强大的GraphQL引擎方案。
apollo-client apollo-client 适用于每个UI框架和GraphQL服务器的方案。

1.7.4 微前端

地址 标签 说明
single-spa single-spa 以路由配置为主要特点的微前端解决方案。
qiankun qiankun 蚂蚁系微前端框架,基于single-spa。
Module Federation module-federation 构建时共享模块为主要特点的微前端解决方案,webpack(5)的实现。
R/Fronts fronts 渐进式微前端框架,基于webpack module-federation。
无界Wujie wujie 基于web component+iframe的微前端框架,腾讯。
jsdom jsdom 在node环境上实现DOM操作的封装库。

1.7.5 云和Serverless

地址 标签 说明
WasmEdge 官网 wasmedge 一款与WebAssembly有关的云原生及serverless框架。
Serverless Framework 官网 serverless 快速建立node Serverless 服务的框架,支持腾讯云 SCF,AWS Lambda等。
AWS Lambda aws-lambda 经典,亚马逊amazon serverless计算服务。
字节轻服务 官网 qingfuwu 字节轻服务,支持Serverless(FaaS)、CDN等服务,有免费档。
阿里云 FC aliyunFC 阿里云函数计算服务,支持Serverless(FaaS)。
腾讯云 SFC tecentFC 腾讯云云函数服务,支持Serverless(FaaS)。

1.7.6 低代码LowCode

地址 标签 说明
lowcode-engine lowcode-engine 阿里开源低代码引擎。
微搭 weda 腾讯低代码引擎,微搭。
amis amis 百度开源低代码引擎,适用于偏中后台项目。
TinyEngine tiny-engine 华为2023开源低代码引擎,具备图元编排能力。
Tango tango 网易云音乐2023开源低代码引擎,不受私有 DSL 和协议限制。
Shuffle shuffle 海外火热的低代码平台。
Webflow webflow 海外火热的低代码平台。

1.8 Hybird和跨端

地址 标签 说明
pwa pwa Progressive web apps,渐进式web应用。
微信小程序官网 小程序/hybird 微信小程序开发官网。
支付宝小程序官网 小程序/hybird 支付宝小程序开发官网。
百度小程序官网 小程序/hybird 百度小程序开发官网。
wepy文档 小程序/hybird vue语法的小程序开发官网。
小程序工具集合 小程序/hybird 微信小程序开发工具集合。
小米轻应用官网 轻应用/hybird 小米轻应用开发官网。
Oppo/vivo快应用官网 轻应用/hybird Oppo/vivo轻应用开发官网。
华为快应用官网 轻应用/hybird 华为轻应用开发官网。
React-native 文档 跨端 热门的react语法跨端工具,RN。
Lynx 文档 跨端 字节的iOS/Android/鸿蒙/Web跨端框架。
NativeScript 跨端 国外一款流行的跨端开发框架,支持Angular/Vue/Svelte/React。
ionic-framework 跨端 一个强大的跨平台UI工具包,用于使用HTML,CSS和JavaScript构建本机质量的iOS,Android和PWA。
quasar-framework 跨端 构建一流的高性能的Vue响应式网站、PWA、SSR、移动和桌面应用
Weex文档 跨端 前几年热门的vue语法跨端工具,现在都不维护了。
Weex-UI文档 跨端/weex weex的UI组件库。
Taro文档 小程序/跨端 跨web/小程序/原生的react语法跨端工具,runtime跨端模式。
Rax文档 小程序/跨端/Flutter 跨web/小程序/Flutter的react语法跨端工具(已经沉寂了),阿里。
Kbone文档 小程序/跨端 跨web/小程序跨端构建插件,成本低,适配各类web框架,腾讯。
Hippy文档 跨端 腾讯的一款混合跨端框架。
uni-app文档 小程序/跨端 跨web/小程序/原生的vue语法跨端工具。
北海Kraken Kraken 高性能 Web 渲染引擎,基于 Flutter 构建,可以用web范式写法写Flutter,阿里。
Remax文档 remax React语法跨web/小程序工具,类似于taro-next(3)的跨端模式,对小程序友好,支付宝。
Antmove antmove 小程序转换器,基于支付宝/微信小程序转换为多端小程序,高德。
Flutter文档 跨端 超火的Dart语法的跨端开发工具。
Electron文档 跨端 PC、windows/Mac应用的开发框架。
WebView2文档 跨端 PC、windows应用的开发框架,微软。
Tauri文档 Tauri Rust 编写的、基于web的 windows/Mac 应用的开发框架。
Pake pake 基于Rust Tauri 框架、 打包网页生成很小的桌面 App的脚手架工具,支持 Mac / Windows / Linux 系统。
flyio(fly)文档 fly 支持Web、Node.js 、微信小程序 、Weex 、React Native 、Quick App的请求封装库。
wxParse wxParse 微信小程序富文本解析组件,支持Html及markdown转wxml可视化(但是目前已停止维护)。
chrome extension chrome-extension Chrome拓展程序官方文档。
chrome-plugin-demo chrome-plugin, chrome-extension 一篇很好的Chrome拓展程序开发教程,有demo。

1.9 辅助工具

地址 标签 说明
chatGPT chatGPT 基于OpenAI的问答机器人,用来查技术问题也挺好。
Cursor cursor 依旧火热的AI Coding IDE产品。
stackoverflow.com stackoverflow 技术问题排忧解难的友好社区。
bundlephobia.com bundlephobia 分析npm软件包的体积和加载性能的网站。
npmgraph npmgraph 分析npm软件包依赖关系的工具网站。
Ts声明文件查询 joi 各类库的TypeScript声明文件查询网站。
正则表达式30分钟 regexp 正则上手教程。
在线正则验证 regexper 可视化在线正则验证网站。
cyrilex cyrilex 一个在线可视化的正则表达式测试工具和调试器。
whistle whistle web调试代理工具。
AST explorer astexplorer css/html/js/ts等语言的在线ast解析工具。
husky Husky NodeJS上的git工具。
eslint 文档 eslint js代码检查工具。
visualgo Visualgo 可视化算法查询。
visualgo Visualgo 可视化算法查询。
动画曲线查询 cubic 动画曲线查询网站(ease/linear...)
Character Entity Reference Chart charref 字符标点的转义字符查询。
gradient-editor gradient-editor CSS渐变样式生成工具。
valineJS valine 评论系统工具。
GitTalk gittalk github的评论工具。
CodeMirror codemirror web代码文本编辑器,带有大量的语言模式和插件功能。
webIDE webide web上写代码。
Fusuma fusuma 用markdown写web ppt。
stackedit stackedit 在浏览器中运行的Markdown编辑器。
VuePress vuepress 用markdown写文档/博客
VitePress vitepress 用markdown写文档/博客,VuePress小兄弟,用vite构建
Hexo hexo 用markdown写文档/博客
dumi dumi 适合写前端开发文档的工具,markdown,蚂蚁
jsdoc jsdoc 最经典的js代码注释生成文档的工具
jsdoc-to-markdown jsdoc-to-markdown js注释(jsdoc格式)生成markdown文档
materialui materialui 快速色值选择
carbon carbon 生成写博客时代码的美腻截图
tinypng Tinypng 压缩png和jpeg图片
svgo svgo 压缩SVG图形文件工具
ImageOptim imageoptim macOS 图片压缩优化工具。
Squoosh squoosh-app GoogleChromeLabs 出品的在线图片压缩/格式转换工具。
svgomg SVGOMG 压缩SVG图形
ImageMagick imagemagick 后台运用极广的图片处理工具。
img2css img2css 一个有趣的库,利用box-shadow将图片以CSS的方式呈现。
whatfontis.com whatfontis 识别图片上的字体不过限于英文字体,需要注册。
keycode keycode 一个输入按键并获取其对应js keyCode的在线网站。
ps.gaoding.com ps 强大的在线Photoshop。
convert-psd-to-sketch avocode avocode psd一键转sketch。
svgomg svgomg 在线svg优化及预览。
code2flow code2flow 在线伪码转流程图工具。
tool.lu-json json 在线json格式化工具。
tool.lu-js js 在线js格式化/混淆/压缩工具。
tool.lu-css css 在线css格式化/压缩/响应式单位处理工具。
tool.lu-coderunner coderunner 在线php/c/c++/python/go/js/java/bash代码执行工具。
diffchecker.com diffchecker 在线文本/文件diff工具。
isoflow.io isoflow 在线流程图绘制工具。
n8n n8n 基于自由和开放的公平代码许可节点的工作流自动化工具。轻松自动化跨不同服务的任务。
阿里云 DNS检测 dns 域名DNS检测网站工具,阿里云。
Railroad Diagrams railroad-diagrams 在线绘制铁路图的网站工具。
CodeIf codeIf 帮助解决命名困难的命名搜索工具。
QuickType QuickType 根据 json 文本生成指定语言(如 TypeScript,C++,,Java,C#,Go 等)类型声明代码的工具网站。
Hoppscotch hoppscotch 开源 API 调试工具,可作为 Postman 类工具的轻量替代。
Bruno bruno Git 友好的开源 API 客户端。
VitePress vitepress Vite 驱动的静态文档站生成器,适合技术文档。
Docusaurus docusaurus React 生态文档站框架,适合产品/技术文档。
中国独立开发者项目列表 chinese-independent-developer 聚合中国独立开发者的项目。

1.10 测试、安全及加密

1.10.1 单元测试

地址 标签 说明
Vitest vitest Vite 原生测试框架(单测新主流之一)
MochaJS文档 mocha 一款单元测试工具。
JestJS文档 jest 一款单元测试工具,主流。
Cypress官网 cypress 一款单元测试集成平台工具。
AvaJs avajs 一款快速的测试工具。
karma karma 历史参考:老 JavaScript 测试执行器,现代项目优先 Vitest/Jest/Playwright。
enzyme官网 enzyme 历史参考:React 老测试方案,现代 React 测试优先 Testing Library。
gremlins.js gremlins 一款node及浏览器的Monkey Test工具。
uptime-kuma uptime-kuma 一款开源的、基于puppeteer的指标监控平台。
Playwright playwright 较新颖的e2e测试工具,支持Chrome、firefox等主流浏览器。
Testing Library testing-library 以用户行为为中心的测试工具集合,React/Vue/DOM 测试常用。
MSW msw Mock Service Worker,前端接口 Mock 和测试隔离常用。
Chromatic chromatic Storybook 生态的视觉回归测试和组件评审平台。
k6 k6 性能压测工具。
Lighthouse CI lighthouse-ci Lighthouse 性能/质量检测的 CI 门禁工具。

1.10.2 安全及加密知识

地址 标签 说明
CryptoJS crypto-js 常见 JavaScript 加密/哈希库;浏览器现代加密场景优先了解 Web Crypto API,业务安全不能只依赖前端加密。
js-sha256 js-sha256 一个用于 SHA256 哈希运算的轻量级库。
Bcrypt bcrypt 用于密码散列处理的库。
OSSF Scorecard ossf-scorecard 开源项目供应链安全评分/检查(依赖治理很实用)
OWASP Cheat Sheet Series owasp-cheatsheet 安全知识速查表(体系化参考)
Snyk CLI snyk 依赖漏洞/供应链扫描(工程落地常用)
OWASP Top 10 owasp-top10 Web 安全基础风险清单。
OSV Scanner osv-scanner 开源漏洞数据库 OSV 的依赖漏洞扫描工具。
Semgrep semgrep 静态代码安全扫描工具。
CodeQL codeql GitHub 生态代码安全分析工具。
Trivy trivy 容器、依赖、IaC 等安全扫描工具。
Web Crypto API web-crypto 浏览器原生加密 API。

《How to Secure Anything》

crypto-js 前端数据加密工具(与上方 CryptoJS 为同一生态,作为文章/资料入口保留)

《浅谈前端安全》

《再谈前端安全》

《8大前端安全问题》

《前端加密那点事》

《HTTPS 到底加密了什么?》

《Web 端反爬虫技术方案》

《那些我们该讨论的前端加密方法》

1.10.3 Debug

地址 标签 说明
vConsole vconsole 被誉为移动端的web开发者工具,腾讯。
Eruda eruda 类似vConsole的移动端web调试工具,相对轻量。
FunDebug FunDebug 简单的项目debug监控工具,有免费版
Webfunny webfunny_monitor 统一的前端异常监控解决方案。
json-server json-server 一款通过本地起服务的快速mock工具。
Page Spy page-spy 一款集程度较高的远程web调试工具,货拉拉技术团队。

1.10.4 质量检测

地址 标签 说明
JSLint js代码检查 jslint 历史参考:早期 JavaScript 验证工具,现代项目优先 ESLint/typescript-eslint/Biome。
JSHint js代码检查 jshint 历史参考:早期 JavaScript 代码检查工具,现代项目优先 ESLint/typescript-eslint/Biome。
ESLint js代码检查 eslint 一个JavaScript验证工具
CSSLint css代码检查 csslint 历史参考:早期 CSS 检查工具,现代项目优先 Stylelint/Biome。
Markup Validation Service validator 在线HTML验证网站
Flow js代码检查 flow 历史/专项参考:JavaScript 静态类型检查工具,现代前端主流通常优先 TypeScript。
SonarLint vscode sonarlint js/ts工程代码质量验证的vscode插件
Google eng-practices eng-practices 谷歌工程实践文档
Cheerio cheerio 用于web抓取的工具。
Puppeteer官网 puppeteer 基于chromium的无头浏览器,可用于爬虫等web自动化。
Selenium官网 selenium 强大的用于Web应用程序测试的工具。
Lighthouse lighthouse Google标准的web性能检测工具,Chrome自带。
Fuite fuite web内存检测工具,基于puppeteer。
xray xray 一款完善的安全评估工具,支持常见 web 安全问题扫描和自定义 poc,不过不开源。
typescript-eslint typescript-eslint TypeScript 项目的 ESLint 解析器和规则集。
Oxlint / Oxc oxlint 高性能 JavaScript/TypeScript lint 工具链。
Knip knip 检测未使用文件、依赖和导出的工具。
size-limit size-limit 包体积检测和 CI 门禁工具。
Bundle size 工具集合 bundle-size 构建产物体积分析/门禁参考。

1.11 AI人工智能库

1.11.1 大语言模型与 Agent 应用框架

地址 标签 说明
AI SDK ai-sdk Vercel 出品的 TypeScript AI SDK,适合构建流式对话、AI UI、工具调用和多模型应用
OpenAI Agents SDK JS/TS openai-agents-js OpenAI 官方 JavaScript/TypeScript Agent SDK,适合轻量多 Agent、handoff、tool calling、tracing
OpenAI Agents SDK Python openai-agents-python OpenAI 官方 Python Agent SDK,适合多 Agent 工作流、工具调用、评测和追踪
LangChain langchain LLM 应用开发框架,生态完整,但复杂 Agent 编排建议配合 LangGraph 使用
LangGraph langgraph 当前主流的有状态、可恢复、长期运行 Agent 工作流框架
LlamaIndex llamaindex 数据/RAG 取向的 LLM 应用框架,适合知识库、文档问答、检索增强生成
Semantic Kernel semantic-kernel 微软开源 AI 编排 SDK,适合企业级 .NET/Python/Java 场景
AutoGen autogen 微软多 Agent 对话与工作流框架,适合研究和复杂协作型 Agent
CrewAI crewai 以角色、任务、团队协作为核心的多 Agent 框架,工程落地较活跃
Google ADK google-adk Google 开源 Agent Development Kit,偏 code-first 的 Agent 开发、评估和部署
Mastra mastra TypeScript 原生 Agent 框架,覆盖 Agent、workflow、RAG、memory、observability
Agno agno 原 Phidata 方向演进,面向生产 Agent 平台,强调 tracing、scheduling、RBAC、控制面
Strands Agents strands-agents AWS 相关生态的开源 Agent SDK,支持 Python/TypeScript,偏生产级 Agent 构建
Pydantic AI pydantic-ai Pydantic 生态下的 Python Agent 框架,强调类型安全、结构化输出和工程可靠性
smolagents smolagents Hugging Face 极简 Agent 库,抽象少,适合快速实验和代码式行动
CAMEL camel 多 Agent 研究/工程框架,适合角色扮演、社会模拟、协作任务和数据生成
AgentScope agentscope 面向多 Agent 应用的工程框架,适合分布式、多角色、复杂 Agent 系统
DSPy dspy “编程而非手写 Prompt”的 LLM 应用框架,适合可优化的 RAG、分类、Agent 流程

1.11.2 模型 API SDK 与模型路由

地址 标签 说明
OpenAI NodeJS SDK openai-node OpenAI 官方 Node.js/TypeScript SDK
OpenAI Python SDK openai-python OpenAI 官方 Python SDK
Anthropic SDK TypeScript anthropic-sdk-ts Anthropic Claude API 的 TypeScript/JavaScript SDK
Anthropic SDK Python anthropic-sdk-python Anthropic Claude API 的 Python SDK
Google Gen AI SDK JS google-genai-js Google Gemini/Gen AI 新版 JavaScript SDK
Google Gen AI SDK Python google-genai-python Google Gemini/Gen AI 新版 Python SDK
Cohere SDK cohere Cohere API 的 TypeScript SDK
Mistral AI SDK mistral Mistral AI API 的 JavaScript SDK
Replicate SDK replicate Replicate API 的 JavaScript SDK
LiteLLM litellm 多模型统一调用代理/网关,适合做企业内部模型路由、成本统计、限流和兼容 OpenAI API
Portkey Gateway portkey-gateway 开源 AI Gateway,支持多模型路由、fallback、日志、治理
Helicone helicone 开源 LLM observability / gateway,适合请求日志、成本、缓存和监控
LlamaIndex TS llamaindex-ts LlamaIndex 的 TypeScript 版本,适合 JS/TS RAG 应用

1.11.3 Agent 任务管理与人机协作平台

地址 标签 说明
Multica multica 面向“人 + 编码 Agent 团队”的任务协作平台,可分配任务、跟踪进度、管理 Agent workforce
Multica Open Source multica-open Multica 开源仓库,适合研究 Agent 任务管理、runtime、技能复用和团队协作模式
Slock slock 人与 Agent 在频道/DM 中实时协作的平台,更偏“Agent Slack/团队沟通层”
Taskade taskade AI 工作空间,覆盖项目、任务、Agent、自动化、记忆和业务应用生成
ChatDev chatdev 多 Agent 软件公司模拟项目,可作为 Agent 协作流程研究参考
MetaGPT metagpt 从需求到 PRD、设计、任务、代码的多 Agent 软件开发框架
IoA ioa Internet of Agents,多 Agent 协作与通信研究方向
BullMQ bullmq Node.js 队列基础设施,可作为 Agent 任务调度/异步执行底座
Temporal temporal 可靠工作流引擎,适合长周期 Agent task、补偿、重试和可恢复执行

1.11.4 AI 编程开发工具

地址 标签 说明
Codex codex OpenAI 编码 Agent,支持 CLI/云端任务等开发工作流
Codex CLI codex-cli OpenAI Codex 命令行工具,适合本地仓库修改、代码生成、调试和任务执行
Claude Code claude-code Anthropic 出品的 AI 编程助手,适合本地代码库理解、生成、重构、调试
OpenCode opencode 开源终端 AI 编程助手,主打多模型/多 provider 可插拔
Gemini CLI gemini-cli Google Gemini CLI,开源命令行 AI 编程助手
OpenHands openhands 开源 AI 软件工程师/编码 Agent 运行时,适合自主修复、任务执行、沙箱运行
OpenHands SDK openhands-sdk 面向写代码类 Agent 的 SDK,可用于构建自定义 coding agent
SWE-agent swe-agent 面向 GitHub issue 修复和 SWE-bench 的开源编码 Agent
Aider aider 终端 AI pair programming 工具,适合 Git 工作流和小步提交
Cline cline 开源 VSCode Agent 插件,支持文件编辑、命令执行、浏览器等工具调用
Roo Code roo-code Cline 分支生态中活跃的 VSCode Agent 工具,支持多模式和复杂任务
Continue continue 开源 AI IDE 插件,支持 VSCode/JetBrains、多模型、本地模型和自定义上下文
Amp amp Sourcegraph 相关 AI coding agent/开发工具,适合关注代码库级 Agent 演进
Cursor cursor 主流 AI IDE,适合专业开发者进行代码生成、理解、重构和多文件修改
Windsurf windsurf 主流 AI IDE,强调 Agentic coding 和上手体验
Trae trae 字节系 AI IDE,适合观察国内 AI 编程产品形态
GitHub Copilot copilot GitHub 官方 AI 编程助手,已从补全扩展到 Agent/任务流
Bolt.new bolt 面向 Web 应用生成和部署的 AI Agent 平台
Bolt.new Open Source bolt-open Bolt.new 开源版本,适合研究浏览器内全栈生成与 WebContainer 工作流
v0 v0 Vercel 出品 UI/前端生成工具,适合 React、Next.js、shadcn 场景
Lovable lovable 面向产品原型到全栈应用生成的 AI 开发平台
awesome-cursorrules cursorrules Cursor 规则集合,可作为项目级 AI 编码规范参考
awesome-windsurfrules windsurfrules Windsurf 规则集合,可作为 Agent 规则治理参考

1.11.5 MCP 与工具生态

地址 标签 说明
Model Context Protocol mcp Anthropic 发起的开放协议,用于让 AI 应用连接外部数据源、工具和工作流
modelcontextprotocol GitHub mcp-github MCP 官方 GitHub 组织,包含规范、SDK、服务器等
Official MCP Registry mcp-registry 官方 MCP 注册表,适合发现公共 MCP server 元数据
Smithery smithery MCP server 发现、托管、连接与商业化平台
Glama MCP Servers glama-mcp MCP server 注册和检索平台,覆盖大量社区服务器
MCP.so mcp-so MCP 工具/服务器集合站
MCP Servers mcp-servers 官方/社区 MCP servers 集合入口
Playwright MCP playwright-mcp Microsoft 出品的浏览器自动化 MCP server,可让 LLM 通过结构化页面快照操作浏览器
Browserbase MCP Server browserbase-mcp Browserbase 的浏览器自动化 MCP server
Context7 context7 为 LLM/Agent 提供最新文档上下文的工具/MCP 生态项目
GitHub MCP Server github-mcp GitHub 官方 MCP server,用于仓库、issue、PR 等上下文和操作
Redis MCP Server redis-mcp Redis 官方 MCP server,适合数据访问和缓存场景
Postgres MCP postgres-mcp PostgreSQL MCP server,适合数据库查询和数据上下文接入

1.11.6 Agent Skills

地址 标签 说明
Skills.sh skills-sh Agent Skills 目录/浏览站,适合发现和安装 skill
LobeHub Skills lobehub-skills Agent Skills 市场,支持 Claude Code、Codex CLI、ChatGPT 等 SKILL.md 格式
SkillsLLM skillsllm 面向 Claude Code、Codex CLI、ChatGPT 的开源 Agent Skills 聚合站
AgentSkills.io agentskills-io Agent Skills 概念、规范、集成指南入口
Agent Skills Specification skills-spec SKILL.md 格式规范,定义 frontmatter、instructions、resources 等结构
agentskills/agentskills skills-spec-repo Agent Skills 规范与文档仓库
anthropics/skills anthropics-skills Anthropic 官方示例 skills 集合
vercel-labs/agent-skills vercel-agent-skills Vercel 官方 agent skills 集合
vercel-labs/skills skills-cli Skills CLI,可用于安装、发现、检查和更新 skills
softaworks/agent-toolkit agent-toolkit 社区高人气 skills 合集,覆盖开发流程、规划、文档、架构、沟通等

1.11.7 RAG、知识库与数据接入

地址 标签 说明
LlamaIndex llamaindex-rag RAG/数据索引核心框架,适合文档、数据库、知识库应用
LangChain RAG langchain-rag LangChain 的 retrieval、document loaders、text splitters、vector store 生态
Firecrawl firecrawl 将网站转换为 LLM 友好的 Markdown/结构化数据,适合网页抓取和 RAG 数据准备
Crawl4AI crawl4ai 面向 AI/RAG 的开源网页爬取与内容提取工具
RAGFlow ragflow 开源 RAG 引擎,强调文档解析、工作流和企业知识库
Haystack haystack 开源 LLM/RAG/搜索管道框架,适合企业检索问答系统
Verba verba Weaviate 开源 RAG chatbot,适合知识库问答样板
EmbedChain embedchain 基于数据源快速创建 ChatGPT/RAG 应用
LlamaParse llama-parse LlamaIndex 生态文档解析服务/工具,适合 PDF、表格、复杂文档解析
Docling docling 文档解析工具,适合 PDF、Office、HTML 等转结构化数据
Unstructured unstructured 文档 ETL 工具,适合将复杂文件转为可检索文本块

1.11.8 向量数据库与检索引擎

地址 标签 说明
ChromaDB chromadb 开源向量数据库,适合轻量 RAG 和本地原型
Milvus milvus 高性能开源向量数据库,适合大规模相似性搜索
Qdrant qdrant Rust 实现的向量搜索引擎,工程体验较好
Weaviate weaviate 开源向量搜索引擎,生态完整,适合知识库和语义搜索
pgvector pgvector PostgreSQL 向量扩展,适合已有 Postgres 体系内增加向量检索
pgvectorscale pgvectorscale Timescale 开源 PostgreSQL 向量扩展,面向更高性能向量搜索
Supabase Vecs supabase-vecs Supabase 的向量客户端
Pinecone SDK pinecone Pinecone 向量数据库 TypeScript 客户端
Vespa vespa 大规模搜索、推荐和向量检索引擎
Typesense typesense 开源搜索引擎,支持关键字、语义/向量检索混合场景
Meilisearch meilisearch 轻量搜索引擎,可配合向量/语义能力做混合检索

1.11.9 Prompt、评测、观测与实验管理

地址 标签 说明
Langfuse langfuse 开源 LLM engineering 平台,覆盖 tracing、prompt、eval、debug、monitoring
Arize Phoenix phoenix 开源 AI observability/evaluation 工具,适合 tracing、LLM eval、RAG 分析
OpenLLMetry openllmetry 基于 OpenTelemetry 的 LLM tracing/observability 方案
promptfoo promptfoo Prompt/模型输出测试与回归评测工具,适合 CI 门禁
DeepEval deepeval LLM 应用评测框架,适合 RAG、Agent、对话质量评测
Ragas ragas RAG 评测框架,适合 faithfulness、context precision/recall 等指标
OpenAI Evals openai-evals OpenAI 开源评测框架,适合构建自定义模型/任务评测
PromptFlow promptflow 微软开源 LLM 应用开发、评测和流程编排工具
Prompt Engineering Guide prompt-guide Prompt 工程指南和资源库
tiktoken tiktoken OpenAI tokenizer,用于 token 计算和成本预估
js-tiktoken js-tiktoken tiktoken 的 JavaScript/WASM 版本,适合前端/Node 成本预估

1.11.10 AI 应用开发平台与 Chat UI

地址 标签 说明
Dify dify 开源 LLM 应用开发平台,覆盖 workflow、RAG、Agent、模型管理和应用发布
Langflow langflow 可视化 LLM/Agent/RAG 应用构建平台
Flowise flowise 拖拽式 LLM 应用构建工具,适合快速搭建流程和工具调用
n8n n8n 开源自动化工作流平台,已大量支持 AI 节点和 Agent 工作流
AI Chatbot ai-chatbot Vercel 开源全栈 AI Chatbot 模板
LibreChat librechat 开源多模型 ChatGPT 类应用,支持插件、代理、工具和多 provider
NextChat nextchat 原 ChatGPT-Next-Web,轻量跨平台 ChatGPT 类应用
Lobe Chat lobe-chat 开源现代化 AI Chat 应用,支持多模型、插件、知识库等
Open WebUI open-webui 自托管 AI Chat UI,常用于 Ollama/本地模型/多模型接入
Chatbot UI chatbot-ui 开源 ChatGPT UI,适合作为轻量 UI 参考
Coze coze 字节 AI Bot/Workflow 平台,非完全开源,但适合观察国内产品化形态

1.11.11 浏览器 Agent、电脑使用与自动化

地址 标签 说明
Browser Use browser-use 开源浏览器 Agent 框架,让 LLM 控制浏览器完成网页任务
Stagehand stagehand Browserbase 开源浏览器自动化 SDK,将自然语言操作与 Playwright 代码结合
Playwright MCP playwright-mcp Playwright 的 MCP server,适合 AI 编码助手直接操作真实浏览器
Vercel Agent Browser agent-browser 面向 AI Agent 的浏览器自动化 CLI
Open Interpreter open-interpreter 本机电脑使用/自动化 Agent,可执行命令、文件操作和脚本
01 01 Open Interpreter 生态的本地语音/电脑助理方向项目
AutoGPT autogpt-history 早期自主 Agent 代表,建议作为历史案例/设计参考,而非首选工程框架
AI Shell ai-shell 将自然语言转换为 Shell 命令的 CLI 工具,适合命令生成类轻量场景

1.11.12 机器学习、浏览器端模型、语音和视觉 AI

地址 标签 说明
TensorFlow.js tensorflow-js 在浏览器或 Node.js 下运行机器学习/深度学习模型
TensorFlow.js Models tfjs-models TensorFlow.js 预训练模型集合,包含姿态、检测、文本等模型
ML5.js ml5 面向创意编程和 Web 开发者的友好机器学习库,基于 TensorFlow.js
ML.js mljs JavaScript 机器学习算法集合
Transformers.js transformersjs Hugging Face 浏览器/Node Transformer 模型运行库
ONNX Runtime Web onnxruntime-web ONNX Runtime 的 Web 运行能力,适合浏览器端模型推理
Whisper whisper OpenAI 开源语音识别模型
whisper.cpp whisper-cpp Whisper 的 C/C++ 高性能实现,适合本地/边缘端语音识别
VAD vad 浏览器实时语音活动检测库
Azure Speech SDK azure-speech 微软 Azure 语音服务 JavaScript SDK
OpenCV.js opencvjs OpenCV 的 JavaScript 版本,用于浏览器端计算机视觉
MediaPipe mediapipe Google 跨平台媒体 AI/视觉任务框架,适合姿态、手势、人脸等场景

1.12 WebAssembly

地址 标签 说明
WebAssembly 官网 wasm WebAssembly 官方入口,适合了解 Wasm 标准、生态和基础资料。
MDN WebAssembly wasm/mdn MDN 的 WebAssembly 文档,适合前端开发者入门和查询 Web API 集成方式。
AssemblyScript assemblyscript TypeScript-like 的 WebAssembly 语言,适合前端/TS 开发者用接近 TypeScript 的语法编写 Wasm;注意它不是直接把完整 TypeScript 编译成 Wasm。
wasm-pack wasm-pack Rust → Wasm 构建、打包、发布到 npm 的常用工具;原 drager/wasm-pack 链接建议替换为当前 Rust/Wasm 官方生态入口。
wasm-bindgen wasm-bindgen Rust 与 JS/Wasm 绑定与 glue code 工具链核心,常与 wasm-pack 配合使用。
Wasmtime wasmtime Bytecode Alliance 主导的快速、安全 Wasm runtime,适合服务端、插件系统、边缘计算等场景。
Wasmer wasmer 主流 Wasm runtime,可在服务端、边缘、嵌入式等场景运行 WebAssembly。
WASI wasi WebAssembly System Interface,面向非浏览器 Wasm 运行环境的系统接口规范。
WebAssembly Component Model wasm-component-model WebAssembly 组件模型,用于构建可组合、可互操作的 Wasm 组件,是 Wasm 服务端/插件生态的重要方向。
wit-bindgen wit-bindgen WebAssembly Component Model 的语言绑定生成工具,基于 WIT 描述 imports/exports 并生成多语言绑定。
jco jco Bytecode Alliance 提供的 JavaScript WebAssembly Component 工具链,支持在 JS 生态中处理 Wasm Components。
WABT wabt WebAssembly Binary Toolkit,包含 wat2wasm、wasm2wat 等底层转换和分析工具。
Binaryen binaryen WebAssembly 编译器和优化工具链基础库,常用于 Wasm 优化、生成和分析。
Emscripten emscripten C/C++ 编译到 WebAssembly 的经典工具链,适合迁移已有 C/C++ 库到 Web 或 Wasm runtime。
WasmEdge wasmedge CNCF 生态中的 WebAssembly runtime,常用于云原生、边缘计算和轻量服务场景。
WASI SDK wasi-sdk 面向 WASI 的 C/C++ 工具链,用于将 C/C++ 程序编译到 WASI 目标。
Extism extism 基于 WebAssembly 的插件系统框架,适合构建多语言、安全沙箱化的插件能力。
Suborbital Reactr reactr 历史/参考:基于 WebAssembly 的函数运行和插件框架,适合了解 Wasm 在服务端插件系统中的探索。
WasmExplorer WasmExplorer 历史参考:早期在线 Wasm playground,适合了解 Wasm 编译演示;现代项目建议优先参考 MDN、wasm-pack、WABT、Emscripten 等工具链。

1.13 IDE插件

1.13.1 VS Code

地址 标签 说明
MarketPlace marketplace VS Code 插件市场首页。
VSCode在线 VSCode VS Code 在线版,适合轻量编辑、远程仓库查看和临时开发。
Prettier - Code formatter prettier 官方 Prettier VS Code 插件,现代前端项目常用格式化工具;建议替代 Beautify/stylefmt 等老格式化插件。
Eslint插件 eslint JS/TS 代码质量检查插件,现代前端项目常用。
stylelint stylelint CSS/Less/SCSS 样式检查插件。
Vue - Official volar/vue-official Vue 官方 VS Code 插件,Vue3 项目优先使用;可替代 Vetur。
TypeScript Vue Plugin typescript-vue-plugin Vue + TypeScript 支持插件,适合 Vue3/TS 项目。
Tailwind CSS IntelliSense tailwindcss Tailwind CSS 智能提示、补全和 lint 插件,Tailwind 项目常用。
UnoCSS unocss UnoCSS VS Code 插件,适合原子化 CSS 项目。
Biome biome Biome 官方 VS Code 插件,适合使用 Biome 做格式化和 lint 的项目。
EditorConfig for VS Code editorconfig EditorConfig 支持插件,用于统一不同编辑器的缩进、换行等基础格式。
Error Lens error-lens 将错误、警告直接展示在代码行内,适合提升开发反馈效率。
Code Spell Checker code-spell-checker 代码单词拼写校验,适合文档、变量名、注释检查。
Bookmarks bookmarks 代码书签插件,适合大项目代码阅读和定位。
GitLens gitlens Git 源代码管理增强插件,可查看 blame、提交历史、作者信息等。
Project Manager project-manager 本地项目管理插件,适合多项目切换。
Git Graph git-graph Git 分支、提交历史图形化查看插件,适合多分支项目。
GitHub Pull Requests github-pr GitHub PR 和 Issue 管理插件,适合在 VS Code 内进行代码评审和协作。
REST Client rest-client 在 VS Code 中直接发送 HTTP 请求的插件,适合接口调试和保存 API 调试用例。
Thunder Client thunder-client VS Code 内置风格的 API 调试客户端,适合替代轻量 Postman 场景。
Docker docker Docker 官方 VS Code 插件,适合容器、镜像、Compose 文件管理和调试。
Dev Containers dev-containers VS Code 远程容器开发插件,适合统一团队开发环境。
Playwright Test for VS Code playwright Playwright 官方 VS Code 插件,适合编写、调试和运行 E2E 测试。
Vitest vitest Vitest 测试插件,适合现代 Vite/Vitest 项目。
GitHub Copilot copilot GitHub 官方 AI 编码助手插件,适合代码补全、解释和辅助生成。
GitHub Copilot Chat copilot-chat GitHub Copilot 的对话式编码助手插件。
Continue continue 开源 AI 编码助手插件,支持连接多种模型和本地/远程代码上下文。
Svg Preview svg-preview SVG 图形预览插件。
Color Highlight color-highlight 颜色预览插件。
Dart dart-code Dart 语言开发支持。
Flutter Flutter Flutter 开发支持。
Markdownlint markdownlint Markdown 规范检查插件。
HTML Snippets html-snippets 历史参考:HTML 标签片段快速开发插件;现代 VS Code 已有较多内置补全能力。
Beautify beautify 历史参考:JS/JSON/CSS/Sass/HTML 格式化插件,已不建议新项目优先使用;现代项目建议使用 Prettier。
Rainbow Brackets rainbow-brackets 历史参考:括号颜色区分插件;VS Code 已内置 bracket pair colorization,通常无需额外安装。
stylefmt stylefmt 历史参考:CSS 格式化插件;现代项目建议使用 Prettier + Stylelint。
Debugger For Chrome debugger-for-chrome 历史参考:VS Code 与 Chrome 联调插件,已废弃;现代 VS Code 已内置 JavaScript Debugger。
TypeScript Tslint Plugin typescript-tslint-plugin 历史参考:TSLint 已废弃;现代 TypeScript 项目建议使用 typescript-eslint。
vetur vetur 存量维护:Vue2/Vetur 老项目维护参考;Vue3 项目建议使用 Vue - Official / Volar。
Identical Sublime Monokai identical-sublime-monokai Sublime Monokai 风格主题,按个人习惯保留。
Minify minify 历史参考:JS/CSS 直接压缩插件;现代项目通常由 Vite/Webpack/Rollup/Rspack 等构建链路处理压缩。
polacode polacode 代码截图插件,适合分享代码片段。
JavaScript Booster javascript-booster JS/TS 快速重构优化工具,比如将 var 替换为 const/let。

1.14 Web3/区块链

地址 标签 说明
Ethereum Developers ethereum 以太坊官方开发者入口,适合了解钱包、智能合约、节点、工具链和 DApp 开发基础。
Solidity solidity 以太坊智能合约编程语言官方文档。
OpenZeppelin openzeppelin 安全的智能合约标准库,包含 ERC20/ERC721/ERC1155 等常用合约实现。
Ethers.js ethers 经典以太坊 JavaScript/TypeScript 库,适合钱包、合约调用、签名、交易等场景;现代新项目也可评估 Viem。
Viem viem 现代化、TypeScript 优先的以太坊接口库,轻量、模块化、类型友好。
Wagmi wagmi React Hooks for Ethereum,当前主线基于 Viem,适合 React DApp 的钱包连接、合约读写、账户状态和交易状态管理。
RainbowKit rainbowkit React 钱包连接组件库,适合快速构建较好的钱包连接体验。
ConnectKit connectkit 美观、现代的 Web3 钱包连接组件。
Reown AppKit reown-appkit WalletConnect/Web3Modal 方向的新入口,提供钱包连接、账户登录、嵌入式钱包等 Onchain App 体验能力。
Web3Modal web3modal 存量维护/历史参考:以太坊钱包连接库;新项目建议同时关注 Reown AppKit。
MetaMask SDK metamask-sdk MetaMask 官方开发工具包。
WalletConnect walletconnect 连接去中心化应用与移动钱包的开放协议。
Thirdweb thirdweb 构建 Web3 应用的完整开发平台,提供 SDK、合约、钱包、基础设施等能力。
Moralis moralis Web3 开发平台,提供 API、索引和基础设施能力。
Alchemy alchemy 区块链开发平台和 API 提供商,常用于 RPC、NFT、Token、交易等数据服务。
Infura infura 以太坊、IPFS 等基础设施 API 网关服务。
QuickNode quicknode 区块链基础设施 API 服务,支持多链 RPC 和数据服务。
Hardhat hardhat 主流以太坊智能合约开发环境,支持编译、测试、部署、调试等流程。
Foundry foundry Rust 编写的高性能以太坊智能合约开发工具链,包含 forge、cast、anvil 等工具。
Anvil anvil Foundry 生态中的本地区块链节点,适合智能合约本地开发和测试。
Scaffold-ETH 2 scaffold-eth 现代以太坊 DApp 快速开发模板,常见组合是 Hardhat/Foundry、Viem、Wagmi、RainbowKit、Next.js。
Truffle truffle 历史参考:经典以太坊开发框架,Truffle/Ganache 已 sunset 并归档;新项目建议优先 Hardhat 或 Foundry。
Tenderly tenderly 智能合约调试、模拟、监控和链上分析平台。
The Graph the-graph 区块链数据索引协议,适合构建链上数据查询服务。
Chainlink chainlink 去中心化预言机网络,常用于价格、随机数、自动化等链上/链下数据交互。
Safe safe 多签钱包和智能账户基础设施,适合 DAO、团队资金管理和账户抽象相关场景。
EIP-1193 eip-1193 Ethereum Provider JavaScript API 标准,钱包注入和 DApp 交互的基础规范。
EIP-6963 eip-6963 多钱包注入发现标准,解决多个钱包扩展同时注入时的发现和选择问题。
Optimism Docs optimism Optimism / OP Stack 官方文档,适合了解以太坊 L2 和 Rollup 生态。
Arbitrum Docs arbitrum Arbitrum 官方文档,适合了解 Arbitrum L2、合约部署和前端集成。
Polygon Docs polygon Polygon 官方文档,适合了解 Polygon PoS、zkEVM 和相关开发工具。
Base Docs base Base 官方开发者文档,适合了解 Base 链、合约部署和 Onchain App 开发。
IPFS ipfs 去中心化存储网络文档,适合了解内容寻址、文件存储和分发。
Ceramic Network ceramic 去中心化数据网络,适合 DID、用户数据和可组合数据场景。
GUN gun 去中心化数据同步协议,适合 P2P 数据同步、离线优先应用等实验性场景。

1.15 生活篇

地址 标签 说明
HowToCook HowToCook 程序员在家做饭方法指南,适合用工程化方式学习做饭。
HowToLiveLonger HowToLiveLonger 程序员健康生活资料集合,适合作为健康习惯、风险因素和生活方式参考;不替代专业医疗建议。
Awesome Selfhosted awesome-selfhosted 自托管开源服务集合,适合搭建个人工具、家庭服务器和私有化服务。
Awesome Selfhosted Archive awesome-selfhosted-archive 历史参考:早期自托管服务集合,部分内容可能已迁移或过时。
Awesome Privacy awesome-privacy 隐私工具和隐私友好型服务集合,适合了解个人数据保护和替代工具。
The Book of Secret Knowledge secret-knowledge 面向工程师的命令行、系统、网络、安全、效率技巧集合。
Awesome awesome GitHub Awesome 系列总入口,可作为各类技术/生活资料集合的导航。
The Art of Command Line command-line 命令行使用技巧集合,适合程序员提升日常效率。
Tech Interview Handbook interview 技术面试准备资料集合,适合求职、面试官题库和系统化复习。
Coding Interview University coding-interview 计算机基础与算法面试长期学习计划,适合系统补基础。

2.fe-tools方法/工具库

2.1 utils说明

前端开发常用的通用工具方法,适用于浏览器/NodeJS。文档见https://blog.michealwayne.cn/fe-tools/stable/

模块

  • env:环境判断常量;
  • utils:基础工具方法集合,与环境无关;
  • web-utils:web基础工具方法集合。浏览器端DOM操作,CSS操作,事件处理等封装,适用于浏览器;
  • node-utils:NodeJS文件,事件处理等封装;
  • node-img-build:webp、base64等图片处理封装,基于gm;
  • canvas-utils:Canvas图形绘制封装,可在web/node-canvas中使用。
  • ai-utils:AI 大模型相关封装、包括代码检查等一些应用。

启动utils项目步骤

(需要在./utils目录下)

  • 执行pnpm install安装依赖;
  • 构建:npm run build:prod
  • 构建文档:npm run docs

todo: 小程序封装,构建封装。

2.2 project-templates 一些前后端项目模版

frontend 前端项目模版

backend 后端项目模版

2.3 styles基础样式库

请移至 CSS 推荐规范MooCSS及通用样式库moo-css-base npmmoo-css-base github


FE-Tools - Chrome插件

具体项目及源码地址:https://github.com/MichealWayne/fe-tools-chrome-plugin

chrome-ext.png

辅助前端开发的一个小插件。

功能:

  • 工具网站搜索(
  • 本地收藏夹网站搜索(
  • 拼音 / 首字母搜索(
  • CSS 属性 / Moo-CSS 搜索(
  • URL 转二维码及 SVG 矢量图(
  • 图片压缩及转 Base64(
  • px/rem/vw 换算计算器(
  • HEX/RGB/HSB/HSL 色值换算(
  • 有道翻译快捷入口(
  • API 测试 / 简易 Postman(
  • 请求环境变量管理(
  • 常用正则查询与测试(
  • JSON 转换、格式化与验证(
  • SVG 在线编辑与优化(
  • 日期 / 时间戳转换与日期计算(
  • Linux 命令查询(
  • 页面截图(整页 / 节点截图并保存)(
  • 当前页面技术栈判断(
  • 工具函数库搜索(
  • 中英文切换(

前往>>

安装方式

clone本仓库到本地,在“扩展程序”界面点击“加载已解压的拓展程序”选择本地仓库目录下的chrome-extension目录。

About

前端开发常用文档/网站地址、样式/js方法封装库、项目模板。提供Chrome拓展程序

Topics

Resources

Stars

207 stars

Watchers

3 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors