整理一批正在学、正在看、正在用，前端工具

整理一批正在学、正在看、正在用，前端工具

注：本文转载自掘金：https://juejin.cn/post/6911251933386768391

本文章内容为平时开发自己常用常看的一些工具、库、框架、优秀的博客技术网站。都是自己使用过的，大部分都还在维护，不常维护的在这里就不搬上来的。内容多，慢慢细品。

HTML

• awesome-html5 精选的HTML5资源精选清单

CSS

• tailwindcss 与Tailwind CSS相关的很棒的事情
• awesome-css-frameworks 很棒的CSS框架列表
• awesome-css-cn CSS 资源大全中文版，内容包括：CSS预处理器、框架、CSS结构、代码风格指南、命名习惯等等
• awesome-css 精彩CSS的精选内容:)

预处理器

Sass

• sass 专业级 CSS扩展语言。

Less

• lesscss - 动态样式表语言。

Styuls

• stylus 为Node.js构建的富有表现力，健壮，功能丰富的CSS语言

样式初始化

• CSS Reset(样式重置)与Normalize.css详解

Normalize.css

• Normalize.css CSS重置的现代替代方法

Tailwindcss

• tailwindcss 实用程序优先的CSS框架，用于快速UI开发。

Materializecss

• materializecss

• Materialize，一个基于Material Design的CSS框架

Bootstrap

• bootstrap
• 最受欢迎的HTML，CSS和JavaScript框架，用于在网络上开发响应式，移动优先项目。

Postcss

• postcss
• PostCSS是使用JS插件转换样式的工具。这些插件可以使您的CSS更加整洁，支持变量和混合，可以转换将来的CSS语法，内联图像等等。
• PostCSS接收一个CSS文件，并提供一个API来分析和修改其规则（通过将其转换为 Abstract Syntax Tree）。然后，插件可以使用此API进行许多有用的操作，例如自动查找错误或插入供应商前缀。

Javscript

• awesome-javascript-cn JavaScript 资源大全中文版，内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎等
• awesome-javascript 很棒的浏览器端JavaScript库，资源和闪亮的东西的集合。
• standardjs JavaScript样式指南，带有linter和自动代码修复程序
• You-Dont-Know-JS 有关JavaScript的书籍系列。@YDKJS在Twitter上。

TodoMVC

• todomvc 帮助您选择MV *框架-适用于React.js，Ember.js，Angular等的Todo应用程序

date-fns

• date-fns 现代JavaScript日期实用程序库

函数库

Underscore & Lodash

• lodash

• underscore

• 现代化的JavaScript实用程序库，提供模块化，性能和附加功能。

Ramda

• ramdajs 实用的功能性Javascript

Moment

• momentjs 用javascript解析，验证，操作和显示日期。

day.js

• day.js 具有相同现代API的Day.js 2KB不可变日期时间库替代Moment.js

Mathjs

• mathjs 广泛的JavaScript和Node.js数学库

Polish

• polish.js 用于编写JavaScript样式的轻量级工具集

Chance

• chancejs JavaScript的随机生成器帮助器

HTTP

Httpie

• httpie 就像/ aitch-tee-tee-pie / 适用于API时代的现代，用户友好的命令行HTTP客户端。JSON支持，颜色，会话，下载，插件等。

Netdata

• netdata 实时性能监控

Axios

• axios 基于Promise的HTTP客户端，用于浏览器和node.js

json-server

• json-server 在不到30秒的时间内（严重）获得具有零编码的完整假REST API

Svelte

• svelte 控制论增强的Web应用程序

Vite

• vite 由本机ESM驱动的Web开发构建工具。它很快。

Vue.js

• vuejs 官网 Vue.js是一个渐进的，可逐步采用的JavaScript框架，用于在Web上构建UI。
• awesome-vue 与Vue.js相关的精彩内容精选清单
• best-resume-ever 快速建立 轻松制作多张漂亮的简历，创造有史以来最好的简历！用Vue和LESS制成。
  • vue 案例 众多 vue 组件库

组件库

Element

• element 适用于Web的Vue.js 2.0 UI工具包

iView

• iview 基于Vue.js 2.0的高质量UI工具包

Vuetify

• vuetifyjs Vue的组件框架

Ant Design Vue

• antdv 基于Ant Design和Vue的企业级UI组件。

Quasar Framework

• quasar Quasar Framework-在创纪录的时间内构建高性能VueJS用户界面

