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

最新推荐文章于 2024-05-21 12:15:16 发布
最新推荐文章于 2024-05-21 12:15:16 发布
阅读量7.6k 收藏 26
点赞数 4
文章标签： 前端
原文链接：https://juejin.cn/post/6911251933386768391
版权

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

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

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

HTML

CSS

预处理器

Sass

  • sass 专业级 CSS扩展语言。

Less

  • lesscss - 动态样式表语言。

Styuls

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

样式初始化

Normalize.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

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制成。

组件库

Element

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

iView

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

Vuetify

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

Weex

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

Nuxt

React

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

组件库

Ant Design

Bulma

  • bulma 基于Flexbox的现代CSS框架

Material UI

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

Semantic UI

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

Chakra UI

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

React Bootstrap

工具库

Reactvirtualized

React Select

React Beautiful DND

React Chrono

Swr

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

React Query

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

Redux

  • redux

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

React Router

Create React App

Create React Native App

Next.js

Deno

Node.js

  • node Node.js JavaScript运行时

教程

工具集

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

Nuxt

Electron

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

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

Monaco Editor

UI 色彩搭配

后台管理项目

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

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

Google Maps JS

AntV L7

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

团队

GIT

husky

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

Pre Commit

  • pre-commit

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

lint-staged

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

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

测试框架

Jest

  • jestjs

  • 令人愉快的JavaScript测试。

AVA

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

Cypress

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

Puppeteer

IDE 和 编辑器

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

VS Code

Atom

  • Atom
  • 可破解文本编辑器

Sublime

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

编译工具

TypeScript

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

Flow

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

Babel

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

图标、字体库

图标库

Iconfont

Material Design icons

IcoMoon

Orion

  • Orion 免费SVG矢量图标

Font Awesome

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

Free Fonts

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

ScrollReveal

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

GSAP

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

Magic

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

Pixi

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

Tween

ScrollTrigger

Parallax

  • parallax

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

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

Matter

文件上传

Uppy

  • uppy

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

FileSaver

Filepond

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

React Dropzone

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 使用 <canvas> 标签的简单HTML5图表

D3

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

Incubator 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

React Native Elements

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

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 插件

vue

React

微信小程序

  • 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

主题

杂乱的工具

Epic Spinners

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 屏幕截图

Prism 代码高亮

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

Draggabilly 拖拽

Modernizr

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

html5-boilerplate 模板

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

Magic Of Css

Odometer

Proton 粒子

  • proton Javascript粒子动画库

particle.js 粒子

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

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

SkeletonView

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

Match Sorter

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

Luckysheet

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

GraphQL

Hasura

  • hasura

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

Preact

Realworld

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

Type Fest

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

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

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连接设备。

在线编辑

国内外优秀网站

国内

国外

GitHub 上优秀的前端学习指南

