Thanks to visit codestin.com
Credit goes to github.com

Skip to content
/ fe-tools Public

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

blog.michealwayne.cn/fe-tools/stable/
198 stars 37 forks Branches Tags Activity
Star

MichealWayne/fe-tools

BranchesTags

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 基于gpt3.5的MDN文档问答机器人。
W3C官网 html/css/js W3C官方标准。
W3C学习网站 w3cshool 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/7）微软开发的在低端IE上运行的图形绘制DSL、类似“SVG”。
TypeScript官方手册 typescript TypeScript官方手册。
TypeScript Challenges ts-challenges TypeScript Challenges，在线学习/检验自己的ts类型编程水平。
ECMA standards ecma ECMAScript 协议标准。
ECMA International(6) ES6 ECMAScript6官方文档。
ECMA International(6) 汉化 ES6 ECMAScript6官方文档的中文翻译版（只有少部分且挺久没更新了）。
ECMA6 features ES6 通俗易懂的ECMAScript6特性demos。
ES6入门（阮一峰） ES6 国内使用频率最高的ECMAScript6文档，特别适合新手。
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)英文官网。
Web Assembly中文网 wasm Web Assembly(wasm)中文网。
Krustlet 官网 krustlet 一款 Web Assembly 框架。

1.2 兼容/查询

地址 标签 说明
can i use caniuse 使用频率最高的兼容支持查询网站。
ES兼容查询 js ECMAScript兼容查询。
微信小程序ES兼容查询 weapp 微信小程序ES api及对应小程序环境版本兼容查询。
iOS字体 ios font iOS系统自带字体支持情况查询。
Web安全色查询 web color *为了尽量让用户看到色彩相同的网页,请尽量使用216色的web安全色。
StatCounter浏览器份额统计 statcounter *StatCounter的浏览器统计报表
浏览器份额统计 browser *百度统计的市面上浏览器/app份额（现在已经没有了，只剩百度统计产品）。

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。

1.3.2 后处理

地址 标签 说明
postcss 文档 postcss 被广泛运用的CSS后处理工具。
postcss 插件 postcss post插件库中心。
autoprefixer autoprefixer 自动补充浏CSS前缀的后处理工具。
cssnano官网 cssnano CSS优化和分解插件。
postcss-plugin-px2rem px2rem 将px单位转为rem单位的工具。
postcss-px-to-viewport px2vw 将px单位转为vw单位的工具。
cssnext官网 cssnext 让今天的我们写着明天的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库。
bootflat.css bootflat.css 一款扁平化风格scss库，基于BootStrap3.3。
corpus.css corpus.css 一款scss集合库。
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 模块化的UI库。
Unocss官网 unocss 原子、按需的css模块化引擎、有借鉴tailwind。

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样式。
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函数式工具库。
UnderscoreJS underscorejs 红极一时的函数式工具库。
jQueryJs jQuery 早年红极一时的js封装库。
ZeptoJs Zepto 轻量级“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 一款模块化支持按需的日期格式化工具。
DayJs dayjs 一款日期格式化的工具，轻量，MomentJS的替代品。
MomentJs momentjs 一款日期格式化的工具（2020开始停止维护）。
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。

1.4.3 请求、cookie和缓存

