前端文档和技术汇总

前端中文文档

::: cardList 4

- name: Alpine
  desc: 响应式声明式
  link: https://www.alpinejs.cn/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Angular
  desc: 优秀JS框架
  link: https://angular.cn/docs
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Ant 
  desc: 中台前端
  link: https://pro.ant.design/zh-CN/docs/overview/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Babel
  desc: JS 编译器
  link: https://www.babeljs.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'  
- name: Bootstrap
  desc: CSS 流行框架
  link: https://www.bootcss.com/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Docusaurus
  desc: 静态站点生成器
  link: https://www.docusaurus.cn/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Electron
  desc: 前端跨平台框架
  link: https://www.electronjs.org/docs/latest
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: ElementUI
  desc: Vue组件库
  link: https://element-plus.gitee.io/zh-CN/guide/design.html
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: ESLint 
  desc: JS代码检查工具
  link: https://cn.eslint.org/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)  
- name: Gulp
  desc: 自动化构建工具
 # avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
  link: https://www.gulpjs.com.cn/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Lerna
  desc: 管理工具
  link: https://www.lernajs.cn/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: LESS
  desc: CSS赋予动态语言
  link: https://less.bootcss.com/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Lodash
  desc: JS工具库
  link: https://www.lodashjs.com/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Markdown
  desc: 轻量级标记语言
  link: https://www.markdown.xyz/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)  
- name: MDN
  desc: 全球性权威
  link: https://developer.mozilla.org/zh-CN/docs/Learn
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: MDX
  desc: MD中编写JSX
  link: https://www.mdxjs.cn/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)  
- name: Next
  desc: 轻量React框架
  link: https://www.nextjs.cn/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)  
- name: NPM 
  desc: 包管理工具
  link: https://www.npmjs.cn/
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: Nuxt
  desc: 基于Vue框架
  link: https://www.nuxtjs.cn/
  bgColor: '#718971'
  textColor: '#fff'
- name: Parcel
  desc: Web打包工具
  link: https://www.parceljs.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: pnpm
  desc: 包管理工具
  link: https://www.pnpm.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: Preact
  desc: React轻量替代方案
  link: https://www.preactjs.com.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: PurgeCss
  desc: CSS管理工具
  link: https://www.purgecss.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: React
  desc: 构建用户界面
  link: https://react.docschina.org/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: Recoil
  desc: React状态管理库
  link: https://www.recoiljs.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: Redux
  desc: JS状态管理
  link: https://www.reduxjs.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: Rollup
  desc: 模块打包工具
  link: https://www.rollupjs.com/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: Sass
  desc: CSS扩展语言解析器
  link: https://www.sasscss.com/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: Svelte
  desc: 构建Web
  link: https://www.sveltejs.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: Tailwind CSS
  desc: CSS框架
  link: https://www.tailwindcss.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: TypeScript
  desc: 微软出品
  link: https://typescript.bootcss.com/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: ViewUI
  desc: Vue 组件库
  link: https://www.iviewui.com/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: Vue
  desc: 渐进式JS框架
  link: https://v3.cn.vuejs.org/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: WebPack
  desc: 模块化管理打包工具
  link: https://www.webpackjs.com/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: Yarn
  desc: 依赖管理工具
  link: https://yarn.bootcss.com/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
- name: Yarn v2
  desc: 依赖管理工具
  link: https://www.yarnpkg.cn/
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'

:::

前端常用

• 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
• sanitize-html html 过滤库，防 xss
• DOMPurify 比 sanitize-html 更轻量，建议一般业务用这个

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 前端性能优化工具集合
• https://github.com/artf/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

• 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 标签，如输入<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

编辑器和 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

常看的网站

• overreacted react Dan 的个人博客，更新频率很高（redux 作者，react 核心开发）
• DailyJS
• codeburst
• 阮一峰的网络日志 阮老师出的东西还是值得一读的
• InfoQ 文章的质量比一般网站的高不少
• 鱼塘 划水网站 收集了很多网站 当天热门文章
• 每日时报 定期会分享一些库和工具
• awesome-f2e-libs sorrycc 整理的个人关注使用的前端库

Github

• github 短域名服务
• shields Github README 里面的装逼小图标
• Emoji 方便平时写查找 emoji
• emoji.muan 同上 而且更全
• git-awards github ranking 没事可以查着玩玩
• http://githubrank.com/ github 按照 followers 排名
• github-rank同上，githubrank 基本算挂了已经，只能用这个新的
• star-history 展示一个项目 Stars 增长规矩曲线
• probot 基于 github 做一个小机器人。可以做很多 workflow 的事情

