工具库/插件

前端开发

• sweetalert2 - 一个自适应，且自定义性强的弹出框（零依赖）
• tippy.js - The complete tooltip, popover, dropdown, and menu solution for the web
• text-mask - 可以让 input 按照规则输入(如电话,email,日期,信用卡等)，特殊格式 input
• dinero.js - 用来创建、计算和格式化货币价值的不可变的框架，支持国际化
• lerna - 大项目版本控制工具，项目中可以有多个 package.json 文件
• img-2 - 一个提高图片加载性能和体验的库，懒加载使用 web worker 模糊预览
• fingerprintjs - 是一个快速的浏览器指纹库，通浏览环境的一系列配置生成 id
• ajv - 一个 json schema 验证的库
• dayjs - 一个轻量级类 moment.js API 时间库
• primjs - 让页面支持代码高亮
• ReLaXed - 一个将 document html 转成 PDF 的工具
• uppy - 一个很好看的也很好用的 前端上传库
• Filepond - 一个小巧的文件上传库
• tui-calendar - 功能全面的日程安排日历控件，还支持拖拽
• tui.editor - markdown 所见即所得编辑器
• tabler - 基于 Bootstrap 4 的 Dashboard UI Kit 和美观 高颜值 ui 模板
• pulltorefresh.js - 下个下拉刷新插件
• lulu - 腾讯阅文基于 jQuery，针对 PC 网站 IE8+（peak 主题）的前端 UI 框架
• chancejs - 生成随机数据的库
• spritejs - 360 奇舞团出的跨平台绘图对象模型
• tui.image-editor - 一个功能齐全的在线图片编辑，基于 canvas
• nanoid - 前端轻量 unique string ID 生成库
• rxdb - 一款开源的快速、灵活的客户端数据库，支持各种浏览器以及 NodeJS，Electron、React 等等，是 PouthDB 之上的一个封装库
• percollate - 命令行工具 能将网页转换成 pdf
• rawact - 一个 babel 插件，把 react 组件转为原生 dom
• irondb - 是一个浏览器 key-value 储存的封装库，把 Cookies、IndexedDB、LocalStorage、SessionStorage 统一成一个接口。它的最大特色就是数据冗余机制，即使某种底层储存机制失效，它可以从其他机制恢复数据。
• big.js - 解决 js 浮点数问题。 主要就是 Big Number 或者小数点问题
• bignumber.js - 同上
• stickybits - CSS 的 position: sticky 是一个很有用的设置，但是老的浏览器不支持。这个 JS 库是该功能的垫片库。
• react-jsonschema-form - Mozilla service 开源了一个通过 JSON 直接生成表单的 React 组件
• cleave.js - 用于在输入时格式化输入内容（信用卡格式、日期等）
• shiny - 在手机设备上模拟光的反射效果。 支持 DeviceMotion 事件
• cloudquery - Turn any website to serverless API
• A-Programmers-Guide-to-English - 专为程序员编写的英语学习指南。
• rrweb - 一个可以记录你页面中所有操作的库
• nodeppt - markdown 写 ppt
• flexsearch - 能让你更加高效和快速的检索文本内容
• public-apis - 汇集了市面上一些对外免费开放的 api，做一些自己练手 app 的时候很好用。
• scroll-hint - 用于提示用户页面可以左右滑动的一个提示库
• fuse.js - 轻量级前端模糊查询库 非常的好用
• FileSaver.js - 文件下载插件 很多时候下载会有兼容性问题，它能帮你解决这些问题
• instant.page - 一个判断用户行为 预测提前加载页面的库
• screenfull.js - 浏览器全屏插件 解决了不少兼容性问题
• VuePress - 本网站就是基于它实现的，简单方便的静态网站生成器
• selection - 可视化选择页面元素的库
• scroll-out - 滚动效果（滚动视差）的框架，框架大小不到 1KB,使用回调的方式将相关动画元素的属性进行实时分配
• gpu.js - 通过将 js 转为特定的 language，利用 GPU 来执行，大大提高了执行性能和速度
• pressure - 前端实现 3D Touch
• hammer - 移动端手势库
• AlloyFinger - 腾讯出的手势库
• lowdb - LowDB 是一个本地 JSON 数据库，基于 Lodash 开发的
• JSON-server - 可以配合 LowDB 使用 快速搭建一个 REST API
• lunr.js - 是个用于浏览器的轻量级 JavaScript 全文搜索引擎,对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索
• he - 一个前端 encoder/decoder 库
• grade - 一个可以根据你的 图片 调整底色的插件
• pretty-bytes - 将字节转换成可以读的字符串，比如 1337 个字节，会显示成 1.34 KB
• runkit - 一个基于 node 的在线 playground
• chart.xkcd - 手绘风格的图表库
• sketchviz - 手绘风格流程图
• pagemap - Mini map for web pages 页面导航图
• commonmark.js - parser and renderer markdown
• body-scroll-lock - 解决滚动穿透问题
• lodash - 前端工具函数集合
• dayjs - 时间处理库，不过大部分情况下我还是用自己的封装的函数
• lightgallery - 图片预览组件
• photoswipe - 图片预览组件，支持移动端
• darken - 页面黑夜模式切换
• mitt - 轻量级 pub/sub
• sanitize-html - html 过滤库，防 xss
• DOMPurify - 比 sanitize-html 更轻量，建议一般业务用这个
• mescroll - 精致的下拉刷新和上拉加载js框架