地址 标签 说明
axios axios 高频使用的ajax库。
fetch fetch Fetch API的兼容polyfill。
jsonp jsonp 不用多说，实现jsonp。（axios没有封装jsonp）
URI.js uri URI解析操作的库。
StoreJs storage storage的封装库，兼容IE6。
js-cookie js-cookie cookie的封装库。
Dexie.js dexiejs IndexedDB的封装库。
localForage.js localForage 基于IndexedDB、WebSQL、localStorage的离线存储库，Mozilla。
basket.js basket.js 利用localStorage来缓存script和css资源。

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的文本编辑工具。
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模糊搜索库。
algolia algolia 好用的搜索集成方案。
dejavu dejavu 一款弹性搜索方案，逮虾户。
driver.js driverjs 一款轻量的用户操作引导插件。
aos.js aosjs 一款强大的页面滚动动画插件。
favico.js favicojs 一款让pc网站图标动起来的插件。
fullPage.js fullpagejs 一款快速搭建全屏滚动页面的插件。
Lucky Canvas lucky-canvas 一款支持web、小程序跨平台的 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。
Typedjs typed.js 一款模拟打字机效果的js UI库。
视/音频
地址 标签 说明
MediaElement.js mediaelementjs 一款视频控制插件。
video.js videojs 一款视频控制插件。
flv.js flvjs 一款无需flash的flv播放插件。
howler.js howlerjs 视、音频控制插件。
jplayer jplayer jQuery的视、音频控制插件。
audio5.js audio5js 一款音频控制插件。
Wavesurfer.js wavesurfer 一款音频波形播放器。
图片
地址 标签 说明
caman.js camanjs 一款web图片处理插件。
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 字符串的截取删除等操作库（很久没维护了）。
qs.js qsjs URL参数处理库。
nano-id nanoid 小型（130 字节）、安全、URL友好、唯一的字符串 ID 生成器。
uuid uuid 生成符合 RFC 的 UUID 库。
md5.js md5 获取字符、Buffer的md5。
hash.js hash js的hash字符串处理。

1.4.5 工具

地址 标签 说明
RequireJs requirejs js模块化工具（webpack后很少有项目会用到）。
SeaJs seajs js模块化工具（webpack后很少有项目会用到）。
Browserify browserify 浏览器端使用类似于 node 的 require() 方式。
validate.js validate.js form表单校验工具。
validator.js validator.js 有名的内容校验工具，比如邮箱验证、数值验证等。
RxJS中文官网 RxJS ReactiveX编程理念的js异步编程库。
Faker faker 用于在浏览器/NodeJS中生成假数据（注意作者已删源码）。
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 效果、兼容最好（ie6+）的可视化库，可惜企业要收费。
echarts echarts 国内最全面的可视化库。
d3 d3 不直接输出图形，输出开发功能的svg工具。
Chartjs chartjs 模块化可视化库。
antv G2/F2 包括pc/移动的可视化库，蚂蚁。
FundCharts fundcharts 本人的跨端轻量可视化库。
ThreeJs文档 threejs/webGL 著名的webGL 3D建模库
PlayCanvas文档 playcanvas webGL游戏3D建模库
scene.js scenejs WebGL 3D基础库。
Snap.svg snap 一款svg操作库。
pixi.js pixijs 2D WebGL渲染引擎。
svg-3d-builder svg-3d-builder 3D SVG渲染引擎。
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城市建模库。
Kartograph Kartograph.js 一款普通的2D SVG城市数据展示库，IE7+。
leafletjs Leaflet.js 一款移动优先的地图展示插件。

1.4.8 h5动画

地址 标签 说明
Bounce.js BounceJS 牛啤的CSS3动画创建工具。
animateplus.js Animateplus 仅3k的动画工具。
Anime.js animejs 轻量级js动画库。
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 一个功能强大，美观，简单且开放的游戏和渲染引擎。
GranimJs granimjs 用于创建流体和交互式渐变的动画js库，仅17k。
canvas-confetti confetti 轻量的js canvas礼花特效库。

1.4.9 移动端手势

地址 标签 说明
AlloyFinger.js AlloyFinger 增加移动端的各种手势事件。
hammer.js hammerjs 手势封装库，取消了移动端click的300ms延迟。
interact.js interactjs 使用JavaScript实现拖放、缩放和多点触控手势。

1.4.10 加载

地址 标签 说明
aload.js aload.js 异步图片/js/css加载工具。
layzr.js layzr.js 轻量图片懒加载工具。
lazysizes.js lazysizes 高性能的图片/iframe懒加载工具。
infinite-scroll.js infinite-scroll “无限”滚动的加载插件。

1.4.11 TypeScript辅助

地址 标签 说明
ts-loader ts-loader webpack中的TypeScript构建插件。
awesome-typescript-loader awesome-typescript-loader webpack中的TypeScript构建插件，比ts-loader要快一点。
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类型生产工具，微软。

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组件的库、比vuera功能完善。
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封装库。

1.5 Vue