Vue Cli

• vue cli Vue.js开发的标准工具

Vuex

• vuex Vue.js的集中状态管理。

vue-router

• vue-router Vue.js的官方路由器

Weex

• weex 用于构建移动跨平台UI的框架

Nuxt

• nuxtjs 直观的Vue框架

React

• reactjs 用于构建用户界面的声明性，高效且灵活的JavaScript库。
• awesome-react 关于React生态系统的很棒的东西的集合

组件库

Ant Design

• ant.design UI设计语言和React UI库

Bulma

• bulma 基于Flexbox的现代CSS框架

Material UI

• material-ui 使用React组件进行更快，更简单的Web开发。建立自己的设计系统，或从材料设计开始。

Semantic UI

• Semantic-UI 语义是一个基于自然语言的有用原理的UI组件框架。

Chakra UI

• chakra-ui 适用于您的React应用程序的简单，模块化和可访问的UI组件

React Bootstrap

• react-bootstrap

工具库

Reactvirtualized

• reactvirtualized React组件可有效呈现大型列表和表格数据

React Select

• react-select React.js的Select组件

React Beautiful DND

• react-beautiful-dnd 使用React轻松美观地拖放列表

React Chrono

• react-chrono React的现代时间轴组件

Swr

• swr React Hooks库用于远程数据获取

React Query

• react-query 在React中获取，缓存和更新异步数据的钩子

Redux

• redux

• JavaScript应用程序的可预测状态容器

React Router

• react-router React的声明式路由

Create React App

• create-react-app 通过运行一个命令来设置现代Web应用程序。

Create React Native App

• create-react-native-app 创建可在iOS，Android和Web上运行的React Native应用

Next.js

• nextjs React框架

Deno

• deno 社区

• deno 安全的JavaScript和TypeScript运行时

Node.js

• node Node.js JavaScript运行时

教程

• node-lessons 《Node.js 包教不包会》
• awesome-nodejs 令人愉快的Node.js软件包和资源
• nodepractices Node.js最佳实践列表（2020年12月）
• cnode Node 社区
•  

工具集

nodemon

• nodemon 监视node.js应用程序中的任何更改并自动重启服务器-非常适合开发

pm2

• pm2 带有内置负载均衡器的Node.js Production Process Manager。

...

AdminBro

• AdminBro是一个用node.js编写的应用程序的管理面板

Cote

• cote.js 用于构建零配置微服务的Node.js库。

Socket.io

• socket.io 实时应用程序框架（Node.JS服务器）

Nw

• nwjs 直接从DOM / WebWorker调用所有Node.js模块，并启用一种使用所有Web技术编写应用程序的新方式。

Straip

• strapi 开源Node.js Headless CMS可轻松构建可定制的API

Express

• express 快速，简单，极简的Node Web框架。

Koa

• koa 使用ES2017异步函数的node.js的表达中间件

egg

• eggjs 为使用Node.js和Koa构建更好的企业框架和应用而生

Adonis

• adonisjs Node.js框架高度关注开发人员的人机工程学，稳定性和信心

Nest

• nest
• 一个渐进式的Node.js框架，用于在TypeScript和JavaScript（ES6，ES7，ES8）之上构建高效，可伸缩的企业级服务器端应用程序

Next

• nextjs React框架

Nuxt

• nuxtjs 直观的Vue框架

Electron

• electronicjs
• Electron框架使您可以使用JavaScript，HTML和CSS编写跨平台的桌面应用程序。它基于Node.js和 Chromium，并且被Atom编辑器、VSCode和许多其他应用程序使用。

puppeteer

• puppeteer

Puppeteer是一个Node库，它提供了高级API来通过DevTools协议控制Chrome或Chromium 。Puppeteer默认情况下无头运行，但可以配置为运行完整（无头）的Chrome或Chromium。

富文本编辑器、代码编辑器

富文本编辑器

Simditor

• simditor 便捷的所见即所得编辑器

tui.editor

• tui.editor Markdown所见即所得编辑器。GFM标准+图表和UML可扩展

Quill

• quilljs Quill是一种现代的WYSIWYG编辑器，旨在实现兼容性和可扩展性。

Draft

• draftjs 一个用于构建文本编辑器的React框架。

MavonEditor

• mavonEditor mavonEditor-基于Vue的markdown编辑器，支持多种个性化功能

Tiptap