开发

• 产品/设计师/独立开发者的资源库 很全很强大
• can i use 前端常用网站了 查看不同属性和方法的兼容性
• Squoosh 谷歌出品在线免费图片压缩工具 神器
• codesandbox-client - 在线 web 开发容器
• astexplorer - 一个在线 ast 生成器
• 30 seconds of code 收集了许多有用的代码小片段
• zeplin 前端和设计师神器，有标注、Style Guide、版本管理、简单的团队协作，重点是前端不用写 css 了，复制就可以了。
• iconfont 阿里出的图标库，非常实用，支持 svg、font、png 多种格式，基本现在所有图标都在上面找。
• cssicon 所有的 icon 都是纯 css 画的 缺点：icon 不够多
• 智图 腾讯出品 在线图片压缩 支持转成 webP 处理静态图片时候很好用
• picdiet 另一个图片压缩网站
• CSS triangle generator 帮你快速用 css 做出三角形
• cssarrowplease 帮你做对话框三角的
• clippy 在线帮你使用 css clip-path 做出各种形状的图形
• Regular Expressions 在线正则网站
• jex 正则可视化网站，配合上面的 Regular Expressions，写正则方便很多
• jsfiddle 在线运行代码网站 很不错，可惜要翻墙
• codepan 在线运行代码网站 不用翻墙，可以自己部署
• fiddle.md 一个方便的在线共享 markdown 在线笔试题一般都用这个
• jsdelivr cdn 服务
• unpkg cdn 服务
• coderpad 远程面试的神器，可以让面试者远程写代码 不过需要翻墙
• icode 有赞团队出品的 coderpad 可以互补，它不需要翻墙
• codeadvice 又一个让面试者远程写代码的网址
• snipper 一个代码协同的网站。你新建一个代码片段，然后把网址分享给其他人，就可以看到他们的实时编辑。
• codesandbox 一个可以在线编辑且提供在线 demo 的网站 支持 vue react angular 多种框架 神器
• codrops 上面的交互都非常酷炫
• bgremover 在线图片去底工具
• photopea 一个网页端 Photoshop 很变态
• bestofjs 查看一个项目增长经历，Star 数变化的网站，辅助你判断这个库的质量
• stackblitz 一款在线 IDE,主要面向 Web 开发者,移植了很多 VS Code 的特性与功能
• **programmingfonts.org ** 一个专门介绍编程字体的网站
• 早报 一个个人开发者的前端开发的分享日报
• emoji-search 帮你快速找到能表达你情感的 emoji
• gitmoji 通过 emoji 表达 git 的操作内容
• starcharts 可以把你一个项目的 stars 增长轨迹当做 svg 放在 readme 中
• mockapi 一个还不错的在线 mock 服务（可在线可视化编辑），可以满足大部分简单需求了
• coder 在线版 VS Code
• browserstack 远程调整各种版本浏览器 兼容性问题
• carbon 根据代码块生成图片 主要作用是让你打代码片段分享的时候更好看一点
• clipboard2markdown 将你所有复制进去的内容都转化为 markdown
• grammarly 英语写作检查工具
• quickchart 通过 URL 生成图表的开源服务
• hipdf 一站式在线 PDF 解决方案
• whimsical 画路程图
• Lorem Picsum 提供免费的占位图
• sm.ms 免费图床
• webpagetest 前端性能分析工具
• 网络安全的教程
• Ananas Analytics Desktop 一站式 数据可视化
• “零宽” 长度的短网址服务 利用“零宽字符”来缩短 url，还支持统计
• hotjar 用户调研 支持用户反馈 录屏 heatMap
• 狼叔：如何正确的学习 Node.js
• 独角兽公司榜单 感觉大家想去大公司的时候，可以看看排名
• 中国传统颜色手册
• coderlane 远程视频面试，目前使用的是牛客，这个工具待考察
• excalidraw 手绘风格流程图，强推
• cwim Count Words Inside a Markdown file 统计字数和预期阅读时间

设计