地址 标签 说明
Vue3 文档 vue Vue3 官方文档。
Vue2 文档 vue Vue2 官方文档。
vue-cli 文档 vue-cli vue脚手架工具文档。
pinia 文档 pinia 轻量Vue状态管理工具，vue3推荐。
vuex 文档 vuex vue数据流控制工具。
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 使用PC中后台前端开发的UI组件库，饿了么。
vue-lazyload 文档 vue-lazyload vue版的图片/组件懒加载插件。
iView 文档 iview PC 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的服务端渲染应用框架。
ViteJS 文档 vitejs 无bundle的Vue轻量前端项目构建工具。
vue-class-component 仓库 vue-class-component Vue的Component装饰器封装，用于jsx/tsx的vue组件写法。
Formily 文档 formilyjs Element/Antd的表单DSL解决方案。
vue-2-3 vue-2-3 vue2和vue3共存的一种解决方案封装。
SWRV swrv 用于数据请求的 Vue 钩子库，处理了请求缓存、状态等等。
Vue Request vue-request 用于数据请求的 Vue 钩子库，比swrv能力要稍微丰富一些。
Vue Use vue-use 基于Vue组合式API的实用工具集，除了常用的请求动画等封装外、还封装了浏览器、electron utils。
Vue React Combined vuereact-combined Vue2和React快捷集合的工具包。
Veaury veaury Vue3 和 React 快捷集合的工具包。

1.6 React

地址 标签 说明
React 文档 react React 官方文档。
React 中文文档 react React 中文翻译文档。
create-react-app 文档 create-react-app react脚手架工具文档。
react Chrome devtools react-devtools react的Chrome开发拓展插件。
react-router react-router 用于react的前端路由控制。
Recoil 文档 recoil 简单、对hook友好的数据流控制工具。
redux 文档 redux 广泛使用的数据流控制工具，reducer+flux。
flux 文档 flux 数据流控制工具（现在已经很少在用了）。
mobx 文档 mobx 轻量数据流控制工具。
dvajs 文档 dvajs 基于 redux 和 redux-saga 的数据流方案，蚂蚁。
UmiJs 文档 umijs 可插拔的企业级 react 应用框架，蚂蚁。
Rekit 文档 rekit React/Redux/React-router开发工具/IDE。
NextJs 文档 nextjs 轻量级的 React 服务端渲染应用框架。
Gatsby.js 文档 gatsbyjs 轻量级的 React 静态网站搭建框架。
React-use 文档 react-use 好用的React自定义hooks封装库。
Umi Hooks 文档 umi hooks 适用于中台的hooks方法，如请求、拖拽、防抖。
react-query 文档 react-query 好用的React ajax接口请求处理封装hook。
why-did-you-render why-did-you-render 用来检测React组件是否需要重新渲染的工具。
framer-motion 官网 framer-motion 非常强大的React动画/交互手势库，来自Farmer API。
react-content-loader 文档 create-content-loader react版SVG骨架屏插件。
shadcn-ui 文档 shadcn shadcn，原子、灵活的UI组件库。
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-draggable react-draggable 一个用于拖拽操作的React封装组件。
React DND react-dnd 适用于React的复杂拖拽控制库，基于HTML5拖放API。
react-tappable react-tappable 一个用于点击事件操作的React封装组件。
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。
React i18Next react-i18next 多语言解决方案。
SWR swr 用于数据请求的 React Hooks 库，处理了请求缓存、状态等等。
Formik formik 高度封装、开箱即用的 React form 表单封装库。

1.6.1 Nextjs

地址 标签 说明
Next i18next next-i18next 用于在Nextjs中处理国际化多语言的库。
NextAuth.js next-auth Next.js 官方推荐的身份验证库，支持 OAuth、JWT 和数据库集成，完美适配 SSR。
NextSEO next-seo 专为 Next.js 设计的 SEO 工具，支持动态元标签管理和结构化数据生成。
next-intl i18n 更现代的国际化方案，支持 App Router 和 Pages Router，内置 SSR 多语言加载。
NextUI ui-library 为 Next.js 优化的现代组件库，内置 SSR 支持和主题系统。
@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。

1.7 NodeJS和构建

