前端开发工具总结

主要是为了帮助大家搜集一下前端开发中要用到的一些东西，打造一个前端开发工具字典，方便大家查阅。

篇幅比较长，先给大家放一张脑图，看看自己的兴趣在哪，或者说自己需要补充哪方面的，可以从右边的导航栏查看，也可以直接打开我做的工具网站查看，分级明显。前端工具集~

希望大家可以对这个字典进行补充，在下方积极留言，我会及时将大家补充的添加进来，谢谢各位。

技术库

Vue

• vue的官网 - 官网怎么能少
• nuxt - Vue的SSR
• Vue-router - Vue的路由
• Vue CLI - Vue的cli，帮助你迅速搭建自己的vue项目
• Vuex - Vue的状态管理
• VuePress - 能帮助你快速搭建自己的博客
• element-ui - 饿了么出品的UI库，主要用于搭建PC网页
• iView - 另外一款搭建PC网页的UI库，越弄越好了

主要说上面一些，具体的一些vue插件可以从下面这个链接找：

• Vue插件集合

React

因为平时用react用的比较少，希望小伙伴在评论中进行补充，然后我再添加进来。

• React 官方文档
• React 中文文档
• Mobx 中文文档 - 状态管理，react和vue的都有，但是更多的被用到react中，目前很多公司都用mobx替换了redux
• Redux 中文文档 - 也是react的状态管理
• React Native 文档 - 跨端开发，目前Flutter也比较火，跨端的竞争对手
• ReactNative 学习指南 - 新玩意层出不穷... 对于能持续学习的童鞋，这是个美好的时代
• antd - 蚂蚁开源的react的UI库，用起来很舒服，不亏是用户体验部出的。目前市面上的UI库，我感觉这个说第二，没有敢说第一的吧。
• antd-pro - antd 阿里官方解决方案，拉了代码就可以用，非常方便

其他的小伙伴们补充一下吧，我后续加进来，非常感谢。

小程序

• WePY - 支持组件化的小程序开发框架
• mpvue - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系，目前支持多端小程序，如：微信，支付宝，百度
• Taro - 使用 React 的方式开发小程序的框架，同时支持生成多端应用
• chameleon - 一套代码运行多端，一端所见即多端所见
• MPX - 滴滴开源的增强型小程序框架，深度性能优化，支持跨小程序平台开发，完全兼容原生小程序组件
• uni-app - 可以兼容多端小程序，比如支付宝，微信小程序，还可以开发快应用和native

更多资源请参考微信小程序开源资源汇总

CSS

• PostCSS - 推荐大漠的文章《PostCSS深入学习》，学习完postcss之后，什么sass，less都不需要了
• Hover.css - 很多鼠标 Hover 态的效果，可以给产品学习一下
• Animate.css - CSS的动画库，我们可以把源码弄下来，然后学习一下CSS3的动画
• HINT.css - 一款非常小巧的提示框效果
• hamburgers - 简单的动画库，让 Click(or Tap) 变得美妙
• EnjoyCss - 可以自定义一些 css 样式，然后直接获取代码

跨终端

• Flutter 官方文档 - 目前比较火的跨终端开发方案，感觉会大火
• Flutter 社区中文资源 - 会有很多Flutter的开发资源
• electron - 跨终端开发，可以写桌面应用

Node

• Mongoose - 让 NodeJS 更容易操作 Mongodb 数据库
• koa - 强烈推崇，next洋葱圈的机制非常好用
• pm2 - 是一个带有负载均衡功能的 Node 应用的进程管理器
• supervisor - 监控 Node 代码，自动重启
• socket.io - 预计 Node 的实时框架 聊天室、页游等对实时性有高要求的较适用
• Mocha - Node 里最常用的测试框架
• shelljs - 写 Node 时难免需要用 shell 去操作些神马 shelljs 是基于 Node 的 shell 工具，API 及其简单

其他技术库

• webpack - 这个不用说，大家都知道
• velocity.js - 基于 js 的动画库，可以和 jquery 完美结合
• Cleave.js - 用于格式化文本框输入内容的插件
• clipboard.js - 复制内容到剪切板的插件
• hcharts - 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库
• echarts - 百度维护的图标库
• select2 - 下拉框第三方库，随着越来越多的 ui 库集成下拉菜单之后，这个基本很少用了
• datatables - 表格库

还有更多的资源，欢迎大家投稿。

技术博客

大牛博客