CSS样式和动画

• animate.css - 最有名的动画效果库
• magic.css - css 动画效果库 类似 animate.css
• popmotion - 一个函数式声明前端动画库
• NES.css - 任天堂主题风格 css 库
• particles.js - 前端实现颗粒粒子的动画效果库，比较炫酷，但相对的也比较吃性能
• PaperCSS - 手绘风格感觉 css 库
• rough - 基于 Canvas 的手绘风格图形库
• wired-elements - 基于 rough.js 分装 button input radio 等组件。它的底层是 Web components
• roughViz - rough 风格的图表库 手绘风格的图表库
• matter-js - web 物理引擎
• micron - 通过在元素上绑定属性从而实现动画效果的库
• direction-reveal - 根据鼠标进入位置，展现从不同方向 展现 hover 效果
• laxxx - 滚动特效库 轻量级 压缩完 2kb
• cssfx - 优雅的 CSS 动画效果，开箱即用
• zdog - 3D engine 引擎
• leonsans - 酷炫的 字体 动画 geometric sans-serif typeface made with code
• css-doodle - A web component for drawing patterns with CSS 一个用于使用 CSS 绘制图案的 Web 组件

Vue

• vue-multiselect - select 组件 目前 vue 里面用过最好用的
• Vue.Draggable - DnD 拖拽组件 基于 Sortable.js 的 vue 版本
• vue-sauce - 一个可以展示 vue 源码的指令
• vue-smooth-dnd - Vue wrappers components for smooth-dnd
• vuegg - 一个 vue 可视化拖拽界面生成器
• vee-validate - 基于 vue 的验证，能验证的内容比较全
• vuesax - 一个很漂亮的基于 vue 的 ui 框架
• vue-analytics - 基于 vue 的 谷歌统计封装
• vue-virtual-scroller - 基于 vue 的虚拟列表无限滚动
• vue-content-placeholders - 页面龙骨 skeleton
• buefy - 适配移动端的 vue 组件库 看着还挺舒服的
• vxe-tablevue 表格解决方案，还没具体用过看着的确解决了其它 table 组件的一些问题
• Vue 测试指南 - vue 测试指南

实践练习

• Jasonette - 一个用 json 来构建 hybrid App 的框架
• crate - 一个 react 全栈练习(pc,mobile,rn,api) - demo，适合入门拿来练手
• react-in-patterns - 一本开源教你如何写 react 的书
• hocs - react 相关 hoc 收集库

文档工具

• vuepress - vue 官方出品的文档工具
• docsify - 轻量级文档工具，但其是运行时编译的，所以 seo 不好
• GitBook - 除了编译慢没啥毛病
• mdx - jsx + markdown
• docz
• storybook

小工具

• live-server - 可以快速启一个本地 dev 服务 并且支持自动刷新的 http server
• serve - 快速起本地静态服务
• picojs - js 人脸识别库
• es-checker - 检查当前环境对 ES6 支持的情况。支持浏览器和 node.js
• merge-images - 图片合成，利用canvas能将几张图片合成一张
• fabric.js - 基于 canvas 创建交互式的图片编辑界面非常适合用来做图片合成类工作。
• phaser - 这是一个为桌面和移动浏览器开发 HTML5 游戏的快速开源框架。 你可以为 iOS、 Android 和不同的本地应用程序创建游戏。
• purifycss - 移除没使用到的 css
• dropcss - 同上
• fast-cli - 命令行测试下载上传速度
• @pika/web - 让你不需要在本地 webpack 中 import，直接在游览器里面运行 npm 包
• pinyin - 汉字拼音转换工具
• JavaScript Obfuscator Tool - js 代码混淆工具
• tesseract - 图像识别，它能识别图片中的文字，支持中文
• gka - 一款高效、高性能的帧动画生成工具。只需一行命令，快速图片优化、生成动画文件，支持效果预览。
• recast - 前端 ast 库
• jscodeshift - 将 js 内容解析成 AST 语法树，然后提供一些便利的操作接口，方便我们对各个节点进行更改
• stats.js - 前端性能监控 如 FPS、内存使用情况等
• PapaParse - 解析 csv excel
• mddir - 生成 markdown file/folder structure 目录结构 tree
• imagemin - 图片压缩库
• inline-css - css covert to inline style 在生成 email 格式 html 的时候特别有用
• babel-plugin-try-catch-error-report - 全局自动 catch 错误进行数据上报
• StreamSaver.js - 大文件下载，不用像 saveAs 那样先读到内存中再下载
• mammoth.js - Convert Word documents (.docx files) - to HTML
• npkill - 列出所有 node_modules，并支持删除
• strapi - 开源的解决方案来创建、部署和管理自己的 API，通过图形化界面进行操作

