Skip to content

前端开发常用文档/网站地址、样式/js方法封装库、项目模板。提供Chrome拓展程序

Notifications You must be signed in to change notification settings

www311/fe-tools

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

fe-books

前端开发常用文档/网站地址、样式/js方法封装库(ts)、典型项目模板。


1. 常用网站

目录:

1.1 HTML/CSS/JavaScript/Dart

地址 标签 说明
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),阿里。
core-decorators core-decorators 丰富的装饰器封装库,基于ES2016/2017的装饰器语法。

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 金钱的汇率转换工具。
decimal.js decimal.js 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 好用的搜索集成方案。
dejavu dejavu 一款弹性搜索方案,逮虾户。
视/音频
地址 标签 说明
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 一款强大的图片处理工具。
squoosh.js squoosh 一款优秀的图片压缩方案,有浏览器环境。
tesseract.js tesseract 一款强大的OCR识别库。
字符串
地址 标签 说明
Voca.js vocajs 字符串的驼峰/修饰/填充/截断/转义/大小写更改等等。
anchorme.js anchormejs 自动将文本中的链接/URL/电子邮件转化为可点击的锚点链接。
String.js stringjs 字符串的截取删除等操作库(很久没维护了)。
qs.js qsjs URL参数处理库。

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四剑客之一。
P5js p5js canvas绘画功能库。
Rough.js官网 roughjs 一个有意思的canvas绘图库(画出的图形具有手绘风格)。
BabylonJS BabylonJS 一个功能强大,美观,简单且开放的游戏和渲染引擎。

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懒加载工具。
infinite-scroll.js infinite-scroll “无限”滚动的加载插件。

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轻量前端项目构建工具。
vue-class-component vue-class-component Vue的Component装饰器封装,用于jsx/tsx的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的前端路由控制。
Recoil 文档 recoil 简单、对hook友好的数据流控制工具。
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等取色工具。
React Desktop react-desktop 模拟Mac或windows桌面交互的React封装组件。
React Boilerplate react-boilerplate 性能优先的一个典型的React项目模板。
React RTE react-rte 富文本编辑器,基于draftJS。

1.7 Nodejs和构建

地址 标签 说明
npm npm node包统一平台。
yarn yarn 高速的node包管理器。
pnpm pnpm 快速高效的node包统一管理器。
nodejs api node Node官方文档。
Deno api deno Deno官方文档(Nodejs.next)。
台。
Lerna lerna 好用的多包管理工具,monorepo。
V8 v8 V8引擎介绍。
docker docker 应用容器引擎Docker。
Linux linux Linux命令查询手册。
GraphicsMagick gm 后台图片处理工具。
js-xlsx js-xlsx xlsx的编辑和处理库。
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的命名行控制工具。
esbuild esbuild 一款极快的js打包和压缩工具。

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的缓存控制模块。
Socket.IO socket.io WebSocket解决方案。
ws ws WebSocket的一个nodejs包。

1.7.3 GraphQL

地址 标签 说明
hasura graphql-engine hasura 一款强大的graphql引擎方案。
apollo-client apollo-client 适用于每个UI框架和GraphQL服务器的方案。

1.8 Hybird和跨端

地址 标签 说明
pwa pwd 渐进式web应用。
微信小程序官网 小程序/hybird 微信小程序开发官网。
支付宝小程序官网 小程序/hybird 支付宝小程序开发官网。
百度小程序官网 小程序/hybird 百度小程序开发官网。
wepy文档 小程序/hybird vue语法的小程序开发官网。
小程序工具集合 小程序/hybird 小米轻应用开发官网。
小米轻应用官网 轻应用/hybird 小米轻应用开发官网。
Oppo/vivo快应用官网 轻应用/hybird Oppo/vivo轻应用开发官网。
华为快应用官网 轻应用/hybird 华为轻应用开发官网。
React-native 文档 跨端 热门的react语法跨端工具,RN。
NativeScript 跨端 国外一款流行的跨端开发框架,支持Angular/Vue/Svelte/React。
ionic-framework 跨端 一个强大的跨平台UI工具包,用于使用HTML,CSS和JavaScript构建本机质量的iOS,Android和PWA。
quasar-framework 跨端 构建一流的高性能的Vue响应式网站、PWA、SSR、移动和桌面应用
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 后台运用极广的图片处理工具。
img2css img2css 一个有趣的库,利用box-shadow将图片以CSS的方式呈现。
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 统一的前端异常监控解决方案。
json-server json-server 一款通过本地起服务的快速mock工具。

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 本地项目管理

FE-Tools - Chrome插件

chrome-ext.png

功能:

  • 工具网站搜索(
  • 本地收藏夹网站搜索(
  • CSS属性/Moo-CSS搜索(
  • url转二维码及svg矢量图(
  • 图片压缩及转base64(
  • px/rem/vw换算计算器(
  • rgb/hsb/hex色值换算(
  • 快速翻译(
  • 简易Postman(
  • 常用正则查询(
  • 工具函数库搜索
  • 搜索自定义拓展

前往>>

安装方式

clone本仓库到本地,点击“加载已解压的拓展程序”选择本地仓库目录下的chrome-extension目录。


2.fe-tools方法/工具库

├─utils 
├─webAPI    
└─nodejs
    ├─base
    ├─imgbuild
    ├─pagebuild
    └─typicalbuild
        ├─react
        ├─vue
        ├─gulp+webpack		
        └─webpack

说明

2.1 utils 基础工具库

前端开发常用样式、方法,适用于浏览器/Nodejs。

2.2 webAPI 浏览器端封装库

浏览器端DOM操作,CSS操作,事件处理等封装。

2.3 nodejs 服务端、脚本

使用可见ijijin-cli 使用可见ijijin_builder

3.1.1 base 方法

  • fs:文件操作
  • server:简易服务器
  • util:其他工具

3.1.2 pagebuild 页面构建

3.1.3 typicalbuild 典型项目构建

  • gulp+webpack
  • webpack
  • vue
  • react

更新信息

  • 2021.03.20:更新Moo-datas;
  • 2020.12.22:Chrome拓展插件增加正则模块;
  • 2020.12.07:优化Chrome拓展插件,增加简易Postman;
  • 2020.09.15:js utils库转为ts utils;
  • 2019.04.28:新增storage封装;新增下拉刷新、数字键盘原生组件;

About

前端开发常用文档/网站地址、样式/js方法封装库、项目模板。提供Chrome拓展程序

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 41.0%
  • JavaScript 38.5%
  • Less 18.2%
  • HTML 1.2%
  • Other 1.1%