代码编辑器 / IDE

• VS Code (Visual Studio Code): 微软出品的轻量级但功能强大的代码编辑器，拥有丰富的扩展生态系统。
• WebStorm: JetBrains 出品的智能 IDE，专为 Web 开发设计，提供高级代码辅助和调试功能。
• Sublime Text: 快速、高度可定制的文本编辑器，以其性能和简洁的用户界面而闻名。
• Vim / Neovim: 高效的命令行文本编辑器, 适合键盘驱动和高度定制化的工作流。

包管理器

• npm (Node Package Manager): Node.js 的默认包管理器，用于安装、管理和共享 JavaScript 库。
• Yarn: Facebook 开发的快速、可靠且安全的包管理器，兼容 npm 注册表。
• pnpm: 快速且磁盘空间利用率高的包管理器，通过硬链接和符号链接实现高效的依赖管理。

构建工具 / 任务运行器

• Vite: 极速的下一代前端开发与构建工具，利用 ES Modules 原生支持和 Go 语言实现的热更新。
• Webpack: 功能强大的模块打包器，用于将前端资源（JavaScript, CSS, 图片等）打包成可在浏览器中使用的静态文件。
• Rollup: 专注于 JavaScript 模块打包，常用于构建库和工具。
• esbuild: 极速的 JavaScript 打包器和压缩器，用 Go 语言编写，性能卓越。
• Gulp.js: 基于流的自动化构建工具，通过管道处理任务。

版本控制

• Git: 分布式版本控制系统，用于跟踪代码更改和协作开发。
• GitHub / GitLab / Bitbucket: 基于 Git 的代码托管和协作平台。

浏览器开发者工具

• Chrome DevTools: 谷歌浏览器内置的强大开发工具，用于调试 JavaScript、检查元素、分析性能和网络请求。
• Firefox Developer Tools: 火狐浏览器内置的全面开发工具。
• Safari Web Inspector: Safari 浏览器内置的开发工具。

代码质量与格式化

• ESLint: 可配置的 JavaScript 和 JSX 静态代码分析工具，用于发现代码中的问题和强制代码风格。
• Prettier: 固执己见的代码格式化工具，支持多种语言，确保代码风格一致。
• Stylelint: CSS/SCSS/Less 静态代码分析工具，用于强制 CSS 编码规范。

组件库 / 框架

• React: Facebook 开发的声明式、组件化 JavaScript 库，用于构建用户界面。
• Vue.js: 渐进式 JavaScript 框架，易学易用，性能出色。
• Angular: 谷歌开发的全面型前端框架，适用于大型企业级应用。
• Svelte: 编译型前端框架，在构建时将组件转换为高效的命令式 JavaScript，无需运行时库。
• Next.js (React): 基于 React 的全栈框架，支持服务器端渲染、静态站点生成等。
• Nuxt.js (Vue): 基于 Vue 的全栈框架，提供类似 Next.js 的功能。

CSS 框架 / 工具

• Tailwind CSS: 原子化 CSS 框架，通过实用工具类快速构建自定义设计。
• Bootstrap: 流行且功能齐全的 CSS 框架，提供大量预设组件和样式。
• Sass / Less: CSS 预处理器，提供变量、嵌套、混合等功能，提高 CSS 编写效率和可维护性。
• PostCSS: 用 JavaScript 插件转换 CSS 的工具，实现自动化 CSS 优化。

API 工具

• Postman: 强大的 API 开发协作平台，用于构建、测试和文档化 API。
• Insomnia: 简洁美观的 REST、GraphQL、gRPC 客户端。
• Swagger / OpenAPI: 用于定义、生成和可视化 RESTful API 规范。

测试工具

• Jest: Facebook 开发的 JavaScript 测试框架，常用于 React 应用。
• Cypress: 现代化的端到端测试框架，提供快速、可靠的测试体验。
• React Testing Library / Vue Testing Library: 专注于测试用户行为的库，而非组件内部实现。
• Playwright: 微软开发的自动化测试和抓取工具，支持 Chromium, Firefox, WebKit。
• Vitest: 基于 Vite 的极速单元测试框架。

设计与原型工具

• Figma: 基于云的协同设计工具，用于 UI/UX 设计和原型制作。
• Sketch: 矢量图形设计工具，专为 UI/UX 设计师打造 (macOS Only)。
• Adobe XD: 桌面应用和 Web 服务，用于 UI/UX 设计、原型制作和协作。
• Storybook: 用于独立开发、展示和测试 UI 组件的工具。

图片优化

• TinyPNG / TinyJPG: 在线图片压缩工具。
• ImageOptim: macOS 上的图片优化工具。
• Webpack Image Loader / Gulp ImageMin: 构建流程中的图片优化插件。

辅助工具

• Font Awesome / Material Icons: 字体图标库，提供大量可缩放的矢量图标。
• Lodash / Underscore.js: JavaScript 实用工具库，提供各种函数来简化编程。
• Moment.js / date-fns: JavaScript 日期处理库。
• Axios / Fetch API: 用于发送 HTTP 请求的客户端。
• JSON Viewer (浏览器扩展): 格式化和高亮显示 JSON 数据。
• Lorem Ipsum Generator: 生成占位文本。
• Color Picker (浏览器扩展 / 在线工具): 拾取屏幕颜色。
• Responsively App: 帮助开发者在多个屏幕上同时测试响应式网站。

代码片段管理器

• VS Code Snippets: VS Code 内置的代码片段功能。
• SnippetsLab (macOS): 专业的代码片段管理器。

终端增强

• Oh My Zsh: 增强 Zsh 终端的配置框架，提供主题和插件。
• iTerm2 (macOS): 强大的终端模拟器。