前端开发常用技术工具网址导航汇总

这个是之前github看到过的一篇前端开发网址总结,涵盖前端开发所有常用的相关技术和插件工具汇总,

以后找前端相关学习资料不用到处找,收藏这一个就可以了,觉得很不错现在分享给大家。

前端开发常用技术工具网址导航汇总插图

1.1 HTML/CSS/JavaScript

地址标签说明
MDN 文档手册html/css/js很全很有用的查询网站。
W3C官网html/css/jsW3C官方,不解释。
html中文网-css教程手册css快速查询css属性及基本使用。
canvas速查手册canvas一目了然canvas的api方法。
VML 参考手册VML(IE)*微软开发的在低端IE上运行的“SVG”。
ES6入门(阮一峰)ES6使用频率最高的ECMAScript6文档。
ECMA International(6) ChinaES6ECMAScript6官方文档,部分中文翻译。
ECMA International(6)ES6ECMAScript6官方文档。
ECMA6 featuresES6通俗易懂的ECMAScript6特性demos。
TypeScript中文文档typescriptTypeScript官网文档。
Typescript HandbooktypescriptTypeScript使用手册。
Web API Referencehtml5HTML5 web API查询,如摄像头/地理位置。
Safari HTML Ref查询htmlSafari webview的HTML标签查询,某些ios特殊的属性或表现可以查这个。
Web Assembly中文网wasmWeb Assembly(wasm)中文网。
Dart中文网dartdart语言中文网。

1.2 兼容/查询

地址标签说明
can i use--使用频率最高的兼容支持查询网站。
ES兼容查询jsECMAScript兼容查询。
IOS字体支持查询ios fontIOS系统自带字体查询。
Web安全色查询web color为了尽量让用户看到色彩相同的网页,请尽量使用216色的web安全色。
浏览器份额统计browser百度统计的市面上浏览器份额,(要Flash,Chrome不一定能看)。

1.3 CSS工具

1.3.1 预处理

地址标签说明
less文档less易上手的CSS预处理工具。
sass 文档sass热门的CSS预处理工具。
stylus 文档stylus功能丰富的CSS预处理工具。
stylus 文档(张旭鑫)stylusstylus中文文档。

1.3.2 后处理

地址标签说明
postcss 文档postcss被广泛运用的CSS后处理工具。
github-postcsspostcsspost插件库中心。
github-autoprefixerautoprefixer自动补充浏CSS前缀的后处理工具。
cssnano官网cssnanoCSS优化和分解插件。
postcss-plugin-px2rempx2rem将px单位转为rem单位的工具。
postcss-px-to-viewportpx2vw将px单位转为vw单位的工具。
cssnext官网cssnext让今天的我们写着明天的CSS特性。

1.3.3 样式库/模块

地址标签说明
30s-of-code(css)30s-of-code(css)常用CSS样式模块集合,30s of code系列。
animate.cssbulma.cssCSS3动画库。
Hover.cssHover.cssPC鼠标hover交互动画库。
bulma.cssbulma.css一款轻量级的CSS UI库。
cardinal.csscardinal.css一款移动优先的less库。
bootflat.cssbootflat.css一款扁平化风格scss库,基于BootStrap3.3。
corpus.csscorpus.css一款scss集合库。
weuiweui微信风格的样式库,腾讯。
materialize.cssmaterializecssMaterial风格的响应式前端样式框架。
mui.cssMUIMaterial风格的轻量级前端样式框架。
Metro UIMetro UI一款流行的响应式前端样式框架,React版
NES.cssNES.css游戏机风格的前端样式框架。
paper.csspaper.css手绘风格的前端样式框架。
css3 iconcss3 icon纯CSS实现的图标。
Bootstrap 文档bootstrap红极一时的前端样式框架。
layui 文档layui一款采用自身模块规范编写的前端 UI 框架。
fontawesomefontawesome字体图标库。
iconfonticonfont字体图标库,阿里。
normalizenormalize相对较优的CSS reset替代方案。
Tailwind官网tailwind模块化的UI库。

