Vue3 UI库/相关工具/可视化/生态全分享

1. Web UI库

1. ElementUI Plus

一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
https://element-plus.org/zh-CN/

2. Ant Design of Vue

Ant Design 的 Vue 实现，开发和服务于企业级后台产品
https://www.antdv.com/docs/vue/introduce-cn

3. BalmUI

基于谷歌的 Material Design，附带 Vue 插件和指令，以及从简单到复杂的高度可定制组件
https://next-material.balmjs.com/

4. Naive UI

图森Vue3的组件库，文档完整，我项目中经常使用
https://www.naiveui.com/zh-CN/os-theme

5. arco.design

字节跳动企业级产品设计系统，支持React和Vue双版本
https://arco.design/

6. Quasar

轻松构建高性能和高质量的Vue.js 3用户界面，好用，但没有中文文档
https://quasar.dev/

7. iDUX

Vue3.x 的 UI 组件库，完全使用 TypeScript 开发
https://idux.site/

8. TDesign

腾讯业务团队在服务业务过程中沉淀的一套企业级设计体系
https://tdesign.tencent.com/
https://tdesign.tencent.com/vue-next/overview

9. PrimeVue

易于使用、多功能、高性能的 Vue UI 组件库
https://www.primefaces.org/primevue/

10. DevUI

华为基于 Vue3 和 DevUI 设计的 UI 组件
https://vue-devui.github.io/

11. vuestic-ui

Vue 3 的免费和开源 UI 库 ,UI非常好看，并且有可用后台管理界面。
https://vuestic.dev/

12. Headless UI

完全无样式、完全可访问的 UI 组件，旨在与 Tailwind CSS 完美集成。
https://headlessui.com/

13. View UI Plus

基于 Vue.js 3 的企业级 UI 组件库和前端解决方案
https://www.iviewui.com/

2. 移动UI库

14. Vant

有赞轻量、可靠的移动端组件库
https://vant-contrib.gitee.io/vant/#/zh-CN

15. NutUI

京东风格的轻量级移动端 Vue 组件库，非常适合移动端电商使用。
https://nutui.jd.com/#/

16. Varlet

Material 风格移动端组件库 ，文档非常齐全。
https://varlet.gitee.io/varlet-ui/#/zh-CN/home

17. nutui-bingo

京东基于 NutUI 的抽奖组件库，助力营销活动和小游戏场景。
https://nutui.jd.com/bingo/#/

3. 相关工具

18. unplugin-vue-components

antfu 按需组件自动导入，开箱即用地支持 Vue 2 和 Vue 3，Tree-shakable，只注册你使用的组件，附有流行UI 库的内置解析器。
https://www.npmjs.com/package/unplugin-vue-components

19. vuex-persistedstate

在页面重新加载之间保持并重载您的 Vuex 状态
https://github.com/robinvdvleuten/vuex-persistedstate

20. vuex-persist

支持 Typescript 的Vuex插件，它能够将应用程序的状态保存到持久存储中，例如 Cookies 或 localStorage
https://championswimmer.in/vuex-persist/

21. @vueuse/gesture

手势库，使应用程序具有交互性
https://gesture.vueuse.org/

22. unplugin-auto-import

antfu 自动导入 Vite、Webpack、Rollup 和 esbuild 的 API。支持 TypeScript。
https://github.com/antfu/unplugin-auto-import

23. pinia-plugin-persistedstate

Pinia 商店的可配置持久性
https://github.com/prazdevs/pinia-plugin-persistedstate

24. https://vue-termui.dev/

一个基于 Vue.js 的终端 UI 框架，可让您轻松构建现代终端应用程序
https://vue-termui.dev/

4. 可视化

25. Pdfvuer

DF 查看器，使用 Mozilla 的 PDF.js，支持 Vue2 和 Vue3
https://arkokoley.github.io/pdfvuer/

26. vue3-marquee

无缝滚动组件
https://vue3-marquee.vercel.app/

27. Vue-ECharts

百度ECharts 的 Vue.js 组件。 配置参考Echarts官方 基于 ECharts v5+ 开发，适用于Vue.js 2/3。
https://vue-echarts.dev/

28. iconpark

字节跳动出品，将一个SVG图标转化为多个主题，并生成React图标，Vue图标，svg图标
https://iconpark.oceanengine.com/home

5. 插件

29. vue-multiselect-next

Vue.js 的通用选择/多选/标记组件
https://vue-multiselect.js.org/

30. vue-print-nb

