前端工具

前端研发工具集

这里收集了前端研发过程中常用的工具，希望能帮助你提高开发效率。

在线工具

代码格式化

• Prettier - 代码格式化工具
• ESLint - 代码质量检查工具
• Beautify - 代码美化工具

JSON 工具

• JSON Formatter - JSON 格式化和验证
• JSON to CSV - JSON 转 CSV
• JSON Viewer - JSON 可视化查看器

正则表达式

• RegExr - 正则表达式测试工具
• RegEx101 - 正则表达式在线测试
• Regular Expressions 101 - 正则表达式解析器

颜色工具

• Color Picker - 颜色选择器
• Color Hex - 颜色代码查询
• Paletton - 调色板生成工具

图片工具

• TinyPNG - 图片压缩工具
• Image Optimizer - 图片优化工具
• SVG Editor - 在线 SVG 编辑器

字体工具

• Google Fonts - 免费字体库
• Font Awesome - 图标字体库
• Icon Finder - 图标搜索工具

本地工具

开发工具

• VS Code - 代码编辑器
• Sublime Text - 代码编辑器
• WebStorm - 前端 IDE

浏览器工具

• Chrome DevTools - Chrome 开发者工具
• Firefox DevTools - Firefox 开发者工具
• Safari Web Inspector - Safari 开发者工具

版本控制

• Git - 版本控制系统
• GitHub Desktop - GitHub 桌面客户端
• SourceTree - Git 图形化客户端

框架工具

React

• Create React App - React 应用脚手架
• React DevTools - React 开发者工具
• Next.js - React 框架

Vue

• Vue CLI - Vue 脚手架
• Vue DevTools - Vue 开发者工具
• Nuxt.js - Vue 框架

Angular

• Angular CLI - Angular 脚手架
• Angular DevTools - Angular 开发者工具

构建工具

• Webpack - 模块打包工具
• Vite - 前端构建工具
• Rollup - JavaScript 模块打包器
• Gulp - 自动化构建工具

包管理

• npm - Node.js 包管理器
• Yarn - 快速、可靠、安全的依赖管理
• pnpm - 快速的 Node.js 包管理器

测试工具

• Jest - JavaScript 测试框架
• Mocha - JavaScript 测试框架
• Cypress - 端到端测试工具
• Playwright - 浏览器自动化测试工具

性能优化

• Lighthouse - 网站性能分析工具
• WebPageTest - 网站性能测试工具
• Bundle Analyzer - 打包文件分析工具

其他工具

• Can I Use - 浏览器兼容性查询
• MDN Web Docs - Web 开发文档
• Stack Overflow - 编程问答社区
• GitHub - 代码托管平台