Node

工具库

• cheerio - 用类 jQuery 语法处理 HTML
• node-semver - node 版本验证库
• live-server - 一个简单的 http server 带有 reload 功能
• node-portfinder - 一个端口嗅探工具
• update-notifiernode 依赖升级提醒工具
• fastscan - node 敏感词库
• hygen - 快速方便的创建代码 可以命令行创建预设的 template
• plop - 同上，代码生成工具
• ink - 是一个 React 的命令行渲染器，命令行界面可以像写页面那么写了
• dotenv - 通过.env 设置环境部变量 vue-cli 也依赖它
• patch-package - 优雅的修改 node_modules 中的依赖库
• Playwright - 同 Puppeteer 团队出品，但区别是它支持 Chrome、Safari、Firefox、Edge
• tree-cli - node 根据目录结构生成 tree
• tree-node-cli - node 根据目录结构生成 tree
• open - node 打开浏览器

命令行

• signale - 一个 Node 的日志格式库，自带 16 个级别，可以定制颜色和 Emoji，可扩展的日志记录器
• consola - 优雅的命令行 console logger vuepress 也使用了它
• chalk - 命令行着色美化库
• progress-estimator - 命令行 progress bar 进度条模拟库
• ora - Elegant terminal spinner 命令行 loading
• listr - Terminal task 命令行任务列表
• yargs - 命令行参数解析
• y18n - yargs 基于 i18n 的一个包
• commander.js - 自动的解析命令和参数，合并多选项，处理短参，等等，功能强大，上手简单
• Inquirer.js - A collection of common interactive command line user interfaces. 命令行询问库
• enquirer - 命令行 prompt 询问库，写 cli 的时候很有用
• Qoa - 同上
• cli-progress - Terminal Progress Bar
• cli-table - tables for the CLI
• node-notifier - 在 NodeJS 环境中，可以很方便的唤起 notifier 通知

文件处理

• rimraf - 删除文件
• globby - 用于模式匹配目录文件
• glob - 文件查找
• tiny-glob - 文件查找
• chokidar - node 监听文件变化的库
• fs-extra - fs-extra 模块是系统 fs 模块的扩展，提供了更多便利的 API，并继承了 fs 模块的 API
• execa - 比 child_process 好用，返回 Promise
• npm-run-all - 一个 CLI 工具可以并行或者串行执行 script 指令
• memfs - memory-fs 的替代品，将文件放在内存中优化读写，webpack 依赖

调试

• fx - 命令行优化 JSON 输出
• dumper.js - 能让你的 node console 更加的规整，方便调试
• ndb - node 调试
• why-is-node-running - 查看 node 为什么在运行
• siege - 压测工具
• node-in-debugging - node.js 调试指南
• node-best-practices - node 最佳实践
• Node.js 最佳实践

GraphQL

• prisma - 让前端也能快速的写出
• Apollo GraphQL - 是基于 GraphQL 的全栈解决方案集合。从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便
• dataloader - 解决 Graphql 中的 N+1 查询问题

Webpack

• webpackbar - webpack 打包进度条
• jarvis - webpack dashboard
• webpack-chain - 通过 chain 风格 api 的方式修改 webpack 配置
• speed-measure-webpack-plugin - 统计 webpack 各阶段的耗时
• obsolete-webpack-plugin - 基于 browserslist 做浏览器升级提示
• mini-css-extract-plugin - 提取 CSS 为单独文件
• copy-webpack-plugin - 复制额外的文件到输出目录
• duplicate-package-checker-webpack-plugin - 检查是否存在重复依赖
• cssnano - CSS 压缩
• bundle-buddy - webpack bundle 依赖分析

移动端

• fastclick - 解决移动端一些点击问题

性能优化

• workbox - PWA 方案，Google 出品

请求处理

• axios - 目前最常见的请求库
• got - http 请求库 如果你觉得 request 太多的话 这是一个不错的选择
• request - 老牌请求库
• whatwg-fetch - fetch 请求库
• grpc-web - 前端直连 gRPC 服务
• node-fetch - node 环境下轻量级 fetch 请求库
• reqwest

工程化