用于印刷、简单、快速、方便、轻便的指令包装器
https://github.com/Power-kxLee/vue-print-nb

31. vue-i18n-next

Vue3的国际化插件
https://vue-i18n.intlify.dev/

32. vue-cropper

简单的vue图片裁剪插件
http://github.xyxiao.cn/vue-cropper/example/

33. Vue Grid Layout

Vue.js 的网格布局系统
https://jbaysolutions.github.io/

34. Vue Qrcode Reader

允许在不离开浏览器的情况下检测和解码二维码
https://gruhn.github.io/vue-qrcode-reader/

35. Makeit Captcha

基于 Vue3 + Vite + Canvas 开发的滑块验证码，动态生成验证滑块，结合后端的二次校验，能有效的避免被抓取模拟验证
https://admin.makeit.vip/components/captcha

36. vue3-clipboard

Vue 3 的 clipboard.js
https://github.com/soerenmartius/vue3-clipboard

37. vue.draggable

基于Sortable.js的Vue 3拖放组件
https://sortablejs.github.io/vue.draggable.next/#/simple

38. BetterScroll

解决移动端（已支持 PC）各种滚动场景需求的插件。
https://better-scroll.github.io/docs/zh-CN/

6.相关生态

39. Vue 插件库

https://www.vue365.cn/

40. Pinia

轻量级状态管理库，API 设计更接近Vuex 5的提案
https://pinia.vuejs.org/

41. Nuxt Modules

Nuxt 发现我们的模块列表以增强您的Nuxt 项目
https://modules.nuxtjs.org/

42. Nuxt 3

轻量级应用框架,可用来创建服务端渲染 (SSR) 应用
https://v3.nuxtjs.org/

43. vuepress

Vue 驱动的静态网站生成器
https://v2.vuepress.vuejs.org/zh/

44. VueUse

强大的 Vue 组合实用程序集合
https://vueuse.org/

7.动画

45. vue-starport

带有动画的跨路由共享组件
https://vue-starport.netlify.app/

46. @vueuse/motion

Vue Composables 让你的组件动起来
https://motion.vueuse.org/

8. 音视频

47. @vueuse/sound

用于播放音效的 Vue 组合
https://sound.vueuse.org/

前端常用插件 (转载)

前端常用

  • sweetalert2
    一个自适应，且自定义性强的弹出框（零依赖）
  • tippy.js
    最著名的 tooltip/popover library
  • 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

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 查询问题

工具

  • high-speed-downloader 百度网盘不限速下载 支持 Windows 和 Mac
  • hyper 前端命令行
  • yapi 是一个可本地部署的、打通前后端及 QA 的、可视化的接口管理平台
  • sway 一个微软自己出的在线 ppt 很强大
  • Ascii Art Generator 在线生成 Ascii 图案
  • Winds 开源 RSS
  • JSUI 一个用来控制管理前端项目的客户端
  • docz 让你能快速写文档的一个库
  • hiper 性能统计分析工具
  • verdaccio 私有 npm
  • git-guide git 入门指南
  • git-tips git 进阶
  • bit 实现了项目之间的代码共享 可以自建私有
  • simpread 简悦 ( SimpRead ) 让你瞬间进入沉浸式阅读的扩展
  • mkcert 一键命令 让本地也支持 https
  • termtosvg 录制 命令操作转成 svg 基于 python
  • gh-polls 可以在 github issue 中添加投票
  • eruda 移动端调试工具
  • vConsole 也是一个移动端调试工具 腾讯出品
  • terminalizer 命令行录制工具 基于 node
  • badgen 快速构建和 shields 一样的 svg badge 但速度更快
  • readability 移除页面非正文部分 基于 jsdom
  • WeChatPlugin-MacOS 一款功能强大的 macOS 版微信小助手
  • puppeteer-recorder 一个 chrome 插件 能够根据你的操作 自动生成 puppeteer 相关代码
  • mdx-deck 用 markdown 编写演示文稿
  • code-surfer 基于 mdx-deck 的一个插件 让你更好的在文稿中展示 code
  • Progressive Tooling 前端性能优化工具集合
  • grapesjs 可视化建站工具 不需要写代码就能写一个页面，前端再次再次要下岗了
  • image-charts 该服务通过 URL 接受参数，然后生成图表，以图片形式返回
  • eagle.js 一个用 vue 来制作 PPT 的库
  • Optimizely A/B Test
  • appadhoc 一个国内的 A/B Test 服务
  • glorious-demo 通过编写代码的方式构建一个命令行的演示例子
  • nginxconfig 可视化配置 nginx 提供了多个基础模板
  • bundlephobia 一个可以查看某个库的大小，并且分析它的依赖
  • jsperf 一个提供在线 test case 的网站，主要用来比较性能。可以比较如： forEach vs for 的性能
  • perflink 与 jsperf 类似的一个比较 js 性能的网站
  • algorithm-visualizer 算法代码可视化
  • An-English-Guide-for-Programmers 专为程序员编写的英语学习指南
  • Webhint 用于检查代码的可访问性、性能和安全的开源检查（Linting）工具
  • airtap 测试浏览器兼容性，可覆盖 800 多种浏览器
  • jsonstore 供免费，安全且基于 JSON 的云数据存储，自己玩的小项目神器
  • git-history 可视化查看一个文件的历史变化
  • x-spreadsheet 一个基于 Canvas 的 JS 电子表格库 excel
  • imgcook 阿里出品，一键通过设计稿生成代码
  • majestic jest 可视化
  • leon 你开源项目的 ai 个人助手
  • js-code-to-svg-flowchart 将代码逻辑用流程图的方式展现出来
  • xterm.js 一个 web terminal
  • pixelmatch diff 两张图片不一样的地方
  • readme-md-generator 一个命令行脚本帮你快速的创建一个 README
  • build-tracker 构建大小追踪 记录你多个版本构建后文件大小的变化
  • zan-proxy 本地调试线上环境的工具
  • mjml 一个让发 email 更简单的框架。定义了一套自己的语法，你用这套语法写邮件，然后编译成 HTML。
  • any-rule 正则大全
  • outline 一个免费开源的库，能让你快速搭建自己的 wiki