1.3.4 其他

地址标签说明
css trickscss tricks包括布局、图标、动画等CSS技巧。
BEMbemBEM写法规范。
ACSSacssAtomic CSS,一种模块化写法规范。
IT.cssitcssIT CSS,一种组件化写法规范。
CSS modulescss-modules一种CSS样式模块化的解决方案。
css in jscss-in-js用写js的方式生成css样式。
Moo-CSSmoo-css一种CSS写法方案。

1.4 JS插件/库

1.4.1 库

地址标签说明
jQuery apijQuery红极一时的js库。
Zepto apiZepto移动端使用的轻量级“jQuery”。
city.jscity全国行政区划分数据文件。
phaser.jsphaser2D游戏前端库。
fabric.jsfabricjs有名的svg和canvas相互转换的封装库。
babylon.jsbabylonjs有名的3D游戏/视频框架。
stdlibstdlibjs的数学增强库。
immutable-jsimmutable生产环境js的List, Stack, Map, OrderedMap, Set, OrderedSet以及Record数据结构支持,通常用于ReactJs。
GCanvasgcanvas轻量的跨平台图形引擎(web/weex/react-native),阿里。
Rough.js官网roughjs一个有意思的canvas绘图库(画出的图形具有手绘风格)。

1.4.2 数据工具

地址标签说明
LoDashlodash广为人知的函数式工具库。
ramdaramda广为人知的函数式工具库。
UnderscoreJSunderscorejs红极一时的函数式工具库。
StreamJsstreamjs一款js数据的操作工具。
BaconJsbaconjs也是一款js数据的操作工具。
MomentJsmomentjs一款日期格式化的工具(2020开始停止维护)。
DayJsdayjs一款日期格式化的工具,MomentJS的替代品。
numbronumbrojs一款多国语言的数字转化工具。
accounting.jsaccounting.js数字,金钱的格式化工具。
money.jsmoney.js金钱的汇率转换工具。

1.4.3 请求、cookie和缓存

地址标签说明
axiosaxios高频使用的ajax库。
fetchfetchFetch API的兼容polyfill。
jsonpjsonp不用多说,实现jsonp。(axios没有封装jsonp)
URI.jsuriURI解析操作的工具。
StoreJsstoragestorage的封装库,兼容IE6。
js-cookiejs-cookiecookie的封装库。
Dexie.jsDexie.jsIndexedDB的封装库。
localForage.jslocalForage基于IndexedDB、WebSQL、localStorage的离线存储库,Mozilla。
basket.jsbasket.js利用localStorage来缓存script和css资源。

1.4.4 插件

地址标签说明
swiper.jsswiper轮播插件。
nanobar.jsnanobar绚丽的进度条展示插件,IE7+。
sweetalertsweetalert.js还算库的PC alert展示插件。
bowserjsbowserjs通过ua做的浏览器探测插件。
clipboard.jsclipboardjs剪贴板控制插件。
Qrcode-generatorgrcode-generator二维码生成工具。
html2canvashtml2canvashtml转为图片(canvas),即实现网页截图。
Pen EditorPen Editorweb的文本编辑工具。
cleave.jscleave.js一款好用的input输入控制插件。
autosize.jsautosize.js一款好用的<textarea/>高度自适应工具。
FileSaver.jsFileSaver.js网页端字符/图片/文件另存为插件。
FileAPI.jsFileAPI控制文件上传的插件。
shake.jsshake.js移动端摇晃震动监听插件。
Tippy.jstippy.js好用的气泡组件,有React版。
algoliaalgolia好用的搜索集成方案。
视/音频
地址标签说明
mediaelement.jsmediaelementjs一款视频控制插件。
video.jsvideojs一款视频控制插件。
flv.jsflvjs一款无需flash的flv播放插件。
howler.jshowlerjs视、音频控制插件。
jplayerjplayerjQuery的视、音频控制插件。
audio5.jsaudio5js一款音频控制插件。
图片
地址标签说明
caman.jscamanjs一款web图片处理插件。
Sharpsharp一款大图片处理工具。
字符串
地址标签说明
Voca.jsvocajs字符串的驼峰/修饰/填充/截断/转义/大小写更改等等。
anchorme.jsanchormejs自动将文本中的链接/URL/电子邮件转化为可点击的锚点链接。
String.jsstringjs字符串的截取删除等操作库(很久没维护了)。