• tiptap Vue.js的无渲染富文本编辑器

Vue Quill Editor

• vue-quill-editor @quilljs的编辑器组件@vuejs

Tinymce

• tinymce

• TinyMCE是世界上最受欢迎的基于Web的开源WYSIWYG编辑器。用于富文本编辑。适用于React，Vue和Angular

Simplemde

• simplemde

• 一个简单，美观，可嵌入的JavaScript Markdown编辑器。无论是初学者还是专家，都可轻松编辑。具有内置的自动保存和拼写检查功能。

Simplemde Markdown Editor

• simplemde-markdown-editor

• 一个简单，美观，可嵌入的JavaScript Markdown编辑器。不论是初学者还是专家，都可轻松编辑。具有内置的自动保存和拼写检查功能。

Editor

• editor.js 具有干净JSON输出的块样式编辑器

Medium Editor

• medium-editor Medium.com所见即所得的编辑器克隆。使用contenteditable API来实现RTF解决方案。

代码编辑器

CodeMirror

• codemirror 浏览器内代码编辑器

Monaco Editor

• monaco-editor 基于浏览器的代码编辑器

UI 色彩搭配

• web 安全色

• Adobe Color

• 中国色

• uigradients

• palettable 利用数百万设计师的知识生成漂亮的调色板。

• colorsupplyyy 设计师和插画家的选色器

• webgradients 是180个线性渐变的免费集合，您可以将其用作网站任何部分的内容背景。轻松复制CSS3跨浏览器代码

• colrd 创造色彩灵感并与世界分享。

• 配色表 网页设计常用色彩搭配表

后台管理项目

Vue-Element-Admin

• vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。

iview-admin

• iView Admin 是基于 Vue.js，搭配使用 iView UI 组件库形成的一套后台集成解决方案，由 TalkingData 前端可视化团队部分成员开发维护。

ant-design-pro

• ant-design-pro 像专业人士一样使用Ant Design！

• 开箱即用的中台前端 / 设计解决方案。

vue-admin-beautiful

• vue-admin-beautiful
• vue3，vue3.0，vue，vue3.x，vue.js，后台管理，管理员，vue-admin，vue-element-admin，主线版本基于element-plus，element-ui，ant-design-vue三者并行开发维护，同时支持电脑，手机，平板，切换分区查看不同的vue版本，element-plus版本已发布（vue3，vue3.0，vue，vue3.x，vue.js）

antd-admin

antd-admin 基于Ant Design和UmiJS的企业应用程序的出色前端解决方案

AdminLTE

• AdminLTE AdminLTE-基于Bootstrap 4的免费管理仪表板模板

Tabler

• tabler Tabler是免费的开源Bootstrap构建的HTML Dashboard UI套件

GIS 和 BIM

• BIM+GIS是什么？BIM+定位系统能干嘛？
• 地理信息系统（GIS）是用来管理地理空间分布数据的计算机信息系统。

cesium

• Cesium 官网
• Cesium 是三维地理可视化的常用库，在大尺度的可视化（地形、建筑、地球）中十分常用。

Leaflet

• Leaflet 是最著名的前端地图可视化库，它开源、体积小、结构清晰、简单易用。
• 适用于移动设备的交互式地图的JavaScript库

mapbox

• mapbox 官网
• Mapbox GL JS 是目前最新潮的前端地图库，它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的，但一般依赖于Mapbox公司提供的底图服务。
• Mapbox.js 是 Leaflet 的一个扩展插件（与 Mapbox GL JS 不同）。

ArcGIS

• ArcGIS API for JS 是较为学院派的前端地图库，它是ArcGIS开发套件中的一部分，和桌面端和服务器端ArcGIS软件有较好的协作。它不开源且收费不低，在学术场景下较为常用。

Openlayers

• Openlayers 也是常用的前端地图库，它开源，相比于Leaflet更加复杂和完备。

百度地图 JS /百度地图 GL

• 百度地图 JS API 是传统的二维地图，百度地图 API GL 是三维地图，它们依赖百度地图提供的后台服务。除了地图服务外还有检索、导航、实时交通等关联服务。开发者有免费的限额。

高德地图 JS

• 高德地图 JS API 与百度类似。

Google Maps JS

• 谷歌地图 JS API 在境外有更好的数据。

AntV L7

• AntV L7 是空间数据可视化库，它可以使用高德地图等协作构建地图可视化。