地址 标签 说明
Node.js best practices list nodebestpractices NodeJS最佳实践集合。
npm npm node包统一平台。
yarn yarn 高速的node包管理器。
pnpm pnpm 快速高效（安全）的node包统一管理器。
n n 极度简单的 NodeJS 版本管理工具。
StoryBook storybookjs 用于独立开发React、Vue和Angular的UI组件库导航站点。
unpkg unpkg 国外公共静态资源CDN，适用于 npm 上的所有内容。
NodeJS api node Node官方文档。
Deno api deno Deno官方文档（NodeJS.next）。
Bun bun 号称比NodeJS快3倍的js runtime容器。
TurboRepo turborepo 好用的、高性能的多包管理工具，monorepo。
Lerna lerna 好用的多包管理工具，monorepo。
patch-package patch-package 给node_modules打补丁的工具包。
V8 dev docs V8 js V8引擎文档。
V8 v8 V8引擎介绍。
QuickJs quickjs 一款轻量级js引擎。
jsvu jsvu js引擎调试必备，引擎切换及版本控制。
docker docker 应用容器引擎Docker。
Linux linux Linux命令查询手册。
GraphicsMagick gm 后台图片处理工具。
js-xlsx js-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。

1.7.1 构建

地址 标签 说明
Prettier prettier 对代码无侵害的代码格式化工具。
ejs ejs 简单上手的html模板引擎。
Mustache mustache 适用于多语言的html模板库。
pug pug html模板库。
jade jade html模板库。
gulp 配置文档 gulp 自动化构建工具。
gulp plugins gulp gulp插件中心。
grunt 配置文档 grunt 自动化构建工具。
rollupjs文档 Rollup 一款ES6模块构建工具。
webpack 配置文档 webpack 应用面不能再广的打包工具。
webpack-chain webpack-chain 链式配置webpack配置的工具。
TurboPack turbopack 基于Rust的高性能打包工具。
parceljs 配置文档 parceljs 轻量打包。
snowpack 官网 snowpack 无bundle的轻量前端项目构建工具。
swc swc 用Rust写的、号称比babel快20倍且支持其所有功能的ts/js编译器。
babel babel 应用面不能再广的ES编译器。
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代码混淆插件。

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应用框架。
Mockjs 配置文档 mockjs 接口数据模拟工具，可以在客户端和服务端使用。
SheetJs sheetjs 通过node操作word的工具。
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 qingfuwu 阿里云函数计算服务，支持Serverless（FaaS）。
腾讯云 SFC qingfuwu 腾讯云云函数服务，支持Serverless（FaaS）。

1.7.6 低代码LowCode

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

1.8 Hybird和跨端

地址 标签 说明
pwa pwa 渐进式web应用。
微信小程序官网 小程序/hybird 微信小程序开发官网。
支付宝小程序官网 小程序/hybird 支付宝小程序开发官网。
百度小程序官网 小程序/hybird 百度小程序开发官网。
wepy文档 小程序/hybird vue语法的小程序开发官网。
小程序工具集合 小程序/hybird 微信小程序开发工具集合。
小米轻应用官网 轻应用/hybird 小米轻应用开发官网。
Oppo/vivo快应用官网 轻应用/hybird Oppo/vivo轻应用开发官网。
华为快应用官网 轻应用/hybird 华为轻应用开发官网。
React-native 文档 跨端 热门的react语法跨端工具，RN。
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 基于OpenAPI的问答机器人，用来查技术问题也挺好。
Cursor cursor 基于OpenAPI GPT-4的编程助手，感觉好像比copilot还流畅一点。
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图形文件工具
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 等）类型声明代码的工具网站。
中国独立开发者项目列表 chinese-independent-developer 聚合中国独立开发者的项目。

1.10 测试、安全及加密

1.10.1 单元测试

地址 标签 说明
MochaJS文档 mocha 一款单元测试工具。
JestJS文档 jest 一款单元测试工具，主流。
Cypress官网 cypress 一款单元测试集成平台工具。
AvaJs avajs 一款快速的测试工具。
karma karma 一款基于Node.js的JavaScript测试执行过程管理工具（Testacular的新名字）。
enzyme官网 enzyme 一款React单元测试工具，可以测hook。
gremlins.js gremlins 一款node及浏览器的Monkey Test工具。
uptime-kuma uptime-kuma 一款开源的、基于puppeteer的指标监控平台。
Playwright playwright 较新颖的e2e测试工具，支持Chrome、firefox等主流浏览器。

