前端开发常用技术工具网址导航汇总
这个是之前github看到过的一篇前端开发网址总结,涵盖前端开发所有常用的相关技术和插件工具汇总,
以后找前端相关学习资料不用到处找,收藏这一个就可以了,觉得很不错现在分享给大家。
1.1 HTML/CSS/JavaScript
地址 | 标签 | 说明 |
---|---|---|
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语言中文网。 |
1.2 兼容/查询
地址 | 标签 | 说明 |
---|---|---|
can i use |
--
|
使用频率最高的兼容支持查询网站。 |
ES兼容查询 |
js
|
ECMAScript兼容查询。 |
IOS字体支持查询 |
ios font
|
IOS系统自带字体查询。 |
Web安全色查询 |
web color
|
为了尽量让用户看到色彩相同的网页,请尽量使用216色的web安全色。 |
浏览器份额统计 |
browser
|
百度统计的市面上浏览器份额,(要Flash,Chrome不一定能看)。 |
1.3 CSS工具
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 JS插件/库
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
|
一款好用的<textarea/> 高度自适应工具。
|
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懒加载工具。 |
1.5 Vue
地址 | 标签 | 说明 |
---|---|---|
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轻量前端项目构建工具。 |
1.6 React
地址 | 标签 | 说明 |
---|---|---|
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等取色工具。 |
1.7 Nodejs和构建
地址 | 标签 | 说明 |
---|---|---|
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的缓存控制模块。 |
1.8 Hybird和跨端
地址 | 标签 | 说明 |
---|---|---|
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。 |
1.9 辅助工具
地址 | 标签 | 说明 |
---|---|---|
正则表达式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.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 IDE插件
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
|
本地项目管理 |
前端开发常用技术工具网址导航汇总相关推荐
- Web前端开发常用必备工具(一)
一个称手的工具可谓是事半功倍,对程序员来说,更是离不开各种各样的实用小工具,你现在的工具用的还称手吗?你还在为没有好用的工具而发愁吗? 蓉妹儿在这里给你分享一些Web前端开发的常用必备工具,还没安装的 ...
- Web前端开发常用的十款开发工具汇总
今天小编要跟大家分享关于Web前端开发常用的十款开发工具汇总 1.Glitch https://glitch.com 好的,这不仅仅是一个工具,还是一个非常棒的编码平台以及一个很棒的技术社区.我可以在 ...
- Web前端开发常用的开发工具
Web的发展日新月异,这也使得Web开发者不得不加快脚步,学习新的技术和编程语言.尤其是对于那些大量流量入口的网站来说,跟上技术发展趋势更是尤为重要.为了使得Web开发人员能够更加专注于业务层面的开发 ...
- CDN公共库、前端开发常用插件一览表(VendorPluginLib)
============================================================= ==========================前端CDN公共库==== ...
- 前端开发常用的Chrome插件推荐
谷歌浏览器简单清爽的界面.因其丰富的插件,成为前端开发者喜欢的浏览器.而易用的插件可以帮助开发者减少开发过程中的大量工作量,带来更加强大的效果.今天给大家推荐几个在程序员中口碑不错非常实用的Chrom ...
- web前端技术亮点_Web前端开发职业技术要求规划
亲爱的朋友们: 大家好,我是演讲者-达达前端,也可以叫我 Jeskson ! 今天,我演讲的题目是<Web前端开发职业技术要求规划>.这个世界有很多不平凡的人,也有更多平凡的人,你是属于哪 ...
- SpringBoot开发常用技术这些你知道吗???
初学SpringBoot,只浅在的学了,所以内容比较简单,代码可能比较多,因为现在我注重于用还没有研究其底层,所以看完本文章每一章节理解后,能自己敲一遍,明白其流程,实现功能便可,文中若有纰漏望指出ψ ...
- Web前端开发职业技术要求规划
亲爱的朋友们: 大家好,我是演讲者-达达前端,也可以叫我 Jeskson ! 今天,我演讲的题目是<Web前端开发职业技术要求规划>.这个世界有很多不平凡的人,也有更多平凡的人,你是属于哪 ...
- 前端开发常用技巧(update...)
前端开发常用技巧 JS 1.JavaScript删除子节点的方法 2.JS 动态生成div并添加点击事件 CSS 1.文本溢出处理 2.使用伪类 添加下划线 3.使用伪类 添加下划线 下划线居中 4. ...
最新文章
- Java基础学习总结(10)——static关键字
- Apache搭建多个站点方法详解
- 为什么企业光纤比家用光纤贵那么多,一般至少10倍以上?—Vecloud微云
- 用java写一个折半查找_用Java写一个折半查找。
- Deep Learning for Computer Vision with MATLAB and cuDNN
- 服务器显示AL024是什么意思,中牟县家具木工机械维修台达驱动器al024故障分分钟修复...
- 洛谷P7361:拜神(SA、二分、主席树、启发式合并)
- Java 目录操作二(获取文件的上级目录、获取目录最后修改时间、打印目录结构、遍历指定目录下的所有目录)
- 递归函数 二分查找法 的一些用法
- GIS案例练习-----------第四天
- arcgis利用切片服务导出离线地图包(tpk文件)
- FFmpeg从视频中提取音频
- 透镜成像、眼球成像、小孔成像原理
- c语言 char *str 与char str[]区别
- ESP8266 - 首次使用点灯科技
- ninja: error: ‘xxx‘, needed by ‘xxx‘, missing and no known rule to make it
- PHP + QQ邮箱发送邮箱验证码
- 在qt实现手机通讯录系统_Qt编写自定义控件55-手机通讯录
- 多包管理工具Lerna(莱尔纳)
- XTUOJ-1163-ASCII