1.4.5 工具

地址标签说明
md5.jsmd5md5加密。
requirejs 文档requirejsjs模块化工具。
seajs 文档seajsjs模块化工具。
Browserify 文档browserify浏览器端使用类似于 node 的 require() 方式。
validate.jsvalidate.jsform表单校验工具。
validator.jsvalidator.js有名的内容校验工具,比如邮箱验证、数值验证等。
RxJS中文官网RxJSReactiveX编程理念的js异步编程库。
Bcryptbcrypt用于密码散列处理的库。
Fakerfaker用于在浏览器/Nodejs中生成假数据。
Joi官网joi面向js的强大schema描述语言与数据验证器。

1.4.6 数据可视化(图表)

地址标签说明
highchartshighcharts效果、兼容最好(ie6+)的可视化库,可惜企业要收费。
echartsecharts国内最全面的可视化库。
d3d3不直接输出图形,输出开发功能的svg工具。
Chartjschartjs模块化可视化库。
antvG2/F2包括pc/移动的可视化库,蚂蚁。
FundChartsfundcharts本人的跨端轻量可视化库。
ThreeJs文档threejs/webGL3D建模工具
scene.jsscenejsWebGL 3D基础库。
Snap.svgsnap一款svg操作库。
pixi.jspixijs2D WebGL渲染引擎。
svg-3d-buildersvg-3d-builder3D SVG渲染引擎。
jsplumbjsplumb一款好用的流程图可视化库。
cytoscapejscytoscape一款好用的关系图谱可视化库。
Mermaidmermaid一款好用的流程图生成可视化库。

1.4.6 数据可视化(地图)

地址标签说明
cesiumjsCesium.js一款开源的3D城市建模库。
KartographKartograph.js一款普通的2D SVG城市数据展示库,IE7+。
leafletjsLeaflet.js一款移动优先的地图展示插件。

1.4.7 h5动画

地址标签说明
Bounce.jsBounceJS牛啤的CSS3动画创建工具。
animateplus.jsAnimateplus仅3k的动画工具。
Anime.jsanimejs轻量级js动画库。
svg.jssvgjs轻量的svg操作/动画库。
snapsvgSnap.svg一款有名的svg操作/动画库。
lottielottieweb/原生/小程序的跨端动效方案。
EaselJSeaseljscanvas动画操作库,CreateJS四剑客之一。
TweenJStweenjs动画曲线(ease/linear…)操作库,CreateJS四剑客之一。
SoundJSsoundjs音频控制库,CreateJS四剑客之一。
PreloadJSpreload资源预加载库,CreateJS四剑客之一。

1.4.8 移动端手势

地址标签说明
AlloyFinger.jsAlloyFinger增加移动端的各种手势事件。
hammer.jshammerjs手势封装库,取消了移动端click的300ms延迟。
interact.jsinteractjs使用JavaScript实现拖放、缩放和多点触控手势。

1.4.9 加载

地址标签说明
aload.jsaload.js异步图片/js/css加载工具。
layzr.jslayzr.js轻量图片懒加载工具。
lazysizes.jslazysizes高性能的图片/iframe懒加载工具。

1.5 Vue