1.10.2 安全及加密知识

地址 标签 说明
CryptoJS crypto-js 一个可以说是最常用的 JavaScript 加密库，支持主流的哈希算法、加密算法,例如 SHA、MD5、AES 等。
js-sha256 js-sha256 一个用于 SHA256 哈希运算的轻量级库。
Bcrypt bcrypt 用于密码散列处理的库。

《How to Secure Anything》

crypto-js 前端数据加密工具

《浅谈前端安全》

《再谈前端安全》

《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验证工具
JSHint js代码检查 jshint 一个JavaScript验证工具
ESLint js代码检查 eslint 一个JavaScript验证工具
CSSLint css代码检查 csslint 一个CSS验证工具
Markup Validation Service validator 在线HTML验证网站
Flow js代码检查 flow 一个JavaScript代码检查工具
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，不过不开源。

1.11 AI人工智能库

1.11.1 大语言模型集成框架

地址 标签 说明
AI SDK ai-sdk TypeScript的AI工具包，提供各类工具包、UI界面
LangChain langchain 著名的大语言模型集成工具，提供了一套工具、组件和接口，可简化构建高级语言模型应用程序的过程
LlamaIndex llamaindex 构建基于LLM的应用程序的数据框架，专注于数据索引和检索
Semantic Kernel semantic-kernel 微软开源的AI编排SDK，支持多种编程语言
Auto-GPT autoGPT 预训练语言生成模型，可以自动完成摘要生成、推荐系统和对话生成等任务
AgentGPT agentGPT 基于语言模型的人工代理，可以根据特定场景的要求，生成合适的回答
SuperAGI superagi 开源的自主AI代理框架，具有图形界面
E2B e2b 用于AI代理的云端开发环境

1.11.2 API封装库

地址 标签 说明
OpenAI NodeJS openai OpenAI 的 NodeJS API 调用封装库
OpenAI node quick start openai OpenAI NodeJS的起步文档及案例
Anthropic SDK anthropic Anthropic Claude API的TypeScript/JavaScript SDK
Google AI JS SDK google-ai Google Gemini API的JavaScript SDK
Cohere SDK cohere Cohere API的TypeScript SDK
Mistral AI SDK mistral Mistral AI API的JavaScript SDK
Replicate SDK replicate Replicate API的JavaScript SDK
LlamaIndex TS llamaindex-ts LlamaIndex的TypeScript版本

1.11.3 AI应用开发工具

地址 标签 说明
AI Chatbot ai-chatbot Vercel开源的全栈聊天机器人模板
Chatbot UI chatbot-ui 开源的ChatGPT UI界面
LibreChat librechat 增强版ChatGPT克隆，支持多种AI模型
ChatGPT-Next-Web chatgpt-next-web 一键拥有你自己的跨平台ChatGPT应用
Superagent superagent 构建、部署和管理LLM驱动的代理的平台
AI Shell ai-shell CLI工具，将自然语言转换为Shell命令
MetaGPT metagpt 多代理框架，给定一行需求，返回PRD、设计、任务、代码
AutoGen autogen 微软开源的多代理对话框架

1.11.4 机器学习库

地址 标签 说明
TensorFlowJS tensorflow 在浏览器或Node.js下构建和运行机器学习和深度学习模式的库
ML5.js ml5 友好的机器学习库，构建在TensorFlow.js之上
pipcook pipcook 对web开发者友好的机器学习工具集，阿里
ML.js mljs JavaScript中的机器学习库
Keras.js kerasjs 在浏览器中运行Keras模型
ml-distance ml-distance 计算向量之间的距离或相似度，可用于Embeddings处理
Transformers.js transformersjs 在浏览器中运行Transformer模型的库

1.11.5 语音和视觉AI

