这个是之前github看到过的一篇前端开发网址总结,涵盖前端开发所有常用的相关技术和插件工具汇总,
以后找前端相关学习资料不用到处找,收藏这一个就可以了,觉得很不错现在分享给大家。
地址 | 标签 | 说明 |
---|---|---|
MDN 文档手册 | html/css/js |
很全很有用的查询网站。 |
W3C官网 | html/css/js |
W3C官方,不解释。 |
html中文网-css教程手册 | css |
快速查询css属性及基本使用。 |
canvas速查手册 | canvas |
一目了然canvas的api方法。 |
VML 参考手册 | VML(IE) |
*微软开发的在低端IE上运行的“SVG”。 |
ES6入门(阮一峰) | ES6 |
使用频率最高的ECMAScript6文档。 |
ECMA International(6) China | ES6 |
ECMAScript6官方文档,部分中文翻译。 |
ECMA International(6) | ES6 |
ECMAScript6官方文档。 |
ECMA6 features | ES6 |
通俗易懂的ECMAScript6特性demos。 |
TypeScript中文文档 | typescript |
TypeScript官网文档。 |
Typescript Handbook | typescript |
TypeScript使用手册。 |
Web API Reference | html5 |
HTML5 web API查询,如摄像头/地理位置。 |
Safari HTML Ref查询 | html |
Safari webview的HTML标签查询,某些ios特殊的属性或表现可以查这个。 |
Web Assembly中文网 | wasm |
Web Assembly(wasm)中文网。 |
Dart中文网 | dart |
dart语言中文网。 |
地址 | 标签 | 说明 |
---|---|---|
can i use | -- |
使用频率最高的兼容支持查询网站。 |
ES兼容查询 | js |
ECMAScript兼容查询。 |
IOS字体支持查询 | ios font |
IOS系统自带字体查询。 |
Web安全色查询 | web color |
为了尽量让用户看到色彩相同的网页,请尽量使用216色的web安全色。 |
浏览器份额统计 | browser |
百度统计的市面上浏览器份额,(要Flash,Chrome不一定能看)。 |
1.3.1 预处理
地址 | 标签 | 说明 |
---|---|---|
less文档 | less |
易上手的CSS预处理工具。 |
sass 文档 | sass |
热门的CSS预处理工具。 |
stylus 文档 | stylus |
功能丰富的CSS预处理工具。 |
stylus 文档(张旭鑫) | stylus |
stylus中文文档。 |
1.3.2 后处理
地址 | 标签 | 说明 |
---|---|---|
postcss 文档 | postcss |
被广泛运用的CSS后处理工具。 |
github-postcss | postcss |
post插件库中心。 |
github-autoprefixer | autoprefixer |
自动补充浏CSS前缀的后处理工具。 |
cssnano官网 | cssnano |
CSS优化和分解插件。 |
postcss-plugin-px2rem | px2rem |
将px单位转为rem单位的工具。 |
postcss-px-to-viewport | px2vw |
将px单位转为vw单位的工具。 |
cssnext官网 | cssnext |
让今天的我们写着明天的CSS特性。 |
1.3.3 样式库/模块
地址 | 标签 | 说明 |
---|---|---|
30s-of-code(css) | 30s-of-code(css) |
常用CSS样式模块集合,30s of code系列。 |
animate.css | bulma.css |
CSS3动画库。 |
Hover.css | Hover.css |
PC鼠标hover交互动画库。 |
bulma.css | bulma.css |
一款轻量级的CSS UI库。 |
cardinal.css | cardinal.css |
一款移动优先的less库。 |
bootflat.css | bootflat.css |
一款扁平化风格scss库,基于BootStrap3.3。 |
corpus.css | corpus.css |
一款scss集合库。 |
weui | weui |
微信风格的样式库,腾讯。 |
materialize.css | materializecss |
Material风格的响应式前端样式框架。 |
mui.css | MUI |
Material风格的轻量级前端样式框架。 |
Metro UI | Metro UI |
一款流行的响应式前端样式框架,React版。 |
NES.css | NES.css |
游戏机风格的前端样式框架。 |
paper.css | paper.css |
手绘风格的前端样式框架。 |
css3 icon | css3 icon |
纯CSS实现的图标。 |
Bootstrap 文档 | bootstrap |
红极一时的前端样式框架。 |
layui 文档 | layui |
一款采用自身模块规范编写的前端 UI 框架。 |
fontawesome | fontawesome |
字体图标库。 |
iconfont | iconfont |
字体图标库,阿里。 |
normalize | normalize |
相对较优的CSS reset替代方案。 |
Tailwind官网 | tailwind |
模块化的UI库。 |
1.3.4 其他
地址 | 标签 | 说明 |
---|---|---|
css tricks | css tricks |
包括布局、图标、动画等CSS技巧。 |
BEM | bem |
BEM写法规范。 |
ACSS | acss |
Atomic CSS,一种模块化写法规范。 |
IT.css | itcss |
IT CSS,一种组件化写法规范。 |
CSS modules | css-modules |
一种CSS样式模块化的解决方案。 |
css in js | css-in-js |
用写js的方式生成css样式。 |
Moo-CSS | moo-css |
一种CSS写法方案。 |
1.4.1 库
地址 | 标签 | 说明 |
---|---|---|
jQuery api | jQuery |
红极一时的js库。 |
Zepto api | Zepto |
移动端使用的轻量级“jQuery”。 |
city.js | city |
全国行政区划分数据文件。 |
phaser.js | phaser |
2D游戏前端库。 |
fabric.js | fabricjs |
有名的svg和canvas相互转换的封装库。 |
babylon.js | babylonjs |
有名的3D游戏/视频框架。 |
stdlib | stdlib |
js的数学增强库。 |
immutable-js | immutable |
生产环境js的List, Stack, Map, OrderedMap, Set, OrderedSet以及Record数据结构支持,通常用于ReactJs。 |
GCanvas | gcanvas |
轻量的跨平台图形引擎(web/weex/react-native),阿里。 |
Rough.js官网 | roughjs |
一个有意思的canvas绘图库(画出的图形具有手绘风格)。 |
1.4.2 数据工具
地址 | 标签 | 说明 |
---|---|---|
LoDash | lodash |
广为人知的函数式工具库。 |
ramda | ramda |
广为人知的函数式工具库。 |
UnderscoreJS | underscorejs |
红极一时的函数式工具库。 |
StreamJs | streamjs |
一款js数据的操作工具。 |
BaconJs | baconjs |
也是一款js数据的操作工具。 |
MomentJs | momentjs |
一款日期格式化的工具(2020开始停止维护)。 |
DayJs | dayjs |
一款日期格式化的工具,MomentJS的替代品。 |
numbro | numbrojs |
一款多国语言的数字转化工具。 |
accounting.js | accounting.js |
数字,金钱的格式化工具。 |
money.js | money.js |
金钱的汇率转换工具。 |
1.4.3 请求、cookie和缓存
地址 | 标签 | 说明 |
---|---|---|
axios | axios |
高频使用的ajax库。 |
fetch | fetch |
Fetch API的兼容polyfill。 |
jsonp | jsonp |
不用多说,实现jsonp。(axios没有封装jsonp) |
URI.js | uri |
URI解析操作的工具。 |
StoreJs | storage |
storage的封装库,兼容IE6。 |
js-cookie | js-cookie |
cookie的封装库。 |
Dexie.js | Dexie.js |
IndexedDB的封装库。 |
localForage.js | localForage |
基于IndexedDB、WebSQL、localStorage的离线存储库,Mozilla。 |
basket.js | basket.js |
利用localStorage来缓存script和css资源。 |
1.4.4 插件
地址 | 标签 | 说明 |
---|---|---|
swiper.js | swiper |
轮播插件。 |
nanobar.js | nanobar |
绚丽的进度条展示插件,IE7+。 |
sweetalert | sweetalert.js |
还算库的PC alert展示插件。 |
bowserjs | bowserjs |
通过ua做的浏览器探测插件。 |
clipboard.js | clipboardjs |
剪贴板控制插件。 |
Qrcode-generator | grcode-generator |
二维码生成工具。 |
html2canvas | html2canvas |
html转为图片(canvas),即实现网页截图。 |
Pen Editor | Pen Editor |
web的文本编辑工具。 |
cleave.js | cleave.js |
一款好用的input输入控制插件。 |
autosize.js | autosize.js |
一款好用的 高度自适应工具。 |
FileSaver.js | FileSaver.js |
网页端字符/图片/文件另存为插件。 |
FileAPI.js | FileAPI |
控制文件上传的插件。 |
shake.js | shake.js |
移动端摇晃震动监听插件。 |
Tippy.js | tippy.js |
好用的气泡组件,有React版。 |
algolia | algolia |
好用的搜索集成方案。 |
视/音频
地址 | 标签 | 说明 |
---|---|---|
mediaelement.js | mediaelementjs |
一款视频控制插件。 |
video.js | videojs |
一款视频控制插件。 |
flv.js | flvjs |
一款无需flash的flv播放插件。 |
howler.js | howlerjs |
视、音频控制插件。 |
jplayer | jplayer |
jQuery的视、音频控制插件。 |
audio5.js | audio5js |
一款音频控制插件。 |
图片
地址 | 标签 | 说明 |
---|---|---|
caman.js | camanjs |
一款web图片处理插件。 |
Sharp | sharp |
一款大图片处理工具。 |
字符串
地址 | 标签 | 说明 |
---|---|---|
Voca.js | vocajs |
字符串的驼峰/修饰/填充/截断/转义/大小写更改等等。 |
anchorme.js | anchormejs |
自动将文本中的链接/URL/电子邮件转化为可点击的锚点链接。 |
String.js | stringjs |
字符串的截取删除等操作库(很久没维护了)。 |
1.4.5 工具
地址 | 标签 | 说明 |
---|---|---|
md5.js | md5 |
md5加密。 |
requirejs 文档 | requirejs |
js模块化工具。 |
seajs 文档 | seajs |
js模块化工具。 |
Browserify 文档 | browserify |
浏览器端使用类似于 node 的 require() 方式。 |
validate.js | validate.js |
form表单校验工具。 |
validator.js | validator.js |
有名的内容校验工具,比如邮箱验证、数值验证等。 |
RxJS中文官网 | RxJS |
ReactiveX编程理念的js异步编程库。 |
Bcrypt | bcrypt |
用于密码散列处理的库。 |
Faker | faker |
用于在浏览器/Nodejs中生成假数据。 |
Joi官网 | joi |
面向js的强大schema描述语言与数据验证器。 |
1.4.6 数据可视化(图表)
地址 | 标签 | 说明 |
---|---|---|
highcharts | highcharts |
效果、兼容最好(ie6+)的可视化库,可惜企业要收费。 |
echarts | echarts |
国内最全面的可视化库。 |
d3 | d3 |
不直接输出图形,输出开发功能的svg工具。 |
Chartjs | chartjs |
模块化可视化库。 |
antv | G2/F2 |
包括pc/移动的可视化库,蚂蚁。 |
FundCharts | fundcharts |
本人的跨端轻量可视化库。 |
ThreeJs文档 | threejs/webGL |
3D建模工具 |
scene.js | scenejs |
WebGL 3D基础库。 |
Snap.svg | snap |
一款svg操作库。 |
pixi.js | pixijs |
2D WebGL渲染引擎。 |
svg-3d-builder | svg-3d-builder |
3D SVG渲染引擎。 |
jsplumb | jsplumb |
一款好用的流程图可视化库。 |
cytoscapejs | cytoscape |
一款好用的关系图谱可视化库。 |
Mermaid | mermaid |
一款好用的流程图生成可视化库。 |
1.4.6 数据可视化(地图)
地址 | 标签 | 说明 |
---|---|---|
cesiumjs | Cesium.js |
一款开源的3D城市建模库。 |
Kartograph | Kartograph.js |
一款普通的2D SVG城市数据展示库,IE7+。 |
leafletjs | Leaflet.js |
一款移动优先的地图展示插件。 |
1.4.7 h5动画
地址 | 标签 | 说明 |
---|---|---|
Bounce.js | BounceJS |
牛啤的CSS3动画创建工具。 |
animateplus.js | Animateplus |
仅3k的动画工具。 |
Anime.js | animejs |
轻量级js动画库。 |
svg.js | svgjs |
轻量的svg操作/动画库。 |
snapsvg | Snap.svg |
一款有名的svg操作/动画库。 |
lottie | lottie |
web/原生/小程序的跨端动效方案。 |
EaselJS | easeljs |
canvas动画操作库,CreateJS四剑客之一。 |
TweenJS | tweenjs |
动画曲线(ease/linear…)操作库,CreateJS四剑客之一。 |
SoundJS | soundjs |
音频控制库,CreateJS四剑客之一。 |
PreloadJS | preload |
资源预加载库,CreateJS四剑客之一。 |
1.4.8 移动端手势
地址 | 标签 | 说明 |
---|---|---|
AlloyFinger.js | AlloyFinger |
增加移动端的各种手势事件。 |
hammer.js | hammerjs |
手势封装库,取消了移动端click的300ms延迟。 |
interact.js | interactjs |
使用JavaScript实现拖放、缩放和多点触控手势。 |
1.4.9 加载
地址 | 标签 | 说明 |
---|---|---|
aload.js | aload.js |
异步图片/js/css加载工具。 |
layzr.js | layzr.js |
轻量图片懒加载工具。 |
lazysizes.js | lazysizes |
高性能的图片/iframe懒加载工具。 |
地址 | 标签 | 说明 |
---|---|---|
Vue 文档 | vue |
官方文档。 |
vue-cli 文档 | vue-cli |
vue脚手架工具文档。 |
vuex 文档 | vuex |
vue数据流控制工具。 |
vue-router 文档 | vue-router |
基于vue的前端路由控制。 |
vue-content-loader 文档 | create-vue-content-loader |
vue版SVG骨架屏插件。 |
better-scroll 文档 | better-scroll |
控制滚动场景的插件。 |
vant 文档 | vant |
移动UI库,有赞。 |
vue-weui 文档 | vue-weui |
weui风格的移动UI组件库。 |
Element 文档 | element |
使用PC中后台前端开发的UI组件库,饿了么。 |
vue-lazyload 文档 | vue-lazyload |
vue版的图片/组件懒加载插件。 |
iView 文档 | iview |
PC UI组件库。 |
antd-vue 文档 | antd-vue |
PC UI组件库,ant design的Vue版。 |
vue-i18n 文档 | vue-i18n |
多语言解决方案。 |
v-region 文档 | v-region |
Vue行政区选择组件。 |
vue-echarts 文档 | vue-echarts |
Echarts的Vue封装组件。 |
Nuxt.JS 文档 | nuxtjs |
Vue的服务端渲染应用框架。 |
ViteJS 文档 | vitejs |
无bundle的Vue轻量前端项目构建工具。 |
地址 | 标签 | 说明 |
---|---|---|
React 文档 | react |
官方文档。 |
create-react-app 文档 | create-react-app |
react脚手架工具文档。 |
react Chrome devtools | react-devtools |
react的Chrome开发拓展插件。 |
react-router | react-router |
用于react的前端路由控制。 |
redux 文档 | redux |
广泛使用的数据流控制工具,reducer+flux。 |
flux 文档 | flux |
数据流控制工具。 |
mobx 文档 | mobx |
轻量数据流控制工具。 |
dvajs 文档 | dvajs |
基于 redux 和 redux-saga 的数据流方案,蚂蚁。 |
UmiJs 文档 | umijs |
可插拔的企业级 react 应用框架,蚂蚁。 |
Rekit 文档 | rekit |
React/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-render | why-did-you-render |
用来检测React组件是否需要重新渲染的工具。 |
react-content-loader 文档 | create-content-loader |
react版SVG骨架屏插件。 |
antd 文档 | antd |
ant design,PC UI组件库。 |
antd-mobile 文档 | antd-mobile |
移动版的antd,UI组件库。 |
styled-components 文档 | styled-components |
react的css-in-js实现。 |
react-lazyload 文档 | react-lazyload |
react版的图片/组件加载插件。 |
react-loadable | react-loadable |
实现react组件构建时代代码抽离和动态加载。 |
react-draggable | react-draggable |
一个用于拖拽操作的React封装组件。 |
react-tappable | react-tappable |
一个用于点击事件操作的React封装组件。 |
React-portal | react-portal |
一个通过portals定义附加的节点组件渲染工具。 |
React-contextmenu | react-contextmenu |
pc端web实现右键菜单的工具组件。 |
react-markdown | react-markdown |
在react上使用的markdown工具。 |
classnames | classnames |
操作className的工具,多用于React。 |
30s-of-react | 30s-of-react |
常用React代码模块集合,30s of code系列。 |
React Bits | react-bits |
常用React技巧。 |
docsiteJS | docsite |
基于React的文档生成工具。 |
React Color | react-color |
基于React的拾色器插件,模拟Sketch, Photoshop, Chrome, Github, Twitter, Material Design等取色工具。 |
地址 | 标签 | 说明 |
---|---|---|
npm | npm |
node包统一平台。 |
yarn | yarn |
高速的node包管理平台。 |
nodejs api | node |
Node官方文档。 |
Deno api | deno |
Deno官方文档(Nodejs.next)。 |
V8 | v8 |
V8引擎介绍。 |
docker | docker |
应用容器引擎Docker。 |
Linux | linux |
Linux命令查询手册。 |
GraphicsMagick | gm |
后台图片处理工具。 |
ShellJs | shelljs |
用nodejs实现shell常用命令。 |
1.7.1 构建
地址 | 标签 | 说明 |
---|---|---|
ejs | ejs |
简单上手的html模板引擎。 |
pug | pug |
html模板引擎。 |
jade | jade |
html模板引擎。 |
gulp 配置文档 | gulp |
自动化构建工具。 |
gulp plugins | gulp |
gulp插件中心。 |
grunt 配置文档 | grunt |
自动化构建工具。 |
rollupjs文档 | Rollup |
一款ES6模块构建工具。 |
webpack 配置文档 | webpack |
应用面不能再广的打包工具。 |
webpack-chain | webpack-chain |
链式配置webpack配置的工具。 |
parceljs 配置文档 | parceljs |
轻量打包。 |
snowpack 官网 | snowpack |
无bundle的轻量前端项目构建工具。 |
babel | babel |
应用面不能再广的ES编译器。 |
htmlparser2 | htmlparser2 |
一款html的转AST工具。 |
parse5 | parse5 |
一款html的转AST工具。 |
recast | recast |
一款js转AST的工具。 |
ts-migrate | ts-migrate |
一款js转ts(TypeScript)的工具。 |
Concurrently | concurrently |
一款Nodejs的命名行控制工具。 |
1.7.2 服务端
地址 | 标签 | 说明 |
---|---|---|
express 配置文档 | express |
轻量web应用程序开发框架。 |
Koa 文档 | koajs |
web应用程序开发框架。 |
feathers.js | feathersjs |
轻量web应用程序开发框架。 |
Nest.js | nestjs |
强大的Web应用框架。 |
Mockjs 配置文档 | mockjs |
接口数据模拟工具,可以在客户端和服务端使用。 |
SheetJs | sheetjs |
通过node操作word的工具。 |
ParallelJs | paralleljs |
并行处理js的工具,可用于浏览器和node服务端。 |
js-pdf | js-pdf |
通过node操作生成pdf的工具。 |
pm2 | pm2 |
node进程管理。 |
colors.js | colorsjs |
node log控制台输出颜色控制。 |
log4.js | log4js |
log日志工具。 |
nw.js | nwjs |
基于nodeJs和chromium的应用程序运行环境,允许您直接从DOM调用所有Node.js模块。 |
node-archiver | node-archiver |
支持ZIP/TAR文档流传输和接收插件。 |
yazl | yazl |
压缩zip插件,对应解压为yauzl。 |
SailsJs | sailsjs |
好用的MVC nodejs框架。 |
Cors中间件 | cors |
Nodejs的Cors中间件。 |
Body-parser中间件 | body-parser |
Nodejs的请求流解析中间件。 |
Restify | restify |
Nodejs的Web服务框架。 |
Multer | multer |
用于处理上传文件的Nodejs中间件。 |
Node-cache | node-cache |
一个Nodejs的缓存控制模块。 |
地址 | 标签 | 说明 |
---|---|---|
pwa | pwd |
渐进式web应用。 |
微信小程序官网 | 小程序/hybird |
微信小程序开发官网。 |
支付宝小程序官网 | 小程序/hybird |
支付宝小程序开发官网。 |
百度小程序官网 | 小程序/hybird |
百度小程序开发官网。 |
wepy文档 | 小程序/hybird |
vue语法的小程序开发官网。 |
小程序工具集合 | 小程序/hybird |
小米轻应用开发官网。 |
小米轻应用官网 | 轻应用/hybird |
小米轻应用开发官网。 |
Oppo/vivo快应用官网 | 轻应用/hybird |
Oppo/vivo轻应用开发官网。 |
华为快应用官网 | 轻应用/hybird |
华为轻应用开发官网。 |
React-native 文档 | 跨端 |
热门的react语法跨端工具。 |
Weex文档 | 跨端 |
热门的vue语法跨端工具。 |
Weex-UI文档 | 跨端/weex |
weex的UI组件库。 |
Taro文档 | 小程序/跨端 |
跨web/小程序/原生的react语法跨端工具。 |
Rax文档 | 小程序/跨端/Flutter |
跨web/小程序/Flutter的react语法跨端工具。 |
uni-app文档 | 小程序/跨端 |
跨web/小程序/原生的vue语法跨端工具。 |
Flutter文档 | 跨端 |
超火的Dart语法的跨端开发工具。 |
Electron文档 | 跨端 |
windows应用的开发。 |
chrome extension | chrome-extension |
Chrome拓展程序官方文档。 |
chrome-plugin-demo | chrome-plugin, chrome-extension |
一篇很好的Chrome拓展程序开发教程,有demo。 |
地址 | 标签 | 说明 |
---|---|---|
正则表达式30分钟 | regexp |
正则上手教程。 |
在线正则验证 | regexper |
可视化在线正则验证网站。 |
whistle | whistle |
web调试代理工具。 |
AST explorer | astexplorer |
css/html/js/ts等语言的在线ast解析工具。 |
husky | Husky |
NodeJS上的git工具。 |
eslint 文档 | eslint |
js代码检查工具。 |
visualgo | Visualgo |
可视化算法查询。 |
visualgo | Visualgo |
可视化算法查询。 |
动画曲线查询 | cubic |
动画曲线查询网站(ease/linear…) |
Character Entity Reference Chart | charref |
字符标点的转义字符查询。 |
gradient-editor | gradient-editor |
CSS渐变样式生成工具。 |
valineJS | valine |
评论系统工具。 |
GitTalk | gittalk |
github的评论工具。 |
webIDE | webide |
web上写代码。 |
Fusuma | fusuma |
用markdown写web ppt。 |
VuePress | vuepress |
用markdown写文档/博客 |
Hexo | hexo |
用markdown写文档/博客 |
materialui | materialui |
快速色值选择 |
carbon | carbon |
生成写博客时代码的美腻截图 |
tinypng | Tinypng |
压缩png和jpeg图片 |
svgomg | SVGOMG |
压缩SVG图形 |
ImageMagick | imagemagick |
后台运用极广的图片处理工具。 |
whatfontis.com | whatfontis |
识别图片上的字体不过限于英文字体,需要注册。 |
ps.gaoding.com | ps |
强大的在线Photoshop。 |
convert-psd-to-sketch avocode | avocode |
psd一键转sketch。 |
svgomg | svgomg |
在线svg优化及预览。 |
code2flow | code2flow |
在线伪码转流程图工具。 |
tool.lu-json | json |
在线json格式化工具。 |
tool.lu-js | js |
在线js格式化/混淆/压缩工具。 |
tool.lu-css | css |
在线css格式化/压缩/响应式单位处理工具。 |
tool.lu-coderunner | coderunner |
在线php/c/c++/python/go/js/java/bash代码执行工具。 |
diffchecker.com | diffchecker |
在线文本/文件diff工具。 |
isoflow.io | isoflow |
在线流程图绘制工具。 |
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
地址 | 标签 | 说明 |
---|---|---|
vConsole | vconsole |
被誉为移动端的web开发者工具。 |
FunDebug | FunDebug |
简单的项目debug监控工具,有免费版 |
Webfunny | webfunny_monitor |
统一的前端异常监控解决方案。 |
1.10.4 质量检测
地址 | 标签 | 说明 |
---|---|---|
JSLint js代码检查 | jslint |
一个JavaScript验证工具 |
JSHint js代码检查 | jshint |
一个JavaScript验证工具 |
ESLint js代码检查 | eslint |
一个JavaScript验证工具 |
CSSLint css代码检查 | csslint |
一个CSS验证工具 |
Markup Validation Service | validator |
在线HTML验证网站 |
Flow js代码检查 | flow |
一个JavaScript代码检查工具 |
SonarLint vscode | sonarlint |
js/ts工程代码质量验证的vscode插件 |
Google eng-practices | eng-practices |
谷歌工程实践文档 |
Cheerio | cheerio |
用于web抓取的工具。 |
Puppeteer官网 | puppeteer |
强大的自动化工具。 |
1.11.1 VS Code
地址 | 标签 | 说明 |
---|---|---|
MarketPlace | marketplace |
插件首页 |
Color Highlight | color-highlight |
颜色预览。 |
Svg Preview | svg-preview |
SVG图形预览。 |
Code Spell Checker | code-spell-checker |
代码单词拼写校验。 |
Beautify | beautify |
javascript, JSON, CSS, Sass, 和HTML格式优化。 |
Bookmarks | bookmarks |
看代码神器,代码书签。 |
Rainbow Brackets | rainbow-brackets |
开发必备,括号颜色区分。 |
stylefmt | stylefmt |
css格式化。 |
Debugger For Chrome | debugger-for-chrome |
vscode和chrome联调插件,本地开发必备。 |
Eslint | eslint |
js检查。 |
stylelint | stylelint |
css/less/scss检查。 |
TypeScript Tslint Plugin | typescript-tslint-plugin |
TypeScript检查。 |
vetur | vetur |
Vue开发工具。 |
Dart | dart-code |
Dart语言开发支持。 |
Flutter | Flutter |
Flutter开发适配。 |
HTML Snippets | html-snippets |
HTML标签快速开发。 |
Identical Sublime Monokai | identical-sublime-monokai |
本人还是习惯sublime的风格。 |
Markdownlint | markdownlint |
markdown检查。 |
Minify | minify |
js/css直接压缩。 |
polacode | polacode |
代码截图的vscode IDE插件 |
GitLens | gitlens |
git源代码管理插件 |
Project Manager | project-manager |
本地项目管理 |