• 阮一峰 - ES6 教程写的真的很棒
• 技术胖 - 前端各种免费视频教学
• 张鑫旭 - 成名多年的、高产的前端大湿， CSS猛人
• 翁天信官网 - 一个辍学在家自学的天才少年，各种旅行漂亮的照片，还有他的个人介绍
• 翁天信博客 - 他的官网中可以找到他博客的地址，但是有点不显眼，所以就列出来了
• surmon - 不知道怎么称呼，但是是一个很牛 B 的人，点开博客就知道了
• 廖雪峰 - 有关于 python，JS，git 的教程
• 美团技术团队 - 新美大的技术口碑这些年做的挺好，尤其在 高可用 方面，推荐关注。
• W3Cplus - 大漠(《图解 CSS3》作者)在国内的影响力杠杠的
• 淘宝前端团队 - 内容涵盖 Web 和 Node，要深度有深度，要广度有广度
• 奇舞团博客 - 坚持是最宝贵的，别人的奇舞周刊早已经过百期了
• 大搜车前端 - 文章质量高，尤其是 Node，Vue 方向的
• 百度 FEX - 代表作 FIS、 UEditor、 WebUploader、 KityMinder
• 腾讯全端 AlloyTeam - 腾讯 Web 前端团队
• 酷壳 - CoolShell - 享受编程和技术所带来的快乐，涉及范围：Android , Bash, book, C++, CodeReview, Coding, CSS, Database, Debug, ebook, Game, Go, Google, HTML, IE, Java, Javascript, jQuery, Linux。。。
• 前端开发博客 - 汇集了很多前端有用的东西

搭建博客的工具

• VuePress - 能帮助你快速搭建自己的博客，样式还不算很那看，但是更多的可以用作搭建文档。
• jekyll：将纯文本转化为静态网站和博客。由于环境依赖的问题，所以安装起来可能稍费劲那么一点。
• hexo：快速、简洁且高效的博客框架，照着文档分分钟就可以在本地跑起来。
• Next：是hexo的一个主题。

hexo或者jekyll配合github pages 进行博客的搭建非常方便快捷，这两种方式都有不同的主题，上github上一搜一大片，hexo上手会比较快，自己的博客一开始也是用hexo+next搭建的，后续发现了jekyll比较好的一个主题，所以换成了jekyll，大家可以参考一下。

我的博客：http://www.shiyanping.top/

我自己用的主题：https://github.com/Shiyanping/Shiyanping.github.io

搭建成功后，直接写markdown，然后发布到github，就可以咯。当时还可以使用掘金当做自己的博客。

开发工具

• bootCDN - 各种开源库的 cdn 地址，加快开源库访问速度
• Awesomes.cn - 前端各种资源库，想用的这里说不定都有
• 熊猫图片压缩 - 一个压缩图片的网站，很牛，一次可以压缩 70%左右，还不失真，不过不购买的话压缩有限制，一次最多十张，每张有大小限制（忘记多大了，好像是 5M，好像是 10M）
• 淘宝 npm 镜像 - 加快 npm 包下载速度，其实更建议使用nrm，可以切换自己当前网络最快的源
• jquery 插件库 - 各种 jquery 的插件，有的需要花钱，有的不用，花钱也很便宜哦
• 时间戳格式化
• 站长工具 - 里面包含了很多有用的工具，html、css、js 压缩，解压缩。html 转 markdown，IP 地址查询
• JSON 代码高亮
• 草料二维码 - 用于根据链接生成二维码
• cubic-bezier - 用于生成贝塞尔曲线，css中可以有效地使用
• CSS icon - 使用css写的icon，可以减少iconfont和图片所占的大小，其实主要是好玩，可以研究研究怎么写的
• codepen - 在网页上快速写代码，可以免去打开编辑器去敲代码，可以解决电脑上没有 IDE，但是你想写代码的情况（那还写个毛线，?）
• Unicode 编码转换
• RGB 颜色和十六位颜色转化工具
• 石墨文档 - 可以多人协作的文档及表格
• 缩短链接 - 如果你觉得自己的链接太长，可以使用新浪的缩短链接服务，将 url 进行缩短
• 在线图片格式转换
• iconfont - 阿里维护的 iconfont 里面有很多漂亮的 icon
• 自动添加 css 前缀 - 如果没有使用 gulp 或者 webpack 等打包工具的话，为了 css 兼容，可以使用这个，css，less，scss 都可以用
• 压缩 js，css，html
• base64 加密解密
• css3 中的阴影生成工具 - 可以让 UI 根据这个去写阴影，后续直接 copy 代码出来使用即可
• 变量起名 - 帮助你解决起名字的尴尬

学习资源

学习文档

• 印记中文 - 各种中文文档，与官方文档同步
• Pro Git - git 各种命令介绍，简单实用
• 前端规范 - 由我自己维护的，主要参考腾讯的，?
• Markdown 教程 - Markdown 语法
• JSDoc - JS 注释中文文档，注释写得好有助于其他人阅读使用
• 前端面试图谱 - 前端知识，有助于复习面试基础知识

学习网站

• web 前端导航 - 由腾讯维护的 web 前端资料库，里面包含各种前端的知识
• 百度前端技术学院
• 慕课网
• 腾讯课堂
• github - 最大的同性交友网站，被微软收购之后用户数有所减少
• FreeCodeCamp - 适合刚学前端的同学学习
• codewars - 学习语言的好网站，代码战争，听着名字就很叼
• 优达学城
• MDN - 无数的资源再等着你探索，追标准和新特性肯定得重点关注的网站。
• 极客时间 - 知识付费。较热门的方向都有非常干货的课程，目前大多数的课程不太适合小白，但是非常适合有经验的程序员进阶。

推荐书籍

