前端工具字典，为你开发路上披荆斩棘

最新推荐文章于 2024-07-07 05:00:00 发布

置顶 Zero L

最新推荐文章于 2024-07-07 05:00:00 发布

阅读量1k

点赞数 1

分类专栏：工具类文章标签：前端工具

原文链接：https://juejin.im/post/5d3ace766fb9a07f0a2e2739#heading-17

版权

工具类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

路漫漫其修远兮，吾将上下而求索~
此文为转载文章，已获得作者同意

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

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

技术库

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 中文文档
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 - 无数的资源在等着你探索，追标准和新特性肯定得重点关注的网站。
极客时间 - 知识付费。较热门的方向都有非常干货的课程，目前大多数的课程不太适合小白，但是非常适合有经验的程序员进阶。

辅助工具/软件

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 图片

持续更新中

Zero L

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
前端工具字典，为你开发路上披荆斩棘

路漫漫其修远兮，吾将上下而求索~此文为转载文章，原文地址：https://juejin.im/post/5d3ace766fb9a07f0a2e2739主要是为了帮助大家搜集一下前端开发中要用到的一些东西，打造一个前端开发工具字典，方便大家查阅。篇幅比较长，先给大家放一张脑图，看看自己的兴趣在哪，或者说自己需要补充哪方面的，可以从右边的导航栏查看，也可以直接打开我做的工具网站查看，分级明...
复制链接

扫一扫