热门标签
当前位置: article > 正文
前端常用网址_程序验证网站qs
作者：黑客灵魂 | 2024-06-19 18:54:54
赞
踩
程序验证网站qs
fe-tools
前端开发常用文档/网站地址、样式/js方法封装库（ts）、典型项目模板。English README>>
1. 常用网站
目录：
- 1.1 HTML/CSS/JavaScript
- 1.2 兼容/查询
- 1.3 CSS工具
- 1.4 JS插件/库
- 1.5 Vue
- 1.6 React
- 1.7 Nodejs和构建
- 1.8 Hybird和跨端
- 1.9 辅助工具
- 1.10 测试、安全及加密
- 1.11 AI人工智能库
- 1.12 IDE插件
- 1.13 生活篇
注：一些选型可以考虑先问 chatGPT / Claude，然后根据整理判断（chatGPT选型能力目前还一般，检索还是可以的）
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 | bulma.css | CSS3动画库。 |
| Hover.css | Hover.css | PC鼠标hover交互动画库。 |
| bulma.css | bulma.css | 一款轻量级的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集合。 |
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精度处理库。 |
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 | grcode-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、小程序跨平台的 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。 |
视/音频
| 地址 | 标签 | 说明 |
|---|---|---|
| MediaElement.js | mediaelementjs | 一款视频控制插件。 |
| video.js | videojs | 一款视频控制插件。 |
| flv.js | flvjs | 一款无需flash的flv播放插件。 |
| howler.js | howlerjs | 视、音频控制插件。 |
| jplayer | jplayer | jQuery的视、音频控制插件。 |
| audio5.js | audio5js | 一款音频控制插件。 |
图片
| 地址 | 标签 | 说明 |
|---|---|---|
| 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键盘。 |
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的渲染器。 |
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组件。 |
| Quark | quark | 基于 Web Components 的移动端跨框架 UI 组件库，哈啰。 |
| 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。 |
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骨架屏插件。 |
| 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 | 服务于对话领域的解决方案（前端组件），阿里。 |
| 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 库，处理了请求缓存、状态等等。 |
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 的模块工具。 |
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进程管理。 |
| 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。 |
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 | pwd | 渐进式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还流畅一点。 |
| CodeGeeX | CodeGeeX | 用于平替Copilot的编程助手，AI、免费。 |
| stackoverflow.com | stackoverflow | 技术问题排忧解难的友好社区。 |
| bundlephobia.com | bundlephobia | 分析npm软件包的体积和加载性能的网站。 |
| npmgraph | npmgraph | 分析npm软件包依赖关系的工具网站。 |
| Ts声明文件查询 | joi | 各类库的TypeScript声明文件查询网站。 |
| 正则表达式30分钟 | regexp | 正则上手教程。 |
| 在线正则验证 | regexper | 可视化在线正则验证网站。 |
| 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 | 识别图片上的字体不过限于英文字体，需要注册。 |
| 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 | 用于密码散列处理的库。 |
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人工智能库
| 地址 | 标签 | 说明 |
|---|---|---|
| LangChain | langchain | 著名的大语言模型集成工具，供了一套工具、组件和接口，可简化构建高级语言模型应用程序的过程 |
| Auto-GPT | autoGPT | 预训练语言生成模型，可以自动完成摘要生成、推荐系统和对话生成等任务， |
| AgentGPT | agentGPT | 基于语言模型的人工代理，可以根据特定场景的要求，生成合适的回答 |
| TensorFlowJS | tensorflow | 在浏览器或Node.js下构建和运行机器学习和深度学习模式的库 |
| OpenAI Nodejs | openai | OpenAI 的 Nodejs API 调用封装库 |
| OpenAI node quick start | openai | OpenAI Nodejs的起步文档及案例 |
| Whisper | whisper | OpenAI 语音识别模型（转文字） |
| awesome chatGPT | chatgpt | chatGPT/GPT3 工具、demo及文档集合 |
| awesome chatGPT prompts | chatgpt | chatGPT问答训练实践集合 |
| pipcook | pipcook | 对web开发者友好的机器学习工具集，阿里 |
| ml-distance | ml-distance | 计算向量之间的距离或相似度，可用于Embeddings处理 |
| Prompt Prefect | prompt-prefect | 一个优化Prompt的在线工具 |
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.14 生活篇
| 地址 | 标签 | 说明 |
|---|---|---|
| HowToCook | HowToCook | 程序员在家做饭方法指南。 |
| HowToLiveLonger | HowToLiveLonger | 程序员延寿指南。 |
2.fe-tools方法/工具库
2.1 utils说明
前端开发常用的通用工具方法，适用于浏览器/Nodejs。文档见https://blog.michealwayne.cn/fe-tools/stable/
模块
- 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 fe-templates 一些前端项目模版
- webpack
- webpack + ts
- vite + vue3
- vue2
- vite + react 17
- react16
2.3 styles基础样式库
请移至 CSS 推荐规范MooCSS及通用样式库moo-css-base npm，moo-css-base github
FE-Tools - Chrome插件
具体项目及源码地址：https://github.com/MichealWayne/fe-tools-chrome-plugin
辅助前端开发的一个小插件。
功能：
- 工具网站搜索（
√） - 本地收藏夹网站搜索（
√） - CSS属性/Moo-CSS搜索（
√） - url转二维码及svg矢量图（
√） - 图片压缩及转base64（
√） - px/rem/vw换算计算器（
√） - rgb/hsb/hex色值换算（
√） - 快速翻译（
√） - 简易Postman（
√） - 常用正则查询（
√） - 工具函数库搜索
- 搜索自定义拓展
安装方式
clone本仓库到本地，在“扩展程序”界面点击“加载已解压的拓展程序”选择本地仓库目录下的chrome-extension目录。
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签
