前端工具和网站分享

更新: 1/14/2026字数: 0 字 时长: 0 分钟

基础教程

• MDN Web 开发者指南

  API 查阅文档

• JavaScript 教程

  通俗易懂的 JavaScript 教程

• ES6 入门教程

  阮一峰编写的 ES6 教程

• 现代 JavaScript 教程

  流行的 JavaScript 教程

• Node.js 学习指南

  Node.js 学习教程和笔记

• TypeScript 入门教程

  通俗易懂的 TypeScript 教程

• FreeCodeCamp

  免费编程学习平台

• Frontend Masters

  前端大师课程

• JavaScript30

  30 天纯 JS 挑战

• CSS-Tricks

  CSS 技巧和教程

• React 官方文档

  React 官方学习资源

• Vue 官方文档

  Vue 官方学习资源

• Web.dev

  Google 开发的学习平台

前端代码规范

• 腾讯前端代码规范

  腾讯前端代码规范

• 京东前端代码规范

  京东前端代码规范文档

• Bootstrap 编码规范

  适合个人和小团队的代码规范

• Airbnb 前端代码规范

  国外企业的前端代码规范

• Google 风格指南

  Google 代码风格指南

• Standard JS

  JavaScript 标准风格

• Husky

  Git 钩子工具

• Commitlint

  Git 提交信息规范

时间处理

• dayjs

  轻量级日期处理库

• moment

  解析、验证、操作和显示日期

• date-fns

  用于操作日期的函数库

• luxon

  用于操作日期的库

• js-joda

  用于操作日期的库

请求处理

• axios

  基于 Promise 的 HTTP 客户端

• fetch

  基于 Promise 的 HTTP 客户端

• request

  基于 Promise 的 HTTP 客户端

• node-fetch

  基于 Promise 的 HTTP 客户端

图片处理

• html2canvas

  页面截图

• medium-zoom

  为图片提供可缩放的功能

• qrcode

  生成二维码

常用前端 UI 库

• ElementUi Plus

  PC 端 UI 库（支持 Vue3）

• Vant4

  轻量、可靠的移动端组件库

• AntDesign

  开箱即用的中台前端（React）

• Nutui

  京东风格的轻量级移动端 UI 库

• Bootstrap

  最流行的 CSS 框架

• Tailwind CSS

  实用工具优先的 CSS 框架

• Material UI

  React Material 风格组件库

• Chakra UI

  简单模块化的 React 组件库

• Quasar

  高性能 Vue 组件库

CSS 样式

• Uiverse

  UI 设计元素分享平台

• Web 安全色

  CSS 安全色参考

• CSS Tricks 效果大全

  CSS 各种效果实现

• Animista

  CSS 动画库

• CSS Grid Generator

  CSS 网格生成器

• Flexbox Froggy

  Flex 布局学习游戏

• Neumorphism

  新拟态风格生成器

• CSS Gradient

  CSS 渐变生成器

• Clippy

  CSS clip-path 生成器

WEB 图标

• Font Awesome

  最流行的图标集

• Feather

  简洁美观的开源图标

• Material Design Icons

  轻快、精美的符号图标

• IconFont

  阿里巴巴矢量图标库

• Ionicons

  精美的开源图标集

• Heroicons

  精美的 SVG 图标

• Remix Icon

  开源中性风图标

• Tabler Icons

  可定制的免费图标

在线工具

• CodePen

  前端在线测试和演示工具

• TinyPNG

  PNG/JPG 图片在线压缩工具

• Carbon

  代码转图片工具

• CODEIF

  变量方法起名工具

• JSFiddle

  在线代码测试工具

• StackBlitz

  在线 IDE

• Can I use

  浏览器兼容性查询

• BundlePhobia

  npm 包大小分析

• Figma

  在线设计工具

• Any-rule

  正则大全

• Webcode.tools

  Web 代码生成工具

• CSS Grid Generator

  grid 布局

• Nginx 配置可视化生成

  可视化生成 Nginx 配置文件

• FANCY-BORDER-RADIUS

  css圆角生成器

• Easing Gradients

  css 渐变

• clip-path 生成器

  css 裁剪路径生成器

• Neumorphism/Soft UI generator

  新拟态风格生成器

• Get Waves SVG

  svg 波型生成器

• jsDelivr

  js 库 CDN

• esm.sh

  js 库 CDN

• remove.bg

  图片背景移除工具

• BgRemover

  图片背景移除工具

• docsmall

  文档压缩工具

• Squoosh

  Google 开源的图片压缩工具

• Shields.io

  生成项目状态徽章

• Star history

  查看项目 Star 趋势

• ProcessOn

  画流程图

• Draw.io

  画流程图

• Excalidraw

  在线文件转换器

• Convertio

  文件转换器

• Yikm

  小霸王在线游戏机

调试抓包

• Whistle

  代理抓包工具

• Fiddler

  使用人数最多的抓包工具

• Charles

  跨平台抓包工具

• Wireshark

  网络协议分析工具

• Postman

  API 开发和测试工具

• Chrome DevTools

  Chrome 开发者工具

富文本编辑器

• WangEditor 5

  轻量、简单易用。SSR:优。场景:中文项目

• TinyMCE

  功能全面、插件丰富。SSR:良。场景:企业级应用

• Jodit

  轻量、响应式。SSR:良。场景:移动端优先

• Editor.js

  JSON输出、模块化。SSR:中。场景:结构化内容

• Affine

  现代化UI、协作。SSR:中。场景:知识管理

• CKEditor 5

  Office互操作。SSR:良。场景:企业文档

• Vditor

  支持三种模式。SSR:优。场景:技术文档

• Cherry Markdown

  腾讯开源。SSR:中。场景:纯Markdown

• NeuraPress

  微信排版专用。SSR:优。场景:公众号内容

AI 工具相关

• TensorFlow.js

  JavaScript 机器学习库

• screenshot-to-code

  将设计图转换为代码

• ChatGPT-Next

  私人 ChatGPT 网页应用

• Runway ML

  创意 AI 工具集

• GPT-3 Playground

  OpenAI 开发平台

• DeepCode

  AI 代码审查

• Tabnine

  AI 代码补全

• GitHub Copilot

  AI 结对编程

• v0

  基于 AI 的代码生成器

性能优化

• WebPageTest

  网站性能测试

• Lighthouse

  Google 性能检测工具

• Calibre

  性能监控平台

• PerfBar

  性能指标可视化

• SpeedCurve

  综合性能监测