地址标签说明
Vue 文档vue官方文档。
vue-cli 文档vue-clivue脚手架工具文档。
vuex 文档vuexvue数据流控制工具。
vue-router 文档vue-router基于vue的前端路由控制。
vue-content-loader 文档create-vue-content-loadervue版SVG骨架屏插件。
better-scroll 文档better-scroll控制滚动场景的插件。
vant 文档vant移动UI库,有赞。
vue-weui 文档vue-weuiweui风格的移动UI组件库。
Element 文档element使用PC中后台前端开发的UI组件库,饿了么。
vue-lazyload 文档vue-lazyloadvue版的图片/组件懒加载插件。
iView 文档iviewPC UI组件库。
antd-vue 文档antd-vuePC UI组件库,ant design的Vue版。
vue-i18n 文档vue-i18n多语言解决方案。
v-region 文档v-regionVue行政区选择组件。
vue-echarts 文档vue-echartsEcharts的Vue封装组件。
Nuxt.JS 文档nuxtjsVue的服务端渲染应用框架。
ViteJS 文档vitejs无bundle的Vue轻量前端项目构建工具。

1.6 React

地址标签说明
React 文档react官方文档。
create-react-app 文档create-react-appreact脚手架工具文档。
react Chrome devtoolsreact-devtoolsreact的Chrome开发拓展插件。
react-routerreact-router用于react的前端路由控制。
redux 文档redux广泛使用的数据流控制工具,reducer+flux。
flux 文档flux数据流控制工具。
mobx 文档mobx轻量数据流控制工具。
dvajs 文档dvajs基于 redux 和 redux-saga 的数据流方案,蚂蚁。
UmiJs 文档umijs可插拔的企业级 react 应用框架,蚂蚁。
Rekit 文档rekitReact/Redux/React-router开发工具/IDE。
NextJs 文档nextjs轻量级的 React 服务端渲染应用框架。
Gatsby.js 文档gatsbyjs轻量级的 React 静态网站搭建框架。
文档react-use好用的React自定义hooks封装库。
Umi Hooks 文档umi hooks适用于中台的hooks方法,如请求、拖拽、防抖。
react-query 文档react-query好用的React ajax接口请求处理封装hook。
why-did-you-renderwhy-did-you-render用来检测React组件是否需要重新渲染的工具。
react-content-loader 文档create-content-loaderreact版SVG骨架屏插件。
antd 文档antdant design,PC UI组件库。
antd-mobile 文档antd-mobile移动版的antd,UI组件库。
styled-components 文档styled-componentsreact的css-in-js实现。
react-lazyload 文档react-lazyloadreact版的图片/组件加载插件。
react-loadablereact-loadable实现react组件构建时代代码抽离和动态加载。
react-draggablereact-draggable一个用于拖拽操作的React封装组件。
react-tappablereact-tappable一个用于点击事件操作的React封装组件。
React-portalreact-portal一个通过portals定义附加的节点组件渲染工具。
React-contextmenureact-contextmenupc端web实现右键菜单的工具组件。
react-markdownreact-markdown在react上使用的markdown工具。
classnamesclassnames操作className的工具,多用于React。
30s-of-react30s-of-react常用React代码模块集合,30s of code系列。
React Bitsreact-bits常用React技巧。
docsiteJSdocsite基于React的文档生成工具。
React Colorreact-color基于React的拾色器插件,模拟Sketch, Photoshop, Chrome, Github, Twitter, Material Design等取色工具。

1.7 Nodejs和构建

地址标签说明
npmnpmnode包统一平台。
yarnyarn高速的node包管理平台。
nodejs apinodeNode官方文档。
Deno apidenoDeno官方文档(Nodejs.next)。
V8v8V8引擎介绍。
dockerdocker应用容器引擎Docker。
LinuxlinuxLinux命令查询手册。
GraphicsMagickgm后台图片处理工具。
ShellJsshelljs用nodejs实现shell常用命令。

1.7.1 构建

地址标签说明
ejsejs简单上手的html模板引擎。
pugpughtml模板引擎。
jadejadehtml模板引擎。
gulp 配置文档gulp自动化构建工具。
gulp pluginsgulpgulp插件中心。
grunt 配置文档grunt自动化构建工具。
rollupjs文档Rollup一款ES6模块构建工具。
webpack 配置文档webpack应用面不能再广的打包工具。
webpack-chainwebpack-chain链式配置webpack配置的工具。
parceljs 配置文档parceljs轻量打包。
snowpack 官网snowpack无bundle的轻量前端项目构建工具。
babelbabel应用面不能再广的ES编译器。
htmlparser2htmlparser2一款html的转AST工具。
parse5parse5一款html的转AST工具。
recastrecast一款js转AST的工具。
ts-migratets-migrate一款js转ts(TypeScript)的工具。
Concurrentlyconcurrently一款Nodejs的命名行控制工具。