地址 标签 说明
Whisper whisper OpenAI 语音识别模型（转文字）
VAD vad 在浏览器中运行的实时语音活动检测
Azure Speech SDK azure-speech 微软Azure语音服务JavaScript SDK
Amazon Transcribe SDK aws-transcribe Amazon Transcribe流式转录SDK
TensorFlow.js Models tfjs-models 预训练的TensorFlow.js模型集合
OpenCV.js opencvjs OpenCV的JavaScript版本，用于计算机视觉
face-api.js face-api JavaScript人脸识别API
PoseNet posenet 实时人体姿态估计

1.11.6 向量数据库

地址 标签 说明
ChromaDB chromadb 开源的向量数据库
Milvus milvus 开源向量数据库，用于可扩展的相似性搜索
Qdrant qdrant 向量相似性搜索引擎
Weaviate weaviate 开源向量搜索引擎
Pinecone SDK pinecone Pinecone向量数据库TypeScript客户端
Supabase Vecs supabase-vecs Supabase的向量客户端

1.11.7 Prompt工程和优化

地址 标签 说明
Prompt Perfect prompt-perfect 一个优化Prompt的在线工具
PromptFlow promptflow 微软开源的LLM应用开发套件
LangChain Prompts langchain-prompts LangChain的Prompt模板库
Prompt Engineering Guide prompt-guide Prompt工程指南和资源
awesome chatGPT prompts chatgpt-prompts chatGPT问答训练实践集合
awesome chatGPT chatgpt-awesome chatGPT/GPT相关工具、demo及文档集合
tiktoken tiktoken AI 模型计算库，用于预估调用成本（js版）

1.11.8 RAG (检索增强生成)

地址 标签 说明
LlamaIndex RAG llamaindex-rag 专为RAG优化的数据框架
LangChain RAG langchain-rag LangChain的检索问答链
Firecrawl firecrawl 将网站转换为LLM就绪的数据
EmbedChain embedchain 基于任何数据集创建ChatGPT应用
LlamaIndex Integrations llamaindex-integrations LlamaIndex集成包

1.11.9 AI编程开发工具

地址 标签 说明
Claude Code claude-code Anthropic出品的AI编程助手，基于Claude模型，支持代码生成、解释和调试
Gemini Cli gemini-cli Google出品的AI编程助手，基于Gemini模型，支持命令行交互和代码生成
Cursor cursor 面向专业开发极其友好的AI IDE，当前火爆
awesome-cursorrules cursorrules 让Cursor提升效率的各类工程cursorrules集合
Windsurf windsurf 面向专业开发极其友好的AI IDE，个人认为当前对新人比Cursor更友好，当前火爆
awesome-windsurfrules windsurfrules 让Windsurf提升效率的各类工程cursorrules集合
Trae trae 对标Cursor的AI IDE，免费，字节
Bolt.new bolt 生成和有能力部署项目的AI Agent平台，当前火爆
Bolt.new开源项目 bolt 开源版本的Bolt项目，支持切换模型
V0 v0 Vercel出品，生成和有能力部署项目的AI Agent平台，当前火爆
CopyCoder copycoder 通过上传应用程序截图或 UI 设计图，Prompt，配合上述Cursor、Bolt这些 AI 代码生成工具使用
Cline cline 开源VSCode插件，agent，支持AI生成/修复代码，当前火爆
CopyWeb copyweb 通过上传应用程序截图或Figma UI 设计稿生成页面，还原效果较好就是免费额度少了点。
MasterGo mastergo 设计平台为主，但能较好还原成网页，营销静态类效果不错，国产。
MGX mgx 多 Al Agent 开发平台——从规划、数据分析到编码、测试和部署构建全栈应用，目前比Devin好一点。
GitHub Copilot copilot GitHub官方AI编程助手
Codeium codeium 免费的AI代码自动完成工具
Tabnine tabnine AI代码自动完成工具，支持多种IDE
Aider aider 基于GPT的AI pair programming工具
FauxPilot fauxpilot 开源的GitHub Copilot替代品

1.11.10 AI工具平台