团队

GIT

• learnGitBranching 交互式的git可视化挑战和教育！
• Git使用教程：最详细、最傻瓜、最浅显、真正手把手教！
• 「一劳永逸」一张脑图带你掌握Git命令
• git基本操作，一篇文章就够了！
• 如何优雅地使用 Git
• VSCode 中使用Git实践，学会了效率翻倍
• 超详实Git简明教程与命令大全
• 优雅的提交你的 Git Commit Message
• 高频使用的 Git 命令

husky

• husky
• Git钩子变得容易 纬！预提交钩子

Pre Commit

• pre-commit

• 自动在您的git储存库中安装git pre-commit脚本，该脚本在pre-commit上运行您的npm test

lint-staged

• lint-staged 在git暂存文件上运行linters

Plop

• 一致性变得简单

• Plop是一个小工具，可以节省您的时间并帮助您的团队以一致的方式构建新文件。

hyper

• hyper 基于Web技术的终端

Rocket.Chat

• rocket.chat/ 团队沟通的终极免费开源解决方案。

静态网站生成器

• 静态网站生成器（SSG，Static Site Generator）是指能够生成一堆 HTML、CSS、JS 文件，方便你快速部署到 WEB 服务器上而不需要安装和配置数据库的工具。
• 静态网站具有速度快，稳定且易于维护的特点。

Gatsby

• Gatsby 使用React构建快速、现代化的应用程序和网站

react-static

• react-static 一个用于React的渐进式静态站点生成器。

Hexo

• hexo 由Node.js提供支持的快速、简单且功能强大的博客框架。

VuePress

• VuePress  简约的Vue供电的静态网站生成器

Docusaurus

• docusaurus 易于维护的开源文档网站。

Docsify

• docsify 一个神奇的文档站点生成器。

API 开发工具

Hoppscotch

• hoppscotch

• 一个免费，快速，美观的API请求构建器，供10万多个开发人员使用。

• Hoppscotch 其实是 Postwoman，是基于nodejs写的，主要特点除了可以支持主流的Restful接口调试之外，还支持 GraphQL和 WebSocket。

Postman

• postman
• Postman是用于API开发的协作平台。Postman的功能简化了构建API的每个步骤并简化了协作，因此您可以更快地创建更好的API。

代码规范

ESLint

• ESLint 查找并修复JavaScript代码中的问题。

Prettier

• Prettier 是一个自以为是的代码格式化程序。

构建工具：Build Tools

Parcel

• parcel 快速，零配置的Web应用程序捆绑程序

• Parcel 不仅提供现代前端开发所需的各种功能，还有个碾压性的优势：零配置！这是它与依靠大量 "loaders" 的 Webpack 最大区别。

Webpack

• webpack
• javascript和朋友的捆绑器。将许多模块打包到少数捆绑资产中。代码拆分允许按需加载应用程序的某些部分。通过“加载程序”，模块可以是CommonJs，AMD，ES6模块，CSS，图像，JSON，Coffeescript，LESS等。

Gulp

• gulp

• 自动化和增强您的工作流程的工具包

Rollup

• rollupjs

• 下一代ES模块捆绑器

测试框架

Jest

• jestjs

• 令人愉快的JavaScript测试。

AVA

• ava
• Node.js测试运行器，使您充满信心地进行开发

Cypress

• cypress 对浏览器中运行的所有内容进行快速，轻松和可靠的测试。

Puppeteer

• Puppeteer 无头的Chrome Node.js API

IDE 和 编辑器

集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如微软的Visual Studio系列，Borland的C++ Builder、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。

VS Code

• vscode

Atom

• Atom
• 可破解文本编辑器

Sublime

• sublime
• 复杂的文本编辑器，用于代码，标记和散文

编译工具

TypeScript

• typescript TypeScript是JavaScript的超集，可编译为干净的JavaScript输出。

Flow

• flow 在JavaScript中添加静态类型，以提高开发人员的工作效率和代码质量。

Babel

• babel Babel是用于编写下一代JavaScript的编译器。

图标、字体库

图标库

Iconfont

• iconfont 阿里巴巴矢量图标库

Material Design icons

• Material Design icons Google的Material Design图标，其中还包含了颜色板预览

IcoMoon

• IcoMoon 免费矢量图标

Orion

• Orion 免费SVG矢量图标

Font Awesome