1.7.2 服务端

地址标签说明
express 配置文档express轻量web应用程序开发框架。
Koa 文档koajsweb应用程序开发框架。
feathers.jsfeathersjs轻量web应用程序开发框架。
Nest.jsnestjs强大的Web应用框架。
Mockjs 配置文档mockjs接口数据模拟工具,可以在客户端和服务端使用。
SheetJssheetjs通过node操作word的工具。
ParallelJsparalleljs并行处理js的工具,可用于浏览器和node服务端。
js-pdfjs-pdf通过node操作生成pdf的工具。
pm2pm2node进程管理。
colors.jscolorsjsnode log控制台输出颜色控制。
log4.jslog4jslog日志工具。
nw.jsnwjs基于nodeJs和chromium的应用程序运行环境,允许您直接从DOM调用所有Node.js模块。
node-archivernode-archiver支持ZIP/TAR文档流传输和接收插件。
yazlyazl压缩zip插件,对应解压为yauzl
SailsJssailsjs好用的MVC nodejs框架。
Cors中间件corsNodejs的Cors中间件。
Body-parser中间件body-parserNodejs的请求流解析中间件。
RestifyrestifyNodejs的Web服务框架。
Multermulter用于处理上传文件的Nodejs中间件。
Node-cachenode-cache一个Nodejs的缓存控制模块。

1.8 Hybird和跨端

地址标签说明
pwapwd渐进式web应用。
微信小程序官网小程序/hybird微信小程序开发官网。
支付宝小程序官网小程序/hybird支付宝小程序开发官网。
百度小程序官网小程序/hybird百度小程序开发官网。
wepy文档小程序/hybirdvue语法的小程序开发官网。
小程序工具集合小程序/hybird小米轻应用开发官网。
小米轻应用官网轻应用/hybird小米轻应用开发官网。
Oppo/vivo快应用官网轻应用/hybirdOppo/vivo轻应用开发官网。
华为快应用官网轻应用/hybird华为轻应用开发官网。
React-native 文档跨端热门的react语法跨端工具。
Weex文档跨端热门的vue语法跨端工具。
Weex-UI文档跨端/weexweex的UI组件库。
Taro文档小程序/跨端跨web/小程序/原生的react语法跨端工具。
Rax文档小程序/跨端/Flutter跨web/小程序/Flutter的react语法跨端工具。
uni-app文档小程序/跨端跨web/小程序/原生的vue语法跨端工具。
Flutter文档跨端超火的Dart语法的跨端开发工具。
Electron文档跨端windows应用的开发。
chrome extensionchrome-extensionChrome拓展程序官方文档。
chrome-plugin-demochrome-plugin, chrome-extension一篇很好的Chrome拓展程序开发教程,有demo。

1.9 辅助工具