1. JavaScript 设计模式与开发实践 - 全面涵盖 JavaScript 设计模式，设计原则，对深入了解设计模式有帮助
2. Vue.js 实战 - 示例比较多，是 iView 作者写的
3. 你不知道的 JavaScript（上卷） - 内容写的很精髓，内容和书名很搭配
4. 你不知道的 JavaScript（中卷） - 精髓二连击
5. 你不知道的 JavaScript（下卷） - 精髓三连击
6. CSS 揭秘 - 讲 CSS 使用技巧
7. ES6 标准入门（第 3 版）
8. 编写可维护的 JavaScript - 红皮书作者写的，主要是 JS 编码规范，代码风格，写出一些让后续开发者能看懂的代码
9. 学习 JavaScript 数据结构与算法 第 2 版 - JS 常用的数据结构和算法，不是很深入，但是针对前端的同学够了
10. 图解 HTTP - 让前端人员了解 HTTP 请求，方便和后端沟通
11. 高性能 JavaScript
12. JavaScript 语言精粹
13. JavaScript 框架设计（第 2 版）
14. Node.js 实战 - 了解 Node.js，熟悉 node.js 与数据库交互，node.js 程序测试
15. SQL 必知必会 - 数据库通用语言从入门到精通
16. 用户体验要素：以用户为中心的产品设计
17. 深入 React 技术栈
18. 设计模式：可复用面向对象软件的基础

辅助工具/软件

chrome插件

• Adblock Plus：屏蔽广告专用，可以设置白名单
• JSONView：自动识别 JSON 文件进行格式化
• Wappalyzer：查看当前网页使用了哪些技术，干什么的慢慢体会吧
• WEB 前端助手：包括 JSON 格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown 与 HTML 互转、网页转为图片等，功能很强大，很适合前端
• Octotree：可以在 github 上可以生成侧边栏更易查看
• Wide Github：会将 github 内容区域变宽
• 掘金：新打开的 tab 页会出现掘金的首页，有助于学习哦
• Vue.js devtools：用于调试 vue
• React Developer Tools：用于调试 react
• CSSViewer：打开后可以吸取除 google 以外网页的元素样式
• Vimium：打开后在网页上使用 vim，F 打开
• Axure RP Extension for Chrome：前端在 chrome 上看 Axure 导出的文件
• Postman：模拟请求，很强大，还可以敲代码

Mac工具

• iTerm2 - 很强大的命令行
• Homebrew - 方便 mac 进行安装软件

Mac上有用的工具太多了，而且Mac对于开发人员来说真的是非常友好，如果有条件的话，我觉得开发还是用Mac爽，在这里就不给大家赘述Mac工具了，给大家推荐个网站，Mac的软件基本都能下载到。xclient

VSCode 插件

• Prettier - Code formatter

代码美化，快捷键（shift+option+F）,可以格式化很多格式的文件，团队的话建议在项目的目录下使用 .prettierrc 进行 prettier 的配置， .prettierrc 的优先级比编辑器的设置更高，可以让团队保持统一的代码风格，最好再配合 eslint 使用。

• npm

npm 插件可以检查 package.json 中所定义的 npm 模块与实际安装的 npm 模块是否一致。

• package.json 中定义了，但是实际未安装
• package.json 中未定义，但是实际安装了
• package.json 中定义的版本与实际安装的版本不一致

• npm Intellisense

npm Intellisense 插件会为 package.json 建立索引，这样当我 require 某个模块时，它可以自动补全。

• Git History

查看 git log

• GitLens

显示文件最近的 commit 和作者，显示当前行 commit 信息

• ESLint

ESLint 插件，这个不必多讲，配合自己的项目的 eslint 使用

• Vetur

目前比较好的 Vue 语法高亮

• Bracket Pair Colorizer

可以为代码中的匹配的括号自动着色，以不同的颜色进行区分，这样我们可以轻易地辨别某个代码块的开始与结束。

• Auto Close Tag

插件的功能非常简单，它可以自动补全 HTML/XML 的关闭标签

• Auto Import

自动去查找、分析、然后提供代码补全。对于 TypeScript 和 TSX，可以适用

• Auto Rename Tag

修改 HTML 标签时，自动修改匹配的标签

• Code Spell Checker

帮助你检查代码中的拼写错误

• Code Runner

可以在编辑器中选中部分代码段，然后运行（支持大量语言，包括 Node），但是极少数情况运行出来的结果会和浏览器不同，如果你在编辑器中使用这个功能之后，觉得答案和你想的不同，要在浏览器中再测试一下。

• Debugger for Chrome

配合 chrome 进行 debug

• jQuery Code Snippets

jquery 快捷提示，安装了之后输入 jq 就会看到很多提醒，对目前还在用 jq 的小伙伴有帮助

• language-stylus

支持 stylus

• Material Icon Theme

icon 样式，很好看

• vscode-element-helper

可以快速提示 element-ui

• open in browser

在浏览器运行当前页面，快捷键（option+B）

• Output Colorizer

控制台输出着色

• Panda Theme

一个主题，比较护眼，熊猫主题

• Path Intellisense

路径自动补充

• SVG Viewer

可以在编辑器中查看 svg 图片