那些这个夏天
关注
  • 4
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
献给大学生，未来程序猿的前端学习网站
南烟阁
12-26 883
* 视频学习网站，请阅读我的《读大学的你，还在迷茫吗？快看看这些视频学习网站》 *1、博客园(http://www.cnblogs.com/) 博客园创立于2004年1月，是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。 2、网页特效(ht
GSAP实现鼠标滚动平移，然后再缩放效果
七彩猫的博客
08-18 316
【代码】GSAP实现鼠标滚动平移，然后再缩放效果。
scroll-trigger:简单的滚动触发功能
05-21
滚动触发 用法 var scrollTrigger = require('scroll-trigger'); /** * 1000 milliseconds wait for execute next scroll action * 200 tolerance for execute function */ scrollTrigger(1000, 200, function() { console.log('user scroll'); }); 更多信息
滚动视差动效实现
最新发布
weixin_45785873的博客
05-21 835
项目使用 ScrollMagic + TweenMax + Velocity + Animation.velocity + Swiper + Swiper.animate 实现的PC端效果； 使用 ScrollTrigger + GSAP + Swiper + Swiper.animate + WowJs 实现的响应式效果；
编辑器插件汇总
青蛙king的博客
10-12 1322
TinyMCE 中文文档 重点在其“配置参考”
ionic项目的gradle更换国内镜像
Guoye的专栏
12-24 551
由于ionic添加的android平台中gradle镜像默认是使用google的，网络访问会存在一定的问题，因此最好修改为国内的镜像。 打开文件build.gradle，修改以下代码： buildscript { repositories { maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/' } maven{ url 'http://maven.aliyun.com/nexus/cont
gsap系列之ScrollTrigger demo1
J_1999_0524的博客
03-18 416
【代码】gsap系列之ScrollTrigger demo1。
Visual Studio 2010 前端开发工具/扩展/插件推荐
10-22
CoffeeScript是一种简化JavaScript的编程语言，而SASS和LESS则是CSS预处理器，它们引入了变量、混入和选择器嵌套等功能，帮助整理和标准化CSS代码。通过Mindscape Web Workbench，开发者可以在Visual Studio中直接...
DUX主题提取前端工具箱PHP源码
12-10
【DUX主题提取前端工具箱PHP源码】是一款专为前端开发者设计的高效工具集合，主要功能是帮助用户从各种网站或项目中提取主题样式，以便于进行自定义开发或者快速复制现有设计风格。这款工具箱基于PHP语言编写，利用...
整理的前端 学习笔记资料
08-14
因此，"前端 学习笔记.zip"的资料对于正在学习或已经从事前端开发的人员来说，是一份宝贵的资源，能够帮助他们深化理解，解决问题，提升技能。通过深入阅读和实践，开发者可以不断磨练自己的前端技能，从而在Web应用...
黑马前端学习JS高级md
11-15
黑马前端学习JS高级系列教程是一个专门针对JavaScript高级特性和实践的资源集合，旨在帮助开发者深入理解和掌握JavaScript的核心概念，提高编程技能。本复习资料以Markdown（md）格式呈现，便于阅读和整理学习笔记。...
Redux.pdf Redux.pdf
12-18
Redux.pdfRedux.pdfRedux.pdfRedux.pdfRedux.pdfRedux.pdfRedux.pdf
AnimeSearcherOld：在线看番|弹幕支持
02-05
-AnimeSearcher- 本项目不再继续维护，转到 简介 这是一款动漫搜索工具，基于Flask + DPlayer 真•无广告，无需下载，在线看番 自动匹配哔哩哔哔哩的弹幕〜 可扩展，支持添加资源引擎 给个star嘛（/ ω＼ *） 演示 下载和使用 Windows用户可下载打包完成的文件： Linux用户需安装依赖后执行run.py pip install -r requirement.txt ：浏览器访问 127.0.0.1:5000 资源引擎 将引擎放在app/engines目录下，程序会自动加载 如果想一部分某个引擎，在其文件名前加上双下划线__即可 引擎sakura （樱花动
Reactive Programming With Java 9 无水印英文高清完整.pdf版下载
10-07
Reactive Programming With Java 9 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
React与Redux开发实例精解 (刘一奇著) 完整pdf
05-03
React与Redux开发实例精解共分四部分，全面介绍如何使用React 与Redux 进行Web 开发
一款精美图片在线压缩网站html源码源码资源下载整理.zip
08-20
【标题】：“一款精美图片在线压缩网站html源码源码资源下载整理.zip”是指一个包含HTML源代码的压缩包，这个源码用于构建一个在线图片压缩网站。网站设计精美，功能实用，允许用户上传图片并进行压缩处理，优化图片...
React小书（完整版）1
08-04
2.前端组件化（）：从个简单的例讲起|React.js书 2. 前端组件化（）：从个简单的例讲起 2.前端组件化（）：从个简单的例讲起|React
React 学习资料汇总
baidu_37307156的博客
05-08 1051
React 学习资料汇总 React学习资源汇总 React全家桶+Antd单车后台管理系统开发
前端 代码自动整理工具
05-20
前端代码自动整理工具有很多，常见的有以下几种： 1. Prettier：是一款代码格式化工具，支持多种语言，包括 JavaScript、HTML、CSS、Markdown 等，可以通过配置文件进行个性化定制。 2. ESLint：是一款 JavaScript 代码检查工具，可以检查代码风格、语法错误等，也可以通过配置文件进行个性化定制。 3. Stylelint：是一款 CSS 代码检查工具，可以检查 CSS 代码风格、语法错误等，也可以通过配置文件进行个性化定制。 4. EditorConfig：是一种配置文件格式，可以定义编辑器的基本配置，包括缩进、换行符等，可以让不同的编辑器在同一个项目中保持一致的风格。 这些工具都可以帮助前端开发人员自动整理代码，提高代码质量和可读性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值