地址标签说明
正则表达式30分钟regexp正则上手教程。
在线正则验证regexper可视化在线正则验证网站。
whistlewhistleweb调试代理工具。
AST explorerastexplorercss/html/js/ts等语言的在线ast解析工具。
huskyHuskyNodeJS上的git工具。
eslint 文档eslintjs代码检查工具。
visualgoVisualgo可视化算法查询。
visualgoVisualgo可视化算法查询。
动画曲线查询cubic动画曲线查询网站(ease/linear…)
Character Entity Reference Chartcharref字符标点的转义字符查询。
gradient-editorgradient-editorCSS渐变样式生成工具。
valineJSvaline评论系统工具。
GitTalkgittalkgithub的评论工具。
webIDEwebideweb上写代码。
Fusumafusuma用markdown写web ppt。
VuePressvuepress用markdown写文档/博客
Hexohexo用markdown写文档/博客
materialuimaterialui快速色值选择
carboncarbon生成写博客时代码的美腻截图
tinypngTinypng压缩png和jpeg图片
svgomgSVGOMG压缩SVG图形
ImageMagickimagemagick后台运用极广的图片处理工具。
whatfontis.comwhatfontis识别图片上的字体不过限于英文字体,需要注册。
ps.gaoding.comps强大的在线Photoshop。
convert-psd-to-sketch avocodeavocodepsd一键转sketch。
svgomgsvgomg在线svg优化及预览。
code2flowcode2flow在线伪码转流程图工具。
tool.lu-jsonjson在线json格式化工具。
tool.lu-jsjs在线js格式化/混淆/压缩工具。
tool.lu-csscss在线css格式化/压缩/响应式单位处理工具。
tool.lu-coderunnercoderunner在线php/c/c++/python/go/js/java/bash代码执行工具。
diffchecker.comdiffchecker在线文本/文件diff工具。
isoflow.ioisoflow在线流程图绘制工具。

1.10 测试、安全及加密

1.10.1 单元测试

地址标签说明
MochaJS文档mocha一款单元测试工具。
JestJS文档jest一款单元测试工具。
Cypress官网cypress一款单元测试集成平台工具。
Cypress官网cypress一款单元测试集成平台工具。
enzyme官网enzyme一款React单元测试工具,可以测hook。

1.10.2 安全及加密知识

crypto-js 前端数据加密工具

《浅谈前端安全》

《再谈前端安全》

《8大前端安全问题》

《前端加密那点事》

《HTTPS 到底加密了什么?》

《Web 端反爬虫技术方案》

《那些我们该讨论的前端加密方法》

1.10.3 Debug

地址标签说明
vConsolevconsole被誉为移动端的web开发者工具。
FunDebugFunDebug简单的项目debug监控工具,有免费版
Webfunnywebfunny_monitor统一的前端异常监控解决方案。

1.10.4 质量检测

地址标签说明
JSLint js代码检查jslint一个JavaScript验证工具
JSHint js代码检查jshint一个JavaScript验证工具
ESLint js代码检查eslint一个JavaScript验证工具
CSSLint css代码检查csslint一个CSS验证工具
Markup Validation Servicevalidator在线HTML验证网站
Flow js代码检查flow一个JavaScript代码检查工具
SonarLint vscodesonarlintjs/ts工程代码质量验证的vscode插件
Google eng-practiceseng-practices谷歌工程实践文档
Cheeriocheerio用于web抓取的工具。
Puppeteer官网puppeteer强大的自动化工具。

1.11 IDE插件

1.11.1 VS Code

地址标签说明
MarketPlacemarketplace插件首页
Color Highlightcolor-highlight颜色预览。
Svg Previewsvg-previewSVG图形预览。
Code Spell Checkercode-spell-checker代码单词拼写校验。
Beautifybeautifyjavascript, JSON, CSS, Sass, 和HTML格式优化。
Bookmarksbookmarks看代码神器,代码书签。
Rainbow Bracketsrainbow-brackets开发必备,括号颜色区分。
stylefmtstylefmtcss格式化。
Debugger For Chromedebugger-for-chromevscode和chrome联调插件,本地开发必备。
Eslinteslintjs检查。
stylelintstylelintcss/less/scss检查。
TypeScript Tslint Plugintypescript-tslint-pluginTypeScript检查。
veturveturVue开发工具。
Dartdart-codeDart语言开发支持。
FlutterFlutterFlutter开发适配。
HTML Snippetshtml-snippetsHTML标签快速开发。
Identical Sublime Monokaiidentical-sublime-monokai本人还是习惯sublime的风格。
Markdownlintmarkdownlintmarkdown检查。
Minifyminifyjs/css直接压缩。
polacodepolacode代码截图的vscode IDE插件
GitLensgitlensgit源代码管理插件
Project Managerproject-manager本地项目管理

© 版权声明
THE END
喜欢点个赞支持一下吧
点赞0赏币 分享
评论交流 抢沙发

请登录后发表评论

    暂无评论内容