实用工具

录制

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

GraphQL

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

工具

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

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 分支信息提示

开发常用软件

• 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