共计 4636 个字符，预计需要花费 12 分钟才能阅读完成。
本文蕴含了在线编译，在线编辑、实用工具、可视化工具、各种前端电子书等 50 多个网站，快放到你的收藏夹吃灰吧
如果你看到最初了，记得给我一个收费的赞哦
在线编译（编辑）、playground
JS 代码混同
www.jsfuck.com/
嗯，长处是你能够用来给你的前端工程师好友搞恶作剧，毛病是只能用一次
SCSS 转 CSS 在线编译
www.sassmeister.com/
有时候写一些比较复杂的 SCSS 逻辑时，遇到不失效的问题，可能须要看一下编译进去的 CSS 代码是什么样的，以确认本人写的 SCSS 代码是不是有问题，在线编译可能是一种较为不便的形式
CSS 转 SCSS
www.sass.hk/css2sass/
当你重构我的项目时，可能有用？除了转 SCSS 还能转 Less、Stylus 等，不过转换后的格调可能跟你间接写着不统一
TypeScript PlayGround
www.typescriptlang.org/play
Typescript 官网提供的 TypeScript 在线调试运行工具，如果你遇到了一些 TS 难题（或者一下 ts 代码的 demo），你能够到这个网站编写出你的代码，而后将链接（代码改变会通过编码后会被动静增加到以后 url 上）发给神通广大的网友们，或者你的好友们，请他们帮你解决问题
除了这个，它还能将你写的 ts 代码在线编译成 js、.d.ts 等，更多的性能你去试一下就晓得了
Vue PlayGround
sfc.vuejs.org/
轻量级的 vue3 playground，能够实时预览成果，实时查看编译后的 js 代码（包含 ssr 的）和提取出的 css 代码
Vue3 Template Explorer
template-explorer.vuejs.org/
vue3 的模板解析工具，学习源码必备
Vue2 Template Explorer
v2.template-explorer.vuejs.org/
vue2 的模板解析工具，学习 vue3 源码的时候，能够与下面 v3 的解析工具一起联合起来看，看看变动、优化都在哪
形象语法树解析
astexplorer.net/
js 的形象语法树在线解析工具，能让你更好的了解 js，学习一些编译工具必备
CodeSandBox
codesandbox.io/dashboard/h…
能疾速搭建一个简略的我的项目，在线运行，而且速度很快（你网快的前提下），你也能够用他人的模板来新建我的项目，简单的我的项目它也 hold 的住，不必装环境，在线撸代码，谁不爱呢
登录后云端保留我的项目，把链接分享给其他人就能够不便的查看，提供 api 来让你的利用领有 在 CodeSandBox 中关上 的能力
收费的！
还能够搜寻他人的写好的 demo，你不晓得一个库怎么用的时候，或有什么技巧的时候，能够来搜搜看看，既能够看代码，又能够在线实时预览，“CV 工程师必备”
CodePen
codepen.io/
反对 HTML、CSS、JS，比 codesandbox 轻量，适宜写简略的 demo
babel 在线编译
babeljs.io/repl
你能够将各种版本的 js、ts 代码转换成其余低版本的 js 代码
github1s
github1s.com/
在 github 代码仓库的门路的 https://github 前面加个 1s，就能用编辑器模式看源码了，比间接在 github 中看不便多了
可视化在线工具 / 其余在线工具
在线正则表达式可视化
jex.im/regulex
遇到一个简单的正则表达式，你多看几眼就可能会多掉几根头发，然而有了它，你就能够很好的剖析出这个正则表达式的用处了
在线 Postman
须要注册哦
web.postman.co/
始终在线用一爽快
当然，有曾经装置的利用就不须要了
CSS3 剪贴门路（Clip-path）在线生成器工具
tools.jb51.net/code/css3pa…
你想玩些花里胡哨的款式的时候必备，然而本人写是不可能本人写的，让机器生成好本人再缓缓调吧
CSS 动画
css3lib.alloyteam.com/
这个网站有一些炫酷的款式和动画成果，不过比拟偏差国外的格调
Canvas 背景动画（博客可用）
jsrun.net/square/sear…
你把这个外面代码粘贴进去，放到你的集体博客中，就能够实现很炫酷的背景成果了！
毛病是，个别加了这个，笔记本电脑风扇就会吼叫起来
这个网站外面还有一些其余的工具，比方上面这个
在线代码主题配色工具
jsrun.net/app/49pKp
跟下面是同一个网站，你如果感觉本人编辑器的代码主题色彩不难看，那你能够用它来缓缓调
在线配色
colorsinspo.com/
如果你想搞一个本人的组件库，网站，不晓得配色的就能够本人来配色
兼容性查问 Can I Use
caniuse.com/
能够查问一个 js api 或者 css 属性的在各个浏览器的各个版本下的兼容性，外面还有 QQ 浏览器，UC 浏览器是最乏味的事
EventLoop 可视化
www.jsv9000.app/
前端小白了解 EventLoop 的利器
CSS 暗影生成器
www.jq22.com/too-jq22/bo…
box-shadow 是一个很神奇且有用的属性，在这个网站能够生成须要的 box-shadow 代码
JSON 转 TS 代码
www.json2ts.com/
非常有用，能进步你写 TS 代码的效率，特地是须要定义接口的返回类型时，用它就是复制粘贴了！
在线正则表达式测试
regex101.com/
比起用在线工具测试正则，我更习惯间接在控制台写代码测试
CSS 代码生成
www.cssmatic.com/gradient-ge…
能够生成四种类型的 CSS 代码，突变，暗影等
carbon
carbon.now.sh/
让你的代码变的更好看，本人写文章或者论文都能够用这个工具来对本人的代码进行丑化
框架 / 库 / 工具 文档
UI 库
有赞 Vant
反对 Vue3 的 Vant3：vant-contrib.gitee.io/vant/#/zh-CN
一款由有赞开发的挪动端组件库，目前反对 Vue2、Vue3、React，微信和支付宝小程序
这款组件库始终以来都属于比拟难看的类型，其中的业务组件和有赞的业务相干，也比拟符合商城（购物）类挪动端利用
蚂蚁团体 Ant Design
ant.design/
这款 PC 端组件库文档中的设计准则写的比较完善，并且每个组件都形容了 何时应用 ，让你对“组件”有更深的意识
提供的设计资源更为欠缺
配套的有 中台前端 / 设计解决方案 Ant Design Pro、Ant Design Pro Components、图表 Ant Design Charts、和 Vue，Angular 版本的 Ant Design
Bootstrap
Bootstrap4 中文文档
这个 UI 库来自 Twitter 的成员，然而组件比拟少，特点是提供了很多工具类；须要引入 JQuery，大部分交互还是须要本人解决
- FlatUI
FlatUI 是基于 Bootstrap 开发的，款式更好看了
Layui
中文文档镜像站：www.layuiweb.com/
JQuery 时代很好的 UI 库，命令式 api，文档中有些示例没有预览
官网曾经下线了，江湖再见，原官网（layui.com）
Material Design Angular
material.angular.io/
基于 Angular，没用过，用过的敌人们评论一下呢
ElementUI
element.eleme.cn/#/zh-CN
出自饿了么前端团队，学 Vue 的童鞋们必用的一款 UI 库，反对 Vue2，也反对有 Angular 和 React 的版本，Element Plus 反对 Vue3
semi design
semi.design/zh-CN
出自字节跳动抖音前端与 UED 团队，最近刚开源不久，继续关注
Taro UI
taro-ui.jd.com/#/docs/intr…
出自京东凹凸实验室，基于 Taro，是一款跨端 UI 库
Vuetify
vuetifyjs.com/zh-Hans/int…
出自一家全职开源企业 Vuetify
WeUI
weui.io/
微信官网的 UI 库，天天用微信的你肯定很相熟
Ant Design Mobile
mobile.ant.design/
Ant Design 的手机版，旧版款式一般般，文档体验不是很好，新版款式比拟好，文档更新的也好用起来了
图标库
Font Awesome 中文网
www.fontawesome.com.cn/
IcoMoon
icomoon.io/
iconfont
www.iconfont.cn/
IconPark
iconpark.oceanengine.com/official
JS 框架 / 库
Vue
- Vue2 中文文档
- Vue3 中文文档
- Vue CLI
- Vue Devtools
- Vue Loader
- Vue Router
- Vuex
- Vue SSR
- Vite
React
- 中文文档
- React Router
- Redux，中文文档
- react-redux
- create-react-app
- React Native 官网文档
- React Native 中文文档
Angular
angular.io/
svelte
svelte.dev/
Taro
taro-docs.jd.com/taro/docs
京东的跨端框架，反对 Vue2、Vue3、React
uni-app
uniapp.dcloud.io/README
出自 DCloud，基于 Vue 的跨端框架
Three.js
- 中文文档
- 官网文档
- 官网在线示例
D3.js
d3js.org/
一款很弱小的基于 SVG 的可视化图形库
Cocos
docs.cocos.com/creator/man…
应用 Typescript 的跨平台游戏引擎
其余
ECMA 官网文档
tc39.es/ecma262/
VsCode 插件开发中文文档
liiked.github.io/VS-Code-Ext…
MDN Web 中文技术文档
developer.mozilla.org/zh-CN/docs/…
Web API 接口参考
菜鸟教程
- HTML 标签速查（按首字母）
- HTML 标签速查（按性能）
- CSS 属性速查
- CSS 选择器速查
- JS 参考手册
W3C 参考手册
W3C 参考手册
你能够在下列网站找到更多
awesome list chinese
asmcn.icopy.site/
npm
npmjs.com
github
github.com
在线书籍 / 文档
《ES6 规范入门》阮一峰
es6.ruanyifeng.com/
《浏览器工作原理与实际》
blog.poetries.top/browser-wor…
《深入浅出 webpack》
webpack.wuhaolin.cn/
《代码随想录》
programmercarl.com/
《古代 JavaScript 教程》
zh.javascript.info/
《前端进阶之道》
yuchengkai.cn/
《React 技术揭秘》
react.iamkasong.com/
《Vue 技术揭秘》
ustbhuangyi.github.io/vue-analysi…
《TypeScript 入门教程》
ts.xcatliu.com/
《深刻了解 TypeScript》
jkchao.github.io/typescript-…
《You-need-to-know-css》
lhammer.cn/You-need-to…
《CSS Inspiration》
chokcoco.github.io/CSS-Inspira…
《Three.js 教程》
www.webgl3d.cn/Three.js/
《WebGL 教程》
www.webgl3d.cn/WebGL/