• fontawesome 标志性的SVG，字体和CSS工具包

SuperTinyIcons

• SuperTinyIcons 每个1KB以下！Super Tiny Icons是您喜欢的网站和应用程序徽标的微型SVG版本

Feather

• feather 简单漂亮的开源图标

Zondicons

• zondicons 一组免费的高级SVG图标，供您在数字产品上使用

Ionicons

• ionicons 由Ionic打造的高级手工制作图标，适用于世界各地的Ionic应用程序和Web应用程序

Maki

• Maki POI图标集
• Maki是专为地图设计师设计的图标集。Maki包括 公园，博物馆和礼拜场所等常见景点的图标。每个图标都可用作SVG，有两种尺寸：11px x 11px和15px x 15px。

字体

Google Fonts

• Google 字体

Free Fonts

• free font

CSS 动画库

• 挑选的是一些近一年都在维护的动画库

Keyframes

• keyframes 关键帧可帮助您编写更好的CSS

Spinkit

• spinkit 用CSS制作动画的加载指示器的集合

Animate.css

• animate
• Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调，主页，滑块和引导注意的提示。

Anime

• anime JavaScript动画引擎

Svg

• svgjs 用于操作和动画SVG的轻量级库

Snap

• snapsvg 用于现代SVG图形的JavaScript库。

Dynamics

• dynamicsjs Dynamics.js是一个JavaScript库，用于创建基于物理的动画

Three

• three.js JavaScript 3D库

ScrollReveal

• scrollrevealjs 在元素滚动到视图时对其进行动画处理。

GSAP

• GSAP 适用于现代网络的专业级JavaScript动画

Magic

• magic 具有特殊效果的CSS3动画

Pixi

• pixi.js HTML5创建引擎：使用最快，最灵活的2D WebGL渲染器创建精美的数字内容。

Tween

• tween.js JavaScript动画引擎

ScrollTrigger

• ScrollTrigger 让您的页面对滚动更改做出反应。

Parallax

• parallax

• 对智能设备的方向做出反应的视差引擎

• 挺好看的，但是很久没维护了

Matter

• Matter

文件上传

Uppy

• uppy

• Web浏览器的下一个开源文件上传器

FileSaver

• filesaver HTML5 saveAs() FileSaver实现

Filepond

• filepond 灵活有趣的JavaScript文件上传库

React Dropzone

• react-dropzone 使用React.js的简单HTML5拖放区。

UI

Layui

• layui 采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写形式，极低门槛，拿来即用。

Styled Components

• styled-components 组件年龄的视觉图元。使用ES6和CSS的最佳功能来轻松设置应用样式

Tailwindcss

• tailwindcss 实用程序优先的CSS框架，用于快速UI开发。

Storybook

• storybook UI组件浏览器。为React，Vue，Angular，Ember，Web Components等开发，记录和测试！

Ionicframework

• ionicframework

• 功能强大的跨平台UI工具包，用于使用HTML，CSS和JavaScript构建本机质量的iOS，Android和Progressive Web Apps。

Material Design Lite

• getmdl HTML / CSS / JS中的材料设计组件

Reveal.js

• revealjs 是一个开放源代码HTML表示框架。它是一种工具，使任何使用Web浏览器的人都可以免费创建功能齐全且美观的演示文稿。

Headlessui

• headlessui 完全无样式的，完全可访问的UI组件，旨在与Tailwind CSS完美集成。

图表、数据可视化

Chart

• chartjs 使用  标签的简单HTML5图表

D3

• d3 借助SVG，Canvas和HTML使数据栩栩如生。

Incubator Superset

• superset.incubator Apache Superset是一个数据可视化和数据探索平台

echarts

• echarts Apache ECharts（正在孵化）是用于浏览器的功能强大的交互式图表和数据可视化库

移动端

uni-app

• uni-app 是使用Vue语法开发小程序，H5，App的统一框架

weex

Create React Native App

Flutter

MPVue

• mpvue 基于Vue.js的小程序开发框架，从长期支持Vue.js语法和内置工具体系。

Taro

• taro

• 开放式跨端跨框架解决方案，支持使用阵营/ Vue公司/ NERV等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ小程序/ H5等应用。

Lottie Web

• lottie-web 在Web，Android和iOS以及React Native上本地渲染After Effects动画。

DiscreteScrollView

• DiscreteScrollView

• 可滚动的项目列表，以当前元素为中心，并提供易于使用的API（用于酷炫的项目动画）。