Webpack

备注： vue3中 webpack 被建议使用 vite - 2023-02-09

  • 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 脚本

Mac

  • get-plain-text 能清除剪贴板里的格式 很实用
  • IINA mac 平台感觉免费最好的播放器 强推
  • magnet 分屏管理
  • Xnip 方便好用的截图工具-支持截长图
  • Spectacle 窗口管理工具
  • vanilla 顶栏图标管理工具
  • Dozer 一个开源的顶栏管理
  • 腾讯电脑管家 反正我用下来好觉得蛮好用的
  • mos 鼠标平滑滚动软件，很好用。免费开源
  • sequel pro mysql 客户端 好用
  • Microsoft Remote Desktop Beta Mac 远程登录 Windows 调试神器
  • pap.er 专为 Mac 设计的壁纸应用
  • The Unarchive Mac 目前感觉最好用的免费解压软件
  • Tickeys 让你用 Mac 键盘也能打出机械键盘的感觉
  • Beaker Browser P2P 开源浏览器 支持点对点发布文件，成为了文件传输工具，支持 DAT 对等协议
  • Gifski 视频转 gif 工具
  • more 更多优秀的 mac app 介绍
  • Motrix 支持 HTTP、FTP、BT、磁力链、百度网盘的下载工具
  • iPic这个应用可以让你方便地上传图片到各种图床
  • Image2Icon
  • hidden 是用来帮助你隐藏 macOS 菜单栏上那些不常用的应用图标

录制

  • licecap gif 录制，简洁好用，之前都用这个录制
  • kap 现在都用这个录制 gif，还支持导出 mp4，录制的 fps 很高
  • KeyCastr 按键显示，录制的时候显示你的按键

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 标签，如输入将自动补全
  • Auto Rename Tag 自动重命名 html 标签，如修改为，将自动修改结尾标签为
  • polacode 生产代码图片快照插件
  • vscode-leetcode 一个能让你在 vscode 中刷 LeetCode 的插件 算一个划水神器吧
  • vscode-icons VS Code 必备吧，为文件添加炫图标
  • CodeSnap 生产代码截图

主题

字体

  • FiraCode
  • Dank Mono
  • Operator Mono

编辑器和 Terminal

  • Go2shell 在当前文件夹打开 shell
  • Terminal 用 iTerm2 + zsh + oh-my-zsh 的组合，主题是 robbyrussell

zsh 插件

  • Homebrew 必装
  • autojump 实现目录间快速跳转，想去哪个目录直接 j + 目录名，不用在频繁的 cd 了
  • zsh-autosuggestions 命令自动建议和补全
  • zsh-syntax-highlighting 命令行语法高亮
  • history 命令行记录
  • zsh-git-prompt git 分支信息提示

开发常用软件

  • 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