• lerna - monorepo 管理
• lerna-changelog - 为 lerna 项目自动生成 changelog
• eslint - JS 风格约束
• eslint-config-airbnb - airbnb 约束风格
• xo - 封装自 eslint
• prettier - 更主观的风格自动修改
• yeoman-generator - 脚手架工具
• serve - 本地静态服务器
• np - npm publish 辅助，自动 push、打 tag、升版本等
• lint-staged - eslint 提速，只 lint 提交的代码
• coveralls - 覆盖率
• husky - 添加 git hooks
• cross-env - 跨平台的环境变量声明
• nvm - 管理 node 版本
• concurrently - 在 npm scripts 里并行执行命令
• @zeit/ncc - 打包为 npm 包为一个文件
• npm-check - 检测依赖升级情况，我会和 yarn upgrade-interactive 配合着用，主要用来检测冗余依赖
• cpx - 复制，支持 glob，并且可以 watch
• onchange - 监听文件变动然后做一些事
• tasksfile - 在 node 中执行 script 脚本

Chrome 拓展

• Tampermonkey - 油猴 神器
• 扩展管理器 - 轻松管理扩展，就不用担心安装太多扩展了
• visbug - 它可以帮助你改变 css，移动元素等等一系类强大的功能,页面调试神器。当然有些时候还是 DevTools 更好用
• refined-github - 优化 github 默认功能和样式的 chrome 插件
• ADB - chrome 真机调试安卓神器
• Adblock Plus 免费广告拦截程序 这个应该不用说了，装机必备
• Axure RP Extension - 看原型必备
• JSON Formatter - JSON 格式化 程序员必备
• Lighthouse - 谷歌出品，检查网页综合性能评分，分析不足
• 二维码(QR 码)生成器 - 手机扫码神器
• Octotree - github 上看代码必备神器
• OctoLinker - 能在 github 上看代码的时候 快速链接跳转到依赖的库
• The Great Suspender - chrome 太吃内存了，当页面开的很多时候会很卡，它就完美的解决了这个问题。它将几分钟没浏览过的页面都挂载了，当你想看是再重新加载
• WEB 前端助手 - 支持 JSON 格式化、二维码生成与解码、代码压缩、Markdown 与 HTML 互转、网页滚动截屏、正则表达式、时间转换工具、JSON 比对工具等
• 掘金 - 目前我默认新开 tab 的默认页，可以刷刷新的文章或者项目，还不错。
• 沙拉查词 - 划词翻译插件
• npmhub在 README 下方显示 npm 依赖信息

VS Code

• Import Cost - 查看你引入的依赖模块大小
• Auto Close Tag - 自动补全 html 标签，如输入<a>将自动补全</a>
• Auto Rename Tag - 自动重命名 html 标签，如修改<a>为<b>，将自动修改结尾标签</a>为</b>
• polacode - 生产代码图片快照插件
• vscode-leetcode - 一个能让你在 vscode 中刷 LeetCode 的插件 算一个划水神器吧
• vscode-icons - VS Code 必备吧，为文件添加炫图标
• CodeSnap - 生产代码截图

主题

官方主题页 - 可以选择自己喜欢的主题 one-monokai - 我用的是这个主题，很多年了

字体

• FiraCode
• Dank Mono
• Operator Mono

开发常用软件

• Github Desktop - 管理 github 仓库的变更和 PR
• runjs - js 运行沙盒，写 test case 或者面试当场写代码的时候很有用
• Charles - 抓包用，支持 https
• Google Chrome - 前端必备没啥好说的
• ColorSnapper2 - 取色工具
• postman - api 调试工具
• Sequel Pro - MySQL 界面管理工具
• KeepingYouAwake - 可保证系统不自动休眠，挂机跑脚本很有用

有趣的玩意

• the-bread-code - 使用程序员的思维制作面包 ，比如制作中使用 A/B test, 来比较那种做法更好。
• build-your-own-x - 教你用各种语言实现 Bot Database Neural Network
• javascript-algorithms - 教你用前端知识认识各种算法
• not-paid - 如果你给人做网站，交过去以后对方没有付款，那么这个 JS 会把网站的透明度一天调低一点，直到看不见
• nsfwjs - 前端图片鉴黄，基于 Tensorflow
• elevator.js - 我很喜欢的一个库，让一个 back-to-top 的效果有了一种坐复古电梯的感觉
• app-ideas - 很多年轻人苦于缺少练手的项目，这个项目收集了不少点子，每个点子都有明确的目标和复杂资源。
• WebGL-Fluid-Simulation - 很酷的 WebGL 交互
• react-kawaii - 一个非常可爱的 React 卡通人脸库，很有意思
• chart-race-react - 图表竞赛 长条图赛跑动画 在微博或者 b 站这种类型视频很火
• 98.css - windows 98 主题分格 css