Android-SpinKit

• Android-SpinKit Android加载动画

React Native Elements

• react-native-elements 跨平台React Native UI工具包

React Native Firebase

• react-native-firebase
• 经过测试的功能丰富的模块化Firebase实施，用于React Native。同时支持所有Firebase服务的iOS和Android平台。

React Native Snap Carousel

• react-native-snap-carousel
• React Native的滑动器/旋转木马组件，具有预览，多种布局，视差图像，对大量项目的高性能处理等。与Android和iOS兼容。

React Native Calendars

• react-native-calendars 关于反应本机日历组件 ️

Joplin

• joplin
• Joplin-具有Windows，macOS，Linux，Android和iOS同步功能的开源笔记记录和待办事项应用程序

Appium

• appium  适用于iOS，Android和Windows Apps的自动化。

NativeBase

• NativeBase React Native的基本跨平台UI组件

Framework7

• framework7 用于构建iOS和Android应用程序的全功能HTML框架

VSCode 插件

• 具体可以看 CRPER 掘金的 VSCode 文章，从第一篇开始，好像总共十五篇，下面扒下一些用过的

• VS Code折腾记 - (1)扯淡

vue

• vue-vscode-snippets vue 代码片段
• Vuter
• Vue TypeScript Snippets : 针对vue的ts代码片段

React

• ES7 React/Redux/GraphQL/React-Native snippets :最好用的snippet汇总,非常全面,墙裂推荐!!!
• React Native Snippet: RN 代码片段
• react-explorer-addons: 增加鼠标右键直接生成react的组件模板,好不好用,用过的才知道
• React PropTypes Intellisense: React props的智能提示
• vscode-styled-components: 对styled-componnents的支持,高亮包括智能提示
• styled-components-snippets : styled-components的代码片段
• React PropTypes Generate : 一键生成react的proptypes , 不用ts的小伙伴必备

微信小程序

• mpvue snippets: mpvue的一些代码片段,以及部分原生小程序的代码提示
• minapp : 用VS Code写小程序必备的插件,里面有众多实用的特性集成

代码测试

• Jest: 让你写Jest代码有IDE的感觉
• Mocha Test Explorer: 针对mocha测试的GUI话,会给编辑器多一个独立的版块
• Coverage Gutters : 可以直观的看到你代码覆盖率的区域

代码可视化改善

• Polacode : 生成精美的代码截图,很漂亮,根据你当前主题配色生成的
• vscode-pigments: 代码页面展示颜色代码并展示对应的颜色,非常实用
• Json Editor : 非常实用的可视化JSON编辑,不容错过
• Subtle Match Brackets:快速高亮你配置的闭合,对于聚焦我们的光标区块代码很有帮助
• vscode-live-server : 非常全面的HTML预览工具,支持众多实际开发需要的特性,比如https,代理,cros

格式化

• prettier
• ESLint
• Prettier ESLint

主题

• Dainty
• Umi
• Min Theme
• Snazzy Plus
• Hypersubatomic
• VSCode Great Icons
• Vue Theme
• Palenight Theme
• Horizon Theme

杂乱的工具

Epic Spinners

• epic-spinners 易于使用的CSS微调器集合与Vue.js集成

Nprogress

• nprogress 适用于YouTube，Medium等上的苗条进度条

Nodemailer

• nodemailer 使用Node.JS发送电子邮件-就像蛋糕一样容易！

Driver

• driver 轻巧，无依赖的原始JavaScript引擎，可在页面上吸引用户的注意力

Dayjs

• dayjs 具有相同现代API的Day.js 2KB不可变日期时间库替代Moment.js

Glider

• glider.js 快速，轻巧，无依赖的本地滚动轮播替代品！

Mockjs

• mock 模拟数据生成器

Faker

• faker.js 在Node.js和浏览器中生成大量逼真的假数据

Sailsjs

• sailsjs 适用于Node.js的实时MVC框架

Swiper

• swiper 最现代的移动触摸滑块，具有硬件加速的过渡

fullPage 全屏滚动

• fullPage Alvaro Trigo的fullPage插件。快速简单地创建全屏页面

screenfull.js 全屏

• screenfull 用于JavaScript全屏API的跨浏览器使用的简单包装

html2canvas 屏幕截图

• html2canvas 使用JavaScript的屏幕截图

Prism 代码高亮