• uimovement 能从这个网站找到不少动画交互的灵感
• awwwards是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
• dribbble 经常能在上面找到很多有创意好看的 gif 或者图片，基本上我所有的图都是上面招的
• Bēhance dribbble 是设计师的微博，Bēhance 是设计师的博客
• Logojoy 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
• brandmark 另一个在线制作 logo 网站
• instant 又一个 logo 制作网站
• logo-maker 又一个 logo 制作网站 这个更简单点 就是选模板之后微调
• coolors 帮你在线配色的网站 你能找到不少配色灵感
• colorhunt 另一个配色网站
• uigradients 渐变色网站
• designcap 在线海报设计
• Flat UI 色表 Flat UI 色表
• 0to255 颜色梯度
• Ikonate 提供免费的图标 icons
• remixicon 又一个提供免费图标 icons
• feather 免费的 icons
• **nord ** 北欧性冷淡风主题配色
• Unsplash 提供免费的高清图片
• colorkitty 从你的图片中提取配色
• design.youzan 有赞设计原则
• undraw 一个免费的插图网站，可以在上面寻找合适的插图，用于商业用途。

有趣

• 帮你百度一下 可以 点我测试一下**-
• 国际版 同帮我百度一下-点我测试一下**-
• wallhaven 壁纸网站-
• URL 地址播放 Emojis 动画 在地址栏里面播放 emoji
• Can't Unsee 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样
• ggtalk 平时一直在听的一个技术博客
• awesome-comment 里面收集了很多有趣的代码注释
• text-img 都将图片转化为 ascii 用来写注释
• weird-fonts 将普通字母转化为 特殊 unicode
• snake 在地址栏里面玩贪吃蛇
• zero-width-lib 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配，很有创意
• abbreviations 查看一个简写是什么意思的网站
• magi ai 搜索神器，超屌
• 诺基亚短信图片生成器

交互

• 微交互 里面收集了市面上很多很好的微交互例子 值得学习
• Little Big Details 同上，一个国外微交互汇集网站
• cruip 登录页的各种页面设计，可以免费下载模板
• Comixify 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。
• taiko-web 太鼓达人网页版 只能说很 6

Css

• css-tricks 一个学习 css 不错的网站 有很多有意思的 demo

教程

• npx 教你怎么合理的使用 npx
• hacksplaining 网络安全学习网站
• mobile-web-best-practice 移动 web 最佳实践
• vanillawebprojects 通过纯前端的手段实现一些小项目，适合入门
• Think Python 还不错的 Python 入门教程
• Node.js CLI Apps Best Practices 叫你如何写好一个 node cli 工具
• SQL Murder Mystery 一个英文的 SQL 初级教程，以游戏的方式，让你利用学到的 SQL 概念和命令来找出谋杀凶手
• html-dom 一些常用的 dom 或者原生 js 操作判断，挺实用的
• TypeScript TypeScript 入门教程，很不错，推荐初学者学习
• Webpack 知识图谱 webpack 相关教程和原理分析还不错

产品

• 产品大牛 什么有很多完整的产品原型可以借鉴
• 磨刀 快速出 ui 原型

实用

• 写作猫 可以通过 AI 的方式，帮你检查错别字，很有效的一个工具
• draw 在线 web 画流程图
• typeform 一个国外的在线调查问卷网站
• VideoFk VideoFk 视频在线解析下载
• 全历史 历史内容聚合网站
• UzerMe 云端办公工具
• SoBooks 强大的电子书资源网站
• 稿定设计 键式设计工具+智能抠图
• pichance 一个将低分辨率图片增强为高分辨率的工具，可以将分辨率增加 4 倍（即长和宽各增加一倍）
• bigjpg 放大图片的神器 通过神经网络可以放大图片并能降噪
• 大力盘 百度网盘搜索
• ENFI 下载器 不限速下载器
• 来画视频 像做 PPT 一样做短视频
• Arkie 海报制作工具
• 优品 PPT
• 比格 PPT
• 高清免费图片
• 高清免费图片 2
• 历史价格查询 淘宝，京东等商品历史价格，能更清晰了解商家的活动是否为虚假促销以及促销的力度。神器
• Firefox Send 文件分享服务，下载一次或者到期即焚，在当前网络监管下很实用的服务
• time.graphics 在线 milestone timeline 生成器
• processon 免费在线作图，支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等
• 龙轩导航 一个总结了不少实用网站的导航

生活

• Cook 居家烧饭神器，智能根据配菜生成菜谱还附带教学视频

Talk

• peerigon-talks 收集了不少有意思的 talks

算法

• leetcode 用 js 刷 leetcode

Typescript

• TypeScript 入门教程 推荐阅读
• 深入理解 TypeScript 深入理解 ts