主题
前端工具和网站分享
更新: 9/4/2025字数: 0 字 时长: 0 分钟
1. 基础教程
| 名称 | 描述 | 链接 |
|---|---|---|
| MDN Web 开发者指南 | API 查阅文档 | MDN |
| JavaScript 教程 | 通俗易懂的 JavaScript 教程 | wangdoc |
| ES6 入门教程 | 阮一峰编写的 ES6 教程 | es6.ruanyifeng |
| 现代 JavaScript 教程 | 流行的 JavaScript 教程 | zh.javascript.info |
| Node.js 学习指南 | Node.js 学习教程和笔记 | blog.poetries |
| TypeScript 入门教程 | 通俗易懂的 TypeScript 教程 | GitHub |
| FreeCodeCamp | 免费编程学习平台 | freecodecamp |
| Frontend Masters | 前端大师课程 | frontendmasters |
| JavaScript30 | 30 天纯 JS 挑战 | JavaScript30 |
| CSS-Tricks | CSS 技巧和教程 | css-tricks |
| React 官方文档 | React 官方学习资源 | reactjs |
| Vue 官方文档 | Vue 官方学习资源 | vuejs |
| Web.dev | Google 开发的学习平台 | web.dev |
2. 前端代码规范
| 名称 | 描述 | 链接 |
|---|---|---|
| 腾讯前端代码规范 | 腾讯前端代码规范 | tgideas |
| 京东前端代码规范 | 京东前端代码规范文档 | aotu |
| Bootstrap 编码规范 | 适合个人和小团队的代码规范 | codeguide |
| Airbnb 前端代码规范 | 国外企业的前端代码规范 | GitHub |
| ESLint | 代码规范检查和格式化工具 | eslint |
| Prettier | VSCode 最热门的代码格式化工具 | prettier |
| Google 风格指南 | Google 代码风格指南 | |
| Standard JS | JavaScript 标准风格 | standardjs |
| Stylelint | CSS 样式检查工具 | stylelint |
| Husky | Git 钩子工具 | typicode |
| Commitlint | Git 提交信息规范 | commitlint |
3. 强大的前端库
3.1 时间处理
| 名称 | 描述 | 链接 |
|---|---|---|
| dayjs | 轻量级日期处理库 | dayjs |
| moment | 解析、验证、操作和显示日期 | moment |
| date-fns | 用于操作日期的函数库 | date-fns |
| luxon | 用于操作日期的库 | luxon |
| js-joda | 用于操作日期的库 | js-joda |
3.2 请求处理
| 名称 | 描述 | 链接 |
|---|---|---|
| axios | 基于 Promise 的 HTTP 客户端 | axios |
| fetch | 基于 Promise 的 HTTP 客户端 | fetch |
| request | 基于 Promise 的 HTTP 客户端 | request |
| node-fetch | 基于 Promise 的 HTTP 客户端 | node-fetch |
3.3 图片处理
| 名称 | 描述 | 链接 |
|---|---|---|
| html2canvas | 页面截图 | html2canvas |
| medium-zoom | 为图片提供可缩放的功能 | medium-zoom |
| qrcode | 生成二维码 | qrcode |
4. 常用前端 UI 库
| 名称 | 描述 | 链接 |
|---|---|---|
| ElementUi Plus | PC 端 UI 库（支持 Vue3） | element-plus |
| Vant4 | 轻量、可靠的移动端组件库 | vant |
| AntDesign | 开箱即用的中台前端（React） | antdv |
| Nutui | 京东风格的轻量级移动端 UI 库 | nutui |
| Bootstrap | 最流行的 CSS 框架 | getbootstrap |
| Tailwind CSS | 实用工具优先的 CSS 框架 | tailwindcss |
| Material UI | React Material 风格组件库 | mui |
| Chakra UI | 简单模块化的 React 组件库 | chakra-ui |
| Quasar | 高性能 Vue 组件库 | quasar |
5. CSS 样式
| 名称 | 描述 | 链接 |
|---|---|---|
| Uiverse | UI 设计元素分享平台 | uiverse |
| Web 安全色 | CSS 安全色参考 | css.bqrdh |
| CSS Tricks 效果大全 | CSS 各种效果实现 | lhammer |
| Animista | CSS 动画库 | animista |
| CSS Grid Generator | CSS 网格生成器 | cssgrid-generator |
| Flexbox Froggy | Flex 布局学习游戏 | flexboxfroggy |
| Neumorphism | 新拟态风格生成器 | neumorphism |
| CSS Gradient | CSS 渐变生成器 | cssgradient |
| Clippy | CSS clip-path 生成器 | bennettfeely |
6. WEB 图标
| 名称 | 描述 | 链接 |
|---|---|---|
| Font Awesome | 最流行的图标集 | fontawesome |
| Feather | 简洁美观的开源图标 | feathericons |
| Material Design Icons | 轻快、精美的符号图标 | material.io |
| IconFont | 阿里巴巴矢量图标库 | iconfont |
| Ionicons | 精美的开源图标集 | ionicons |
| Heroicons | 精美的 SVG 图标 | heroicons |
| Remix Icon | 开源中性风图标 | remixicon |
| Tabler Icons | 可定制的免费图标 | tabler-icons |
7. 在线工具
| 名称 | 描述 | 链接 |
|---|---|---|
| CodePen | 前端在线测试和演示工具 | codepen |
| TinyPNG | PNG/JPG 图片在线压缩工具 | tinypng |
| Carbon | 代码转图片工具 | carbon |
| CODEIF | 变量方法起名工具 | codelf |
| JSFiddle | 在线代码测试工具 | jsfiddle |
| StackBlitz | 在线 IDE | stackblitz |
| Can I use | 浏览器兼容性查询 | caniuse |
| BundlePhobia | npm 包大小分析 | bundlephobia |
| Figma | 在线设计工具 | figma |
| Any-rule | 正则大全 | any-rule |
| Webcode.tools | Web 代码生成工具 | webcode.tools |
| CSS Grid Generator | grid 布局 | cssgrid-generator |
| Nginx 配置可视化生成 | 可视化生成 Nginx 配置文件 | nginx-config-generator |
| FANCY-BORDER-RADIUS | css圆角生成器 | fancy-border-radius |
| Easing Gradients | css 渐变 | easing-gradients |
| clip-path 生成器 | css 裁剪路径生成器 | clip-path-generator |
| Neumorphism/Soft UI generator | 新拟态风格生成器 | neumorphism |
| Get Waves SVG | svg 波型生成器 | getwaves |
| jsDelivr | js 库 CDN | jsdelivr |
| esm.sh | js 库 CDN | esm.sh |
| remove.bg | 图片背景移除工具 | remove.bg |
| BgRemover | 图片背景移除工具 | bgremover |
| docsmall | 文档压缩工具 | docsmall |
| Squoosh | Google 开源的图片压缩工具 | squoosh |
| Shields.io | 生成项目状态徽章 | shields.io |
| Star history | 查看项目 Star 趋势 | star-history |
| ProcessOn | 画流程图 | processon |
| Draw.io | 画流程图 | drawio |
| Excalidraw | 在线文件转换器 | excalidraw |
| Convertio | 文件转换器 | cloudconvert |
| Yikm | 小霸王在线游戏机 | yikm |
8. 静态站点搭建
| 名称 | 描述 | 链接 |
|---|---|---|
| Hexo | 静态博客程序 | hexo |
| VuePress | Vue 驱动的静态网站生成器 | vuepress |
| Gatsby | React 静态站点生成器 | gatsbyjs |
| Next.js | React 框架 | nextjs |
| Nuxt.js | Vue 框架 | nuxtjs |
| Docusaurus | 文档站点生成器 | docusaurus |
| 11ty | 简洁的静态站点生成器 | 11ty |
9. 调试抓包
| 名称 | 描述 | 链接 |
|---|---|---|
| Whistle | 代理抓包工具 | wproxy |
| Fiddler | 使用人数最多的抓包工具 | telerik |
| Charles | 跨平台抓包工具 | charlesproxy |
| Wireshark | 网络协议分析工具 | wireshark |
| Postman | API 开发和测试工具 | postman |
| Chrome DevTools | Chrome 开发者工具 | developers |
10. 富文本编辑器
| 编辑器名称 | 类型 | 链接 | 特点 | SSR 支持 | 推荐场景 |
|---|---|---|---|---|---|
| WangEditor 5 | 传统富文本 | 官网 | 轻量、中文文档完善、简单易用 | 优 | 中文项目、中小型应用 |
| TinyMCE | 传统富文本 | 官网 | 功能全面、商业支持、插件丰富 | 良 | 企业级应用、需要丰富功能 |
| Jodit | 传统富文本 | 官网 | 轻量、MIT 许可证、响应式设计 | 良 | 移动端优先、轻量需求 |
| Editor.js | 模块化/块式 | 官网 | JSON 输出、模块化设计、可扩展性强 | 中 | 结构化内容、定制需求 |
| Affine | 模块化/协作 | 官网 | 现代化 UI、协作功能、块式编辑 | 中 | 协作编辑、知识管理 |
| CKEditor 5 | 传统富文本 | 官网 | Office 文档互操作、插件丰富 | 良 | 企业文档处理 |
| Vditor | Markdown 三模式 | 演示 | 支持 Markdown/WYSIWYG/即时渲染三种模式 | 优 | 技术文档、博客系统 |
| Cherry Markdown | Markdown | 演示 | 腾讯开源、纯 Markdown | 中 | 纯 Markdown 编辑 |
| NeuraPress | 微信排版 | 演示 | Next.js 原生、微信排版专用 | 优 | 微信公众号内容 |
11. AI 工具相关
| 名称 | 描述 | 链接 |
|---|---|---|
| TensorFlow.js | JavaScript 机器学习库 | tensorflow |
| screenshot-to-code | 将设计图转换为代码 | GitHub |
| ChatGPT-Next | 私人 ChatGPT 网页应用 | GitHub |
| Runway ML | 创意 AI 工具集 | runwayml |
| GPT-3 Playground | OpenAI 开发平台 | openai |
| DeepCode | AI 代码审查 | deepcode |
| Tabnine | AI 代码补全 | tabnine |
| GitHub Copilot | AI 结对编程 | github |
| v0 | 基于 AI 的代码生成器 | v0 |
12. 性能优化
| 名称 | 描述 | 链接 |
|---|---|---|
| WebPageTest | 网站性能测试 | webpagetest |
| Lighthouse | Google 性能检测工具 | developers |
| Calibre | 性能监控平台 | calibreapp |
| PerfBar | 性能指标可视化 | github |
| SpeedCurve | 综合性能监测 | speedcurve |