• prism 轻巧，健壮，优雅的语法突出显示。

Draggabilly 拖拽

• draggabilly 使该元素可拖动

Modernizr

• modernizr Modernizr是一个JavaScript库，可检测用户浏览器中的HTML5和CSS3功能。

html5-boilerplate 模板

• html5-boilerplate 专业的前端模板，用于构建快速，健壮和适应性强的Web应用程序或网站。

Magic Of Css

• magic-of-css CSS课程，使您成为魔术师。

Odometer

• odometer 轻松平滑地过渡数字

Proton 粒子

• proton Javascript粒子动画库

particle.js 粒子

• particle 用于创建粒子的轻量级JavaScript库

ParticleEffectsButtons

• ParticleEffectsButtons 一个小的库，可用于使按钮和其他元素上的粒子效果破裂

Fabric.js 画布

• fabric
• Hyperledger Fabric是用于开发解决方案和应用程序的企业级许可的分布式分类帐框架。其模块化和通用设计满足了广泛的行业用例。它提供了一种独特的共识方法，可在保持隐私的同时实现大规模性能。

Sortable

• Sortable 通过拖放创建列表并重新排序。适用于现代浏览器和触摸设备

jsPDF

• jsPDF 面向所有人的客户端JavaScript PDF生成。

Video

• videojs
• Video.js-开源HTML5和Flash视频播放器

Better Scroll

• better-scroll 受iscroll的启发，它支持更多功能并具有更好的滚动性能

PDF

• pdf

• JavaScript中的PDF阅读器

Clipboard

• clipboardjs

• 现代复制到剪贴板。没有闪光灯。压缩后只有3kb

Nylas Mail

• nylas-mail
• 基于现代网络的可扩展桌面邮件应用程序。货叉欢迎！

Sheet

• sheetjs SheetJS社区版-电子表格数据工具包

React Content Loader

• react-content-loader SVG供电的组件可轻松创建骨架荷载。

SkeletonView

• SkeletonView 向用户显示正在发生的事情并为他们准备要等待的内容的一种优雅方式

Match Sorter

• match-sorter JavaScript中数组的简单，预期和确定性最佳匹配排序

Luckysheet

• Luckysheet 是像excel这样的在线电子表格，功能强大，易于配置且完全开源。

GraphQL

Hasura

• hasura

• 具有细粒度访问控制的Postgres具有快速，即时的实时GraphQL API，还可以触发数据库事件的Webhooks。

Preact

• preactjs
• 具有相同现代API的快速3kB React替代方案。组件和虚拟DOM。
• 您可以在awesome-preact列表中找到一些很棒的库

Realworld

• realworld
• “所有演示应用程序之母” —由React，Angular，Node，Django等提供支持的示例性全栈Medium.com克隆

Type Fest

• 类型节 基本TypeScript类型的集合

Edex UI

• edex-ui 具有高级监控和触摸屏支持的跨平台，可定制的科幻终端仿真器。

Serverless

• serverless
• 无服务器框架–使用AWS Lambda，Azure Functions，Google CloudFunctions及更多功能，利用无服务器架构构建Web，移动和IoT应用！

Meteor

• meteor JavaScript应用平台

Snowpack

• snowpack WASM支持的前端构建工具。快速，轻巧，无捆绑的ESM。✌️

Headless Recorder

• headless-recorder 无头记录器是Chrome扩展程序，可记录您的浏览器交互并生成人偶或剧本脚本。

.gitignore

• gitignore 有用的.gitignore模板的集合

Cheatsheets

• cheatsheets 备忘录

LightHouse

• LightHouse 是一个开源的自动化工具，用于改进网络应用的质量。

• 可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。

Can I Use

• caniuse 来自caniuse.com的原始浏览器/功能支持数据

Carbon

• Carbon 创建并共享源代码的精美图片

ios font

• ios font

• IOS 字体支持查询和 IOS 系统自带字体查询。

TinyPNG

• TinyPNG

• PNG/JPG 图片在线压缩利器，智能 PNG 和 JPEG 图片压缩。

• TinyPNG 使用智能有损压缩技术将您的 PNG 文件的文件大小降低。 通过选择性的减少图片中的颜色，只需要很少的字节数就能保存数据。 对视觉的影响几乎不可见，但是在文件大小上有非常大的差别。

Shape Divider

• Shape Divider