地址 标签 说明
MCP.so mcp.so 开放MCP工具集合
21st.dev 21st AI友好的前端React组件集合
Dify dify AI workflow编排平台，有开放平台
Coze coze AI workflow编排开放平台，国产，字节
Langflow langflow 可视化AI应用构建平台
Flowise flowise 拖拽式LLM应用构建工具
Flowise开源 flowise-open Flowise的开源版本

1.12 WebAssembly

地址 标签 说明
AssemblyScript assemblyscript 用TypeScript写wasm
Wasmtime wasmtime 一个快速安全的wasm运行时，字节
WasmExplorer WasmExplorer 一个在线的wasm playground

1.13 IDE插件

1.13.1 VS Code

地址 标签 说明
MarketPlace marketplace 插件首页
VSCode在线 VSCode VSCode在线版
Color Highlight color-highlight 颜色预览。
Svg Preview svg-preview SVG图形预览。
Code Spell Checker code-spell-checker 代码单词拼写校验。
Beautify beautify javascript, JSON, CSS, Sass, 和HTML格式优化。
Bookmarks bookmarks 看代码神器，代码书签。
Rainbow Brackets rainbow-brackets 开发必备，括号颜色区分。
stylefmt stylefmt css格式化。
Debugger For Chrome debugger-for-chrome vscode和chrome联调插件，本地开发必备。
Eslint插件 eslint js检查。
stylelint stylelint css/less/scss检查。
TypeScript Tslint Plugin typescript-tslint-plugin TypeScript检查。
vetur vetur Vue开发工具。
Dart dart-code Dart语言开发支持。
Flutter Flutter Flutter开发适配。
HTML Snippets html-snippets HTML标签快速开发。
Identical Sublime Monokai identical-sublime-monokai 本人还是习惯sublime的风格。
Markdownlint markdownlint markdown检查。
Minify minify js/css直接压缩。
polacode polacode 代码截图的vscode IDE插件
GitLens gitlens git源代码管理插件
Project Manager project-manager 本地项目管理
JavaScript Booster javascript-booster js/ts快速重构优化工具，比如将var换为const/let。

1.15 Web3/区块链

地址 标签 说明
Ethers.js ethers 轻量级以太坊JavaScript库，Web3.js的现代替代品。
Viem viem 现代化的以太坊接口，TypeScript优先，性能更好。
Wagmi wagmi React Hooks for Ethereum，基于ethers.js构建。
RainbowKit rainbowkit 最好的钱包连接体验React组件库。
ConnectKit connectkit 美观、现代的Web3钱包连接组件。
Web3Modal web3modal 单一的以太坊钱包连接库。
Thirdweb thirdweb 构建Web3应用的完整开发框架。
Moralis moralis Web3开发平台，提供API和基础设施。
Alchemy alchemy 领先的区块链开发平台和API提供商。
Infura infura 以太坊和IPFS的API网关服务。
QuickNode quicknode 快速、可靠的区块链基础设施API。
Hardhat hardhat 以太坊软件开发环境。
Truffle truffle 经典的以太坊开发框架。
Solidity solidity 以太坊智能合约编程语言。
OpenZeppelin openzeppelin 安全的智能合约标准库。
MetaMask SDK metamask-sdk MetaMask官方开发工具包。
WalletConnect walletconnect 连接去中心化应用与移动钱包的开放协议。
IPFS ipfs 去中心化存储网络JavaScript库。
Ceramic Network ceramic 去中心化数据网络。
GUN gun 去中心化数据同步协议。

1.16 生活篇

地址 标签 说明
HowToCook HowToCook 程序员在家做饭方法指南。
HowToLiveLonger HowToLiveLonger 程序员延寿指南。

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 npm，moo-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换算计算器（√）
  • rgb/hsb/hex色值换算（√）
  • 快速翻译（√）
  • 简易Postman（√）
  • 常用正则查询（√）
  • 工具函数库搜索（√）
  • JSON转换（√）
  • SVG编辑器（√）
  • 时间日期转换（√）
  • 搜索自定义拓展

前往>>

安装方式

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

About

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

blog.michealwayne.cn/fe-tools/stable/

Topics

nodejs css tools js frontend

Resources

Readme
Activity

Stars

198 stars

Watchers

3 watching

Forks

37 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages