50 多个提高前端人效率的工具、网站和书籍整理

本文包含了在线编译,在线编辑、实用工具、可视化工具、各种前端电子书等50多个网站,快放到你的收藏夹吃灰吧

如果你看到最后了,记得给我一个免费的赞哦

在线编译(编辑)、playground

JS 代码混淆

www.jsfuck.com/[1]

f590185a9ce7ee606e6aea722663b8b1.png
http-::www.jsfuck.com:.jpg

嗯,优点是你可以用来给你的前端工程师好友搞恶作剧,缺点是只能用一次

SCSS 转 CSS 在线编译

www.sassmeister.com/[2]

681871fd38ea012765e0c1b055a91747.png
https-::www.sassmeister.com:.jpg

有时候写一些比较复杂的 SCSS 逻辑时,遇到不生效的问题,可能需要看一下编译出来的 CSS 代码是什么样的,以确认自己写的 SCSS 代码是不是有问题,在线编译可能是一种较为方便的方式

CSS 转 SCSS

www.sass.hk/css2sass/[3]

e80773368b1677a308d984d68812c59f.png
https-::www.sass.hk:css2sass:.jpg

当你重构项目时,可能有用?除了转 SCSS 还能转 Less、Stylus 等,不过转换后的风格可能跟你直接写着不一致

TypeScript PlayGround

www.typescriptlang.org/play[4]

fd43212bb8d0140c842ff025af11f322.png
https-::www.typescriptlang.org:play.jpg

Typescript 官方提供的 TypeScript 在线调试运行工具,如果你遇到了一些 TS 难题(或者一下 ts 代码的 demo),你可以到这个网站编写出你的代码,然后将链接(代码改动会经过编码后会被动态添加到当前 url 上)发给神通广大的网友们,或者你的好友们,请他们帮你解决问题

除了这个,它还能将你写的 ts 代码在线编译成 js.d.ts 等,更多的功能你去试一下就知道了

Vue PlayGround

sfc.vuejs.org/[5]

d037de6e2d1545abbd216712e0df7267.png
https-::sfc.vuejs.org:.jpg

轻量级的 vue3 playground,可以实时预览效果,实时查看编译后的 js 代码(包括 ssr 的)和提取出的 css 代码

Vue3 Template Explorer

template-explorer.vuejs.org/[6]

383394e89b41436b69e1985b27aac61c.png
https-::template-explorer.vuejs.org:.jpg

vue3 的模板解析工具,学习源码必备

Vue2 Template Explorer

v2.template-explorer.vuejs.org/[7]

ef76109ee56990afa3832a5091a27c0e.png
https-::v2.template-explorer.vuejs.org:.jpg

vue2 的模板解析工具,学习 vue3 源码的时候,可以与上面 v3 的解析工具一起结合起来看,看看变化、优化都在哪

抽象语法树解析

astexplorer.net/[8]

2ad884f3b7365103b2ab655ec6d4e988.png
https-::astexplorer.net:.jpg

js 的抽象语法树在线解析工具,能让你更好的理解 js,学习一些编译工具必备

CodeSandBox

codesandbox.io/dashboard/h…[9]

6f73e822f0e0ae62871fe646c37c7c8c.png
https-::codesandbox.io:.jpg

能快速搭建一个简单的项目,在线运行,而且速度很快(你网快的前提下),你也可以用别人的模板来新建项目,复杂的项目它也 hold 的住,不用装环境,在线撸代码,谁不爱呢

登录后云端保存项目,把链接分享给其他人就可以方便的查看,提供 api 来让你的应用拥有 在CodeSandBox中打开 的能力

免费的!

还可以搜索[10]别人的写好的 demo,你不知道一个库怎么用的时候,或有什么技巧的时候,可以来搜搜看看,既可以看代码,又可以在线实时预览,“CV 工程师必备”

CodePen

codepen.io/[11]

a0534b4d45669c0fc9b2d54def346348.png
https-::codepen.io:.jpg

支持 HTML、CSS、JS,比 codesandbox 轻量,适合写简单的 demo

babel 在线编译

babeljs.io/repl[12]

0f4b90cbf21a2d5e304e1e4434b7f5e3.png
https-::babeljs.io:repl.jpg

你可以将各种版本的 js、ts 代码转换成其他低版本的 js 代码

github1s

github1s.com/[13]

103965116f3fe99b7491d6e550b01550.png
https-::github1s.com:.jpg

在 github 代码仓库的路径的 https://github 后面加个 1s,就能用编辑器模式看源码了,比直接在 github 中看方便多了

可视化在线工具/其他在线工具

在线正则表达式可视化

jex.im/regulex[14]

207dc983074bb46f4b958f2a3f8247fe.png
https-::jex.im:regulex.jpg

遇到一个复杂的正则表达式,你多看几眼就可能会多掉几根头发,但是有了它,你就可以很好的分析出这个正则表达式的用途了

在线 Postman

需要注册哦

web.postman.co/[15]

0f1b80737caae7ded44504c199cfc998.png
https-::web.postman.co:.jpg

一直在线用一直爽

当然,有已经安装的应用就不需要了

CSS3剪贴路径(Clip-path)在线生成器工具

tools.jb51.net/code/css3pa…[16]

b1c5511f512d16f3fb9be15c66e4b51b.png
http-::tools.jb51.net:code:css3path.jpg

你想玩些花里胡哨的样式的时候必备,但是自己写是不可能自己写的,让机器生成好自己再慢慢调吧

CSS 动画

css3lib.alloyteam.com/[17]

1215cacb1b9e6091e40135929f851403.png
http-::css3lib.alloyteam.com.jpg

这个网站有一些炫酷的样式和动画效果,不过比较偏向国外的风格

Canvas 背景动画(博客可用)

jsrun.net/square/sear…[18]

8a808218f8f5e4b48d019a665e542262.png
https-::jsrun.net:square:search.jpg

你把这个里面代码粘贴出来,放到你的个人博客中,就可以实现很炫酷的背景效果了!

缺点是,一般加了这个,笔记本电脑风扇就会呼啸起来

这个网站里面还有一些其他的工具,比如下面这个

在线代码主题配色工具

jsrun.net/app/49pKp[19]

8c526e749f463b1e8cc575857dcf7bd2.png
https-::jsrun.net:app:49pKp.jpg

跟上面是同一个网站,你如果觉得自己编辑器的代码主题颜色不好看,那你可以用它来慢慢调

在线配色

colorsinspo.com/[20]

ca8eb7fbb14b2de1f3c61a12657d25e7.png
https-::colorsinspo.com:.jpg

如果你想搞一个自己的组件库,网站,不知道配色的就可以自己来配色

兼容性查询 Can I Use

caniuse.com/[21]

dacfc21011f63da394920677fc0b539a.png
https-::caniuse.com:.jpg

可以查询一个 js api 或者 css 属性的在各个浏览器的各个版本下的兼容性,里面还有 QQ 浏览器,UC 浏览器是最有趣的事

EventLoop 可视化

www.jsv9000.app/[22]

3f038adcee9c2193c41cb2d39b7ae88f.png
https-::www.jsv9000.app:.jpg

前端小白理解 EventLoop 的利器

CSS 阴影生成器

www.jq22.com/too-jq22/bo…[23]

cc68c11154f236a8fe8632a26d27bc6e.png
https-::www.jq22.com:too-jq22:boxshadow.jpg

box-shadow 是一个很神奇且有用的属性,在这个网站可以生成需要的 box-shadow 代码

JSON 转 TS 代码

www.json2ts.com/[24]

9c52ab2953cb7e037e42e99eae24c7c3.png
http-::www.json2ts.com:.jpg

十分有用,能提高你写TS代码的效率,特别是需要定义接口的返回类型时,用它就是复制粘贴了!

在线正则表达式测试

regex101.com/[25]

e55e58b8b8f50d6e78b4b7959100f492.png
https-::regex101.com:.jpg

比起用在线工具测试正则,我更习惯直接在控制台写代码测试

CSS 代码生成

www.cssmatic.com/gradient-ge…[26]

e4835ec0ceb22a61a67f047288c7772a.png
https-::www.cssmatic.com:gradient-generator.jpg

可以生成四种类型的 CSS 代码,渐变,阴影等

carbon

carbon.now.sh/[27]

6968ea36636793f22b49e25c9b3a1856.png
https-::carbon.now.sh:.jpg

让你的代码变的更美观,自己写文章或者论文都可以用这个工具来对自己的代码进行美化

框架/库/工具 文档

UI库

有赞 Vant

支持Vue3的Vant3:vant-contrib.gitee.io/vant/#/zh-CN[28]

b87e2ed4a829233be488481c9122c532.png
https-::vant-contrib.gitee.io:vant:::zh-CN.jpg

一款由有赞[29]开发的移动端组件库,目前支持 Vue2、Vue3、React,微信和支付宝小程序

这款组件库一直以来都属于比较好看的类型,其中的业务组件和有赞的业务相关,也比较契合商城(购物)类移动端应用