• 定制各种形状的网站分区 SVG 的工具，调整好了自己想要的形状之后，可以一键复制和下载。

json 格式化

• json 格式化

• 这是一个 json 在线解析的网站

• 功能包括了：json 在线解析，json 格式化，json 格式验证，json 转 xml，xml 转 json，json 压缩，json 转义，js 混淆加密，JSON 转实体，json 在线，JSON 校验。

FeHelper

• JSON 美化工具
• FH 有一系列的简便工具

sojson

• sojson 这是一个功能多到发指的网站！

Docz

• docz 记录您的东西从未如此简单！

Bug 检测工具

• Fundebug
• vue-devtools 浏览器devtools扩展，用于调试Vue.js应用程序。
• redux-devtools-extension Redux DevTools扩展。
• react-native-debugger 基于React Native官方调试器的独立应用程序，包括React Inspector / Redux DevTools
• ndb 是由Chrome DevTools支持的Node.js改进的调试体验
• debug 一个模仿Node.js核心调试技术的微型JavaScript调试实用程序。可在Node.js和Web浏览器中使用
• wproxy HTTP，HTTP2，HTTPS，Websocket调试代理
• spy-debugger 微信调试，各种WebView样式调试，手机浏览器的页面真机调试。便捷的远程调试手机页面，抓包工具，支持：HTTP / HTTPS，无需USB连接设备。

在线编辑

• jsbin 协同JavaScript调试应用
• Codepen

国内外优秀网站

国内

• 掘金
• 张鑫旭大佬的博客
• 廖雪峰的官方网站
• 阮一峰的网络日志
• 凹凸实验室
• 美团技术团队
• 蚂蚁体验科技
• ElemeFe
• 现代 JavaScript 教程
• ES6 入门教学
• ...

国外

• CSS-Tricks
• 30 seconds of code
• scotch
• freeCodeCamp
• stackoverflow
• sitepoint
• egghead
• SMASHING
• samanthaming
• exercism
• ...

GitHub 上优秀的前端学习指南

• frontendchecklist 适用于现代网站和细致开发人员的完美前端清单
• front-end-interview-handbook 著名的h5bp“前端求职面试问题”的答案不废话
• tech-interview-handbook 帮助您完成下一次编码面试的材料
• Daily-Interview-Question 工作日每天一道大厂前端面试题，一年后再回头，会感谢曾经努力的自己！
• 开发人员设计资源 从库存照片，Web模板，CSS框架，UI库，工具等中精选设计和UI资源的清单
• javascript JavaScript样式指南
• Javascript 使用Javascript实现的所有算法的存储库（仅用于教育目的）
• javascript算法 用JavaScript实现的算法和数据结构，并带有解释和进一步阅读的链接
• learn-javascript 使用Javascript的GitBook教学编程基础
• JavaScript questions 一长串（高级）JavaScript 问题及其解释
• clean-code-javascript 适用于JavaScript的简洁代码概念
• javascript30 30天JS挑战
• 33-js-concepts 每个JavaScript开发人员都应该知道的33个概念。
• fcc FCC中国开源代码库和课程。学会编码和帮助非营利组织。
• awesome-interview-questions 精选的面试问题清单。随时贡献！
• leetcode-solution LeetCode Solutions: A Record of My Problem Solving Journey.( leetcode题解，记录自己的leetcode解题之路。
• project-based-learning 精选的基于项目的教程列表
• free-programming-books-zh_CN 免费的计算机编程类中文书籍，欢迎投稿
• You-Dont-Know-JS 有关JavaScript的书籍系列。@YDKJS在Twitter上。
• freecodecamp freeCodeCamp.org的开源代码库和课程表。在家学习编码。
• javascript-patterns JavaScript模式
• project-guidelines 一组JavaScript项目的最佳做法
• 冴羽的博客 冴羽目前写的四个系列：JavaScript深度系列，JavaScript专题系列，ES6系列，React系列。
• 现代js备忘单 有关现代项目中经常遇到的JavaScript知识的备忘单。
• fe-interview 前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！
• reactjs-interview-questions 前500ReactJS面试问答列表….编码练习题即将推出！！
• 30-seconds-of-interviews 精选的常见面试问题集合，可帮助您为下一次面试做准备。
• hiring-without-whiteboards 招聘流程没有中断的公司
• awesome 关于各种有趣主题的真棒列表
• AndroidInterview-Q-A 顶级互联网公司android面试问答