蚂蚁集团 Ant Design

ant.design/[30]

528e0fdc8fdb0f92fe4690172c308df8.png
https-::ant.design:.jpg

这款PC端组件库文档中的设计原则写的比较完善,并且每个组件都描述了 何时使用,让你对“组件”有更深的认识

提供的设计资源更为完善

配套的有 中台前端/设计解决方案 Ant Design Pro[31]、Ant Design Pro Components[32]、图表 Ant Design Charts[33]、和 Vue,Angular 版本的 Ant Design

Bootstrap

Bootstrap4中文文档[34]

9e562fc2506c0611bde24f0b6a3e822c.png
https-::v4.bootcss.com:.jpg

这个 UI 库来自 Twitter 的成员,但是组件比较少,特点是提供了很多工具类;需要引入 JQuery,大部分交互还是需要自己处理

  • FlatUI[35]

FlatUI 是基于 Bootstrap 开发的,样式更好看了

Layui

中文文档镜像站:www.layuiweb.com/[36]

e2c04d0ed366becd3e5075fc359d3f95.png
https-::www.layuiweb.com:.jpg

JQuery 时代很好的 UI 库,命令式 api,文档中有些示例没有预览

官网已经下线了,江湖再见,原官网(layui.com[37]

fefbf3c1b49bac0c45d1a3a643414c3a.png
https-::www.layuiweb.com.jpg
d6fbff141eddf04a71d1627b629e1da4.png
layui-github-issue.jpg
Material Design Angular

material.angular.io/[38]

基于 Angular,没用过,用过的朋友们评论一下呢

ElementUI

element.eleme.cn/#/zh-CN[39]

ada0d7d30421d305db691a1255cd9e7a.png
element.eleme.cn.jpg

出自饿了么前端团队,学 Vue 的童鞋们必用的一款 UI 库,支持 Vue2,也支持有 Angular 和 React 的版本,Element Plus[40] 支持 Vue3

semi design

semi.design/zh-CN[41]

出自字节跳动抖音前端与 UED 团队,最近刚开源不久,持续关注

Taro UI

taro-ui.jd.com/#/docs/intr…[42]

出自京东凹凸实验室,基于 Taro,是一款跨端 UI 库

Vuetify

vuetifyjs.com/zh-Hans/int…[43]

出自一家全职开源企业 Vuetify

WeUI

weui.io/[44]

微信官方的 UI 库,天天用微信的你一定很熟悉

Ant Design Mobile

mobile.ant.design/[45]

Ant Design 的手机版,旧版样式一般般,文档体验不是很好,新版样式比较好,文档更新的也好用起来了

图标库

Font Awesome 中文网

www.fontawesome.com.cn/[46]

d00fff4b5fea3ddb2d1c97b59c353006.png
http-::www.fontawesome.com.cn:.jpg
IcoMoon

icomoon.io/[47]

578b571086d0d97a6ba3f5d4d090bd9e.png
https-::icomoon.io:.jpg
iconfont

www.iconfont.cn/[48]

9c0bfb975a3dd201fb70a4659812615f.png
https-::www.iconfont.cn:.jpg
IconPark

iconpark.oceanengine.com/official[49]

1fd7c67ddb5cb7a800e54415f61106c8.png
https-::iconpark.oceanengine.com:official.jpg

JS 框架/库

Vue
  • Vue2 中文文档[50]

  • Vue3 中文文档[51]

  • Vue CLI[52]

  • Vue Devtools[53]

  • Vue Loader[54]

  • Vue Router[55]

  • Vuex[56]

  • Vue SSR[57]

  • Vite[58]

React
  • 中文文档[59]

  • React Router[60]

  • Redux[61],中文文档[62]

  • react-redux[63]

  • create-react-app[64]

  • React Native 官方文档[65]

  • React Native 中文文档[66]

Angular

angular.io/[67]

svelte

svelte.dev/[68]

Taro

taro-docs.jd.com/taro/docs[69]

京东的跨端框架,支持 Vue2、Vue3、React

uni-app

uniapp.dcloud.io/README[70]

出自 DCloud,基于 Vue 的跨端框架

Three.js
  • 中文文档[71]

  • 官方文档[72]

  • 官方在线示例[73]

D3.js

d3js.org/[74]

93938e2b12c5c077af8b622e890c467f.png
d3js.org.jpg

一款很强大的基于 SVG 的可视化图形库

Cocos

docs.cocos.com/creator/man…[75]

使用 Typescript 的跨平台游戏引擎

其他

ECMA 官方文档

tc39.es/ecma262/[76]

31b025f5c1a5c9a3afc4de607341e553.png
https-::tc39.es:ecma262:.jpg
VsCode 插件开发中文文档

liiked.github.io/VS-Code-Ext…[77]

b58218316c67433d4472ed974bdb20da.png
https-::liiked.github.io:VS-Code-Extension-Doc-ZH::.jpg
MDN Web中文技术文档

developer.mozilla.org/zh-CN/docs/…[78]

Web API 接口参考[79]

e88b96b02864dd88a885e172945c8433.png
https-::developer.mozilla.org:zh-CN:docs:Web.jpg
菜鸟教程
  • HTML 标签速查(按首字母)[80]

  • HTML 标签速查(按功能)[81]

  • CSS 属性速查[82]

  • CSS 选择器速查[83]

  • JS 参考手册[84]

W3C 参考手册

W3C 参考手册[85]

你可以在下列网站找到更多

awesome list chinese

asmcn.icopy.site/[86]

ce4e129773229f231f190d270e688cb8.png
https-::asmcn.icopy.site:.jpg
npm

npmjs.com[87]

github

github.com[88]

在线书籍/文档

《ES6标准入门》阮一峰

es6.ruanyifeng.com/[89]

64336b1ace83dd0150833909a4bfee51.png
https-::es6.ruanyifeng.com:.jpg

《浏览器工作原理与实践》

blog.poetries.top/browser-wor…[90]

66c774aad3c0431c823603e46b6dc415.png
https-::blog.poetries.top:.jpg

《深入浅出 webpack》

webpack.wuhaolin.cn/[91]

a68f59fb6f5ac5db2ad612d6fe464835.png
https-::webpack.wuhaolin.cn:.jpg

《代码随想录》

programmercarl.com/[92]

368af5111bf78c42bd34fa0624fd3768.png
https-::programmercarl.com:.jpg

《现代 JavaScript 教程》

zh.javascript.info/[93]

c57db19709def8e1204641cb0750d325.png
https-::zh.javascript.info:.jpg

《前端进阶之道》

yuchengkai.cn/[94]

952987f6b96d28cb2b919ccece52e385.png
https-::yuchengkai.cn:docs:frontend:.jpg

《React 技术揭秘》

react.iamkasong.com/[95]

203fe47826895ac97450fe632f40e540.png
https-::react.iamkasong.com:.jpg

《Vue 技术揭秘》

ustbhuangyi.github.io/vue-analysi…[96]

499bf1bbfa8aabf3583ef94b4c6fd1b5.png
https-::ustbhuangyi.github.io:.jpg

《TypeScript 入门教程》

ts.xcatliu.com/[97]

1a7143d3946f57356ebf40a74006c609.png
https-::ts.xcatliu.com:.jpg

《深入理解TypeScript》

jkchao.github.io/typescript-…[98]

180f11033869bca7b94f879cd3b78a14.png
https-::jkchao.github.io:.jpg

《You-need-to-know-css》

lhammer.cn/You-need-to…[99]

d42c791e46a4619b29f355be2911a2b3.png
https-::lhammer.cn:You-need-to-know-css.jpg

《CSS Inspiration》

chokcoco.github.io/CSS-Inspira…[100]

7030a79dd362da597dbd5fd708bf7a85.png
https-::chokcoco.github.io:CSS-Inspiration:.jpg

《Three.js教程》

www.webgl3d.cn/Three.js/[101]

434b992a309199ceda3737f9a92e211c.png
http-::www.webgl3d.cn:Three.js:.jpg

《WebGL教程》

www.webgl3d.cn/WebGL/[102]

d483018f1ac6806e08576f555bee0c3f.png
http-::www.webgl3d.cn:WebGL:.jpg

注:某些网站因为某些原因可能需要自备工具才能访问哦

本文于 2022 年 3 月 27 日在掘金首发

我的其他文章推荐:

接近天花板的TS类型体操,看懂你就能玩转TS了[103]

用一个命令行base64编码工具手把手教你怎么发布 npm 包[104]

TypeScript 的 Utility Types,你真的懂吗?[105]

TypeScript进阶, 如何避免 any[106]

如何解决 github 访问慢的问题[107]

关于本文

作者:夜尽灬天明丶

https://juejin.cn/post/7079447275755274254

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」,加入前端编程源码算法群!领取最新最热的前端算法小书、面试小书以及海量简历模板,期待与你共进步!

回复「交流」,吹吹水、聊聊技术、吐吐槽!

回复「阅读」,每日刷刷高质量好文!

如果这篇文章对你有帮助,「在看」